UX: More consistent mobile banner/alert styles, css cleanup

UX: More consistent mobile banner/alert styles, css cleanup

diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index d729cdc..05a2902 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -3,6 +3,7 @@
   background-color: $danger-low;
   color: $primary;
   position: relative;
+  margin-bottom: 1em;
 
   .close {
     font-size: $font-up-3;
diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss
index 70229af..064cd71 100644
--- a/app/assets/stylesheets/desktop.scss
+++ b/app/assets/stylesheets/desktop.scss
@@ -2,7 +2,6 @@
 
 /* @import "desktop/*"; TODO: get this working again */
 
-@import "desktop/alert";
 @import "desktop/banner";
 @import "desktop/compose";
 @import "desktop/discourse";
diff --git a/app/assets/stylesheets/desktop/alert.scss b/app/assets/stylesheets/desktop/alert.scss
deleted file mode 100644
index f3f57ea..0000000
--- a/app/assets/stylesheets/desktop/alert.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.alert {
-  margin-bottom: 1em;
-}
diff --git a/app/assets/stylesheets/mobile/alert.scss b/app/assets/stylesheets/mobile/alert.scss
index 0ee9b44..12e6024 100644
--- a/app/assets/stylesheets/mobile/alert.scss
+++ b/app/assets/stylesheets/mobile/alert.scss
@@ -1,7 +1,8 @@
-// there are (n) new or updated topics, click to show
 .alert.alert-info {
-  margin: 0;
+  margin-bottom: 0.5em;
   &.clickable {
+    // there are (n) new or updated topics, click to show
+    margin-bottom: 0;
     padding: 1em;
   }
 }
diff --git a/app/assets/stylesheets/mobile/banner.scss b/app/assets/stylesheets/mobile/banner.scss
index 852b284..fc308f0 100644
--- a/app/assets/stylesheets/mobile/banner.scss
+++ b/app/assets/stylesheets/mobile/banner.scss
@@ -3,11 +3,6 @@
 // --------------------------------------------------
 
 #banner {
-  // go full width on mobile, by extending into the 10px wrap
-  // borders on left and right
-  margin: 0 -10px;
   max-height: 180px;
-  @media all and (max-height: 499px) {
-    max-height: 100px;
-  }
+  height: 20vh;
 }

GitHub sha: eef47a26

1 Like