From d89b1f40c00668bc0e5421ae39267e8b18f68578 Mon Sep 17 00:00:00 2001
From: Fred Tempez <ftempez@gmail.com>
Date: Wed, 24 Mar 2021 14:57:03 +0100
Subject: [PATCH] =?UTF-8?q?drapeaux=20dans=20le=20site=20=C3=A9crans=20plu?=
 =?UTF-8?q?s=20petits=20que=201024px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core.php          |  7 ++--
 core/layout/common.css | 72 +++++++++++++++++++++++++++++++-----------
 2 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/core/core.php b/core/core.php
index 1ae0758a..cdbf1ea4 100755
--- a/core/core.php
+++ b/core/core.php
@@ -2406,6 +2406,7 @@ class layout extends common {
 	 * @param Page par défaut
 	 */
 	public function showContent() {
+		echo $this->showi18n('Site');
 		if(
 			$this->core->output['title']
 			AND (
@@ -2787,7 +2788,7 @@ class layout extends common {
 		}
 		// Retourne les items du menu
 		echo '<ul class="navMain" id="menuLeft">' . $itemsLeft . '</ul><ul class="navMain" id="menuRight">' . $itemsRight . '</ul>';
-		echo $this->showi18n();
+		echo $this->showi18n('Nav');
 	}
 
 	/**
@@ -3132,8 +3133,8 @@ class layout extends common {
 	/**
 	 * Affiche le cadre avec les drapeaux sélectionnés
 	 */
-	public function showi18n() {
-		echo '<div id="i18nContainer"><ul>';
+	public function showi18n($id) {
+		echo '<div id="i18nContainer' . $id . '"><ul>';
 		foreach (self::$i18nList as $key => $value) {
 			if ($this->getData(['config','translate',$key]) === 'site'
 				OR (
diff --git a/core/layout/common.css b/core/layout/common.css
index 31b1c155..91cb6483 100755
--- a/core/layout/common.css
+++ b/core/layout/common.css
@@ -29,7 +29,7 @@ body {
 }
 
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	body {
 		/*margin:0px 10px;*/
 		margin: 0;
@@ -41,7 +41,7 @@ body {
 /**
 * Petits écrans inférieurs à 768px de largeur, on supprime les marges
 */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body {
 		margin: 0px;
 	}
@@ -65,7 +65,7 @@ body {
 
 
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	.siteContainer {
 		display: flex;
 		flex-direction: column;
@@ -237,12 +237,12 @@ td>.col12 {
 }
 
 /* Tableau sur les écrans de petites tailles */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	.table thead {
 		font-size: 0.8em;
 	}
 }
-@media (max-width: 668px) {
+@media screen and (max-width: 668px) {
 	.table thead {
 		display:none;
 	}
@@ -408,7 +408,7 @@ td>.col12 {
 	background-color: rgba(255, 255, 255, 1);
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	#bar #barLeft {
 		float: left;
 	}
@@ -419,7 +419,7 @@ td>.col12 {
 	}
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	#bar {
 		text-align: center;
 		padding: 0 1;
@@ -455,7 +455,7 @@ td>.col12 {
 	overflow: hidden;
 }
 /* Dans theme.css
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	#site {
 		margin: 20px auto;
 	}
@@ -464,7 +464,7 @@ td>.col12 {
 
 /* Bannière */
 
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	body>header {
 		margin: 0;
 		/*-10px;*/
@@ -598,13 +598,13 @@ nav::before {
 	display: flex;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	nav #menu {
 		display: block;
 	}
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body>nav {
 		margin: 0;
 	}
@@ -691,21 +691,21 @@ li .menuSideChild {
 
 /* Container des drapeaux */
 
-#i18nContainer {
+
+#i18nContainerNav, #i18nContainerSite {
 	position: relative ;
 	float: right;
 }
 
-#i18nContainer ul {
+#i18nContainerNav ul, #i18nContainerSite ul {
 	list-style: none;
 }
 
-#i18nContainer li {
+#i18nContainerNav li, #i18nContainerSite li {
 	display: inline-block;
 	position: relative;
 }
 
-
 #i18nFlag {
 	width: 70%;
 }
@@ -715,8 +715,42 @@ li .menuSideChild {
 }
 
 
+/*
+* Position du bloc dans le site sur les petits écrans
+*/
+
+#i18nContainerNav {
+	display: block;
+}
+#i18nContainerSite {
+	display: none;
+}
+
+@media screen and (max-width:1024px){
+	#i18nContainerNav {
+	  display: none;
+	}
+	#i18nContainerSite {
+	  display: block;
+	  margin-top: -10px;
+	}
+
+	#i18nFlag {
+		width: 100%;
+		padding: 5px;
+	}
+	
+	#i18nFlagSelected {
+		width: 130%;
+		padding:  5px;
+	}
+	
+  }
+
+
+
 /* Corps */
-@media (min-width:768px) {
+@media screen and (min-width:768px) {
 	section {
 		padding: 20px;
 	}
@@ -813,7 +847,7 @@ footer #footerbody>div {
 }
 
 /* Conserve le pied de page sur une ligne */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
 	body>footer {
 		margin: 0;
 	}
@@ -1358,7 +1392,7 @@ input[type='checkbox']:disabled+label:before {
 	display: inline-block;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
 	.col1 {
 		width: 8.33333333%;
 	}
@@ -1547,7 +1581,7 @@ th.col12 {
 }
 
 /* Tableau sur les écrans de très petites tailles */
-@media (max-width: 480px){
+@media screen and (max-width: 480px){
     .table tr{
     display: block;
     margin-bottom: 10px;