Avoid the use of \!important in CSS, introduce gmf-hidden in gmf exam…

…ples
camptocamp · Nov 6, 2018 · 4fb8db7 · 4fb8db7
1 parent 00d35cf
commit 4fb8db7
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 25 deletions.
diff --git a/contribs/gmf/examples/displayquerygrid.html b/contribs/gmf/examples/displayquerygrid.html
@@ -6,7 +6,7 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./hidelayertree.inc.css" rel="stylesheet" />
+    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 
@@ -29,10 +29,12 @@
         </select>
         </span>
       </div>
-      <gmf-layertree
-          gmf-layertree-map="::ctrl.map"
-          gmf-layertree-openlinksinnewwindow="::true">
-      </gmf-layertree>
+      <div class="gmf-hidden">
+        <gmf-layertree
+            gmf-layertree-map="::ctrl.map"
+            gmf-layertree-openlinksinnewwindow="::true">
+        </gmf-layertree>
+      </div>
     </div>
 
     <div class="clear-left"></div>

diff --git a/contribs/gmf/examples/displayquerywindow.html b/contribs/gmf/examples/displayquerywindow.html
@@ -6,7 +6,7 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./hidelayertree.inc.css" rel="stylesheet" />
+    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 
@@ -29,10 +29,12 @@
         </select>
         </span>
       </div>
-      <gmf-layertree
-          gmf-layertree-map="::ctrl.map"
-          gmf-layertree-openlinksinnewwindow="::true">
-      </gmf-layertree>
+      <div class="gmf-hidden">
+        <gmf-layertree
+            gmf-layertree-map="::ctrl.map"
+            gmf-layertree-openlinksinnewwindow="::true">
+        </gmf-layertree>
+      </div>
     </div>
 
     <div class="clear-left"></div>

diff --git a/contribs/gmf/examples/editfeatureselector.html b/contribs/gmf/examples/editfeatureselector.html
@@ -6,7 +6,7 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
-    <link href="./hidelayertree.inc.css" rel="stylesheet" />
+    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
     <gmf-map gmf-map-map="ctrl.map"></gmf-map>
@@ -22,10 +22,12 @@
 
     <p><strong>Note:</strong> After logging it, you need to refresh the page</p>
 
-    <gmf-layertree
-        class="panel panel-default panel-body"
-        gmf-layertree-map="::ctrl.map">
-    </gmf-layertree>
+    <div class="gmf-hidden">
+      <gmf-layertree
+          class="panel panel-default panel-body"
+          gmf-layertree-map="::ctrl.map">
+      </gmf-layertree>
+    </div>
 
     <gmf-authentication
         class="panel panel-default panel-body">

diff --git a/contribs/gmf/examples/gmf-hidden.inc.css b/contribs/gmf/examples/gmf-hidden.inc.css
@@ -0,0 +1,3 @@
+.gmf-hidden {
+  display: none;
+}
diff --git a/contribs/gmf/examples/hidelayertree.inc.css b/contribs/gmf/examples/hidelayertree.inc.css
diff --git a/contribs/gmf/examples/print.html b/contribs/gmf/examples/print.html
@@ -6,7 +6,7 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./hidelayertree.inc.css" rel="stylesheet" />
+    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 
@@ -21,10 +21,12 @@
         </select>
         </span>
       </div>
-      <gmf-layertree
-          gmf-layertree-map="::ctrl.map"
-          gmf-layertree-openlinksinnewwindow="::true">
-      </gmf-layertree>
+      <div class="gmf-hidden">
+        <gmf-layertree
+            gmf-layertree-map="::ctrl.map"
+            gmf-layertree-openlinksinnewwindow="::true">
+        </gmf-layertree>
+      </div>
     </div>
 
     <div class="clear-left"></div>

diff --git a/contribs/gmf/examples/search.css b/contribs/gmf/examples/search.css
@@ -57,8 +57,15 @@ span.twitter-typeahead {
 .gmf-search > * {
   float: left;
 }
-gmf-search .gmf-search {
-  width: auto !important;
+@media (max-width: 576px) {
+  .container-fluid gmf-search .gmf-search {
+    width: auto;
+  }
+}
+@media (min-width: 576px) {
+  .container-fluid gmf-search .gmf-search {
+    width: auto;
+  }
 }
 .gmf-search > .gmf-clear-button{
   margin-left: -15px;