Combine small.scss into common.scss

We've moved away from the idea of having extra rules for small screens,
and instead follow the bootstrap convention of designing for small
screens first and overriding those rules if needed for larger screens.

Having a separate file remaining for a limited number of small screen
rules is therefore counter-productive. Moving the remaining rules into
common.scss, adjacent to the related rules for larger screen, makes
the behaviour easier to understand, as well as making it easier to
refactor the rules to a small-screen-first approach.

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ce83a1d935e5327b5ca868c8c6e931b68c31d323..ed444899f2912b74734f634c8f0f86616928f18a 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -242,6 +242,95 @@ body.compact-nav {
   }
 }
 
   }
 }
 

+body.small-nav {
+  #menu-icon {
+    display: inline-block !important;
+  }
+
+  nav.primary,
+  nav.secondary {
+    float: none !important;
+    position: relative;
+    display: block;
+    clear: both;
+  }
+
+  header {
+    height: auto;
+    min-height: $headerHeight;
+    background: #fff;
+
+    &.closed nav {
+      display: none;
+    }
+
+    .search_forms {
+      display: block;
+    }
+  }
+
+  #sidebar .search_forms,
+  #edit_tab,
+  #export_tab {
+    display: none;
+  }
+
+  nav.primary {
+    padding: 0;
+
+    ul, li {
+      border: none;
+      border-radius: 0;
+      width: 100%;
+    }
+
+    ul {
+      border-top: 1px solid #eee;
+      li {
+        border-bottom: 1px solid #eee;
+        border-right: none;
+        > a {
+          border-radius: 0;
+          width: 100%;
+          text-align: center;
+          font-size: 15px;
+        }
+      }
+    }
+
+    .btn-group {
+      width: 100%;
+      padding: 10px;
+    }
+  }
+
+  nav.secondary {
+    .user-menu {
+      width: 100%;
+    }
+  }
+
+  #compact-secondary-nav {
+    display: none;
+  }
+
+  .compact-hide {
+    display: inline-block;
+  }
+
+  .overlay-sidebar #sidebar .welcome.visible {
+    display: none;
+  }
+
+  .overlay-sidebar #sidebar #banner {
+    display: none;
+  }
+
+  .leaflet-top.leaflet-right {
+    top: 10px !important;
+  }
+}
+

 /* Utility for styling notification numbers */
 
 .count-number {
 /* Utility for styling notification numbers */
 
 .count-number {


@@ -441,6 +530,36 @@ body.compact-nav {
   }
 }
 
   }
 }
 

+@media (max-width: 767.98px) {
+  body.map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
+    }
+
+    .overlay-sidebar {
+      #sidebar {
+        position: absolute;
+        width: 350px;
+        height: auto;
+        overflow: hidden;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }
+  }
+}
+

 .layers-ui,
 .share-ui {
   li:last-child {
 .layers-ui,
 .share-ui {
   li:last-child {

diff --git a/app/assets/stylesheets/screen-ltr.css b/app/assets/stylesheets/screen-ltr.css
index 838c9198f38157eb32f5a80b408e31d7cb85c91a..a0890d1e01b16af13f0b2cf63f580c39ca857299 100644 (file)
--- a/app/assets/stylesheets/screen-ltr.css
+++ b/app/assets/stylesheets/screen-ltr.css
@@ -1,4 +1,3 @@
 /*
  *= require ltr/common
 /*
  *= require ltr/common

- *= require ltr/small

  */
  */

diff --git a/app/assets/stylesheets/screen-rtl.css b/app/assets/stylesheets/screen-rtl.css
index 91d9fa3edba8e40bf869e5291502acdad628441f..c0f4d793a2248f4e0bf56389edc09f08daa1e03d 100644 (file)
--- a/app/assets/stylesheets/screen-rtl.css
+++ b/app/assets/stylesheets/screen-rtl.css
@@ -1,4 +1,3 @@
 /*
  *= require rtl/common
 /*
  *= require rtl/common

- *= require rtl/small

  */
  */

diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
deleted file mode 100644 (file)
index 2247b4b..0000000
--- a/app/assets/stylesheets/small.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-@import "parameters";
-
-/* Styles specific to a small screen, such as iPhone, Android, etc... */
-
-body.small-nav {
-  #menu-icon {
-    display: inline-block !important;
-  }
-
-  nav.primary,
-  nav.secondary {
-    float: none !important;
-    position: relative;
-    display: block;
-    clear: both;
-  }
-
-  header {
-    height: auto;
-    min-height: $headerHeight;
-    background: #fff;
-
-    &.closed nav {
-      display: none;
-    }
-
-    .search_forms {
-      display: block;
-    }
-  }
-
-  #sidebar .search_forms,
-  #edit_tab,
-  #export_tab {
-    display: none;
-  }
-
-  nav.primary {
-    padding: 0;
-
-    ul, li {
-      border: none;
-      border-radius: 0;
-      width: 100%;
-    }
-
-    ul {
-      border-top: 1px solid #eee;
-      li {
-        border-bottom: 1px solid #eee;
-        border-right: none;
-        > a {
-          border-radius: 0;
-          width: 100%;
-          text-align: center;
-          font-size: 15px;
-        }
-      }
-    }
-
-    .btn-group {
-      width: 100%;
-      padding: 10px;
-    }
-  }
-
-  nav.secondary {
-    .user-menu {
-      width: 100%;
-    }
-  }
-
-  #compact-secondary-nav {
-    display: none;
-  }
-
-  .compact-hide {
-    display: inline-block;
-  }
-
-  .overlay-sidebar #sidebar .welcome.visible {
-    display: none;
-  }
-
-  .overlay-sidebar #sidebar #banner {
-    display: none;
-  }
-
-  .leaflet-top.leaflet-right {
-    top: 10px !important;
-  }
-}
-
-@media (max-width: 767.98px) {
-  body.map-layout {
-    #sidebar, #map {
-      position: relative;
-      overflow-x: hidden;
-      width: 100%;
-      height: 50%;
-    }
-
-    .overlay-sidebar {
-      #sidebar {
-        position: absolute;
-        width: 350px;
-        height: auto;
-        overflow: hidden;
-      }
-
-      #map {
-        height: 100%;
-      }
-    }
-
-    #map-ui {
-      z-index: 9999;
-      width: 100%;
-      overflow-y: scroll;
-    }
-  }
-}