From 5ab682dbbdc0bc4034d1c93aae3d082dae09fa65 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 14 Sep 2022 15:44:35 +0100
Subject: [PATCH] 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.
---
 app/assets/stylesheets/common.scss    | 119 +++++++++++++++++++++++++
 app/assets/stylesheets/screen-ltr.css |   1 -
 app/assets/stylesheets/screen-rtl.css |   1 -
 app/assets/stylesheets/small.scss     | 122 --------------------------
 4 files changed, 119 insertions(+), 124 deletions(-)
 delete mode 100644 app/assets/stylesheets/small.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ce83a1d93..ed444899f 100644
--- 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 {
@@ -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 {
diff --git a/app/assets/stylesheets/screen-ltr.css b/app/assets/stylesheets/screen-ltr.css
index 838c9198f..a0890d1e0 100644
--- a/app/assets/stylesheets/screen-ltr.css
+++ b/app/assets/stylesheets/screen-ltr.css
@@ -1,4 +1,3 @@
 /*
  *= require ltr/common
- *= require ltr/small
  */
diff --git a/app/assets/stylesheets/screen-rtl.css b/app/assets/stylesheets/screen-rtl.css
index 91d9fa3ed..c0f4d793a 100644
--- a/app/assets/stylesheets/screen-rtl.css
+++ b/app/assets/stylesheets/screen-rtl.css
@@ -1,4 +1,3 @@
 /*
  *= require rtl/common
- *= require rtl/small
  */
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
deleted file mode 100644
index 2247b4bbe..000000000
--- 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;
-    }
-  }
-}
-- 
2.39.5