More CSS and layout fixes especially on mobile

fnf-org · Sep 26, 2024 · 587f083 · 587f083
1 parent 38eb02c
commit 587f083
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 116 deletions.
diff --git a/app/assets/stylesheets/site/flash.css.scss b/app/assets/stylesheets/site/flash.css.scss
@@ -8,7 +8,6 @@
   right: 40px;
   z-index: 1000;
   padding: 0;
-  border: 2px solid #222 !important;
   box-shadow: 0px 10px 10px 0 rgba(45, 45, 45, 0.4);
   border-radius: 20px;
   min-height: 100px;

diff --git a/app/assets/stylesheets/site/home.css.scss b/app/assets/stylesheets/site/home.css.scss
@@ -1,8 +1,7 @@
 .hero-unit {
+  padding: 0 !important;
+  margin: 0 auto !important;
   text-align: center;
-  width: 100%;
-  position: relative;
-  overflow-y: hidden;
 }
 
 .marketing {

diff --git a/app/assets/stylesheets/site/nav.css.scss b/app/assets/stylesheets/site/nav.css.scss
@@ -1,88 +1,90 @@
-
-nav.navbar {
-  z-index: 100 !important;
-  width: 100%;
-  top: 0px !important;
-  left: 0px !important;
-  padding: 0px !important;
-  margin: 0px !important;
-  background-color: rgba(80, 133, 197, 0.58);
-  border-bottom: 2px solid rgba(6, 74, 124, 0.58);
-
-  .navbar-toggler {
-    margin-right: 10px;
-    margin-top: 10px;
-  }
-
-  a.nav-brand {
-    display: inline-block;
-    border-width: 0 !important;
-    padding: 0 !important;
-    background-color: transparent !important;
-    border-radius: 0;
-    margin-left: 30px;
-  }
-
-  a.nav-brand img {
-    display: inline-block;
-    position: relative;
-    margin-left: 50px !important;
-    padding: 20px !important;
-  }
-
-  ul {
-    margin-left: 10px !important;
-
-    li.nav-item {
-      a.nav-link {
+body {
+  .container-fluid, .container {
+    .button-links {
+      a.button-link {
+        display: inline-block;
+        background-color: #225fe4 !important;
         border-radius: 5px;
-        color: rgb(255, 255, 255) !important;
-        text-decoration: none !important;
-        padding: 6px 15px !important;
-        margin-right: 10px !important;
-        margin-left: 10px !important;
-        background-color: rgba(69, 150, 254, 0.65) !important;
+        border: 1px solid #032761;
+        color: #fff;
+        font-weight: 400;
+        margin-left: 0;
+        margin-right: 3px;
+        padding: 6px 15px;
+        text-decoration: none;
+        min-width: 200px !important;
 
         &:focus,
         &:hover {
-          background-color: rgba(69, 150, 254, 1) !important;
+          color: #000;
+          background-color: #ff7800;
         }
       }
     }
+
+    .btn-round {
+      border-radius: 10px !important;
+      padding: 6px 15px !important;
+      vertical-align: baseline !important;
+      font-size: 20pt;
+    }
   }
-}
 
-.button-links {
-  a.button-link {
-    display: inline-block;
-    background-color: #225fe4 !important;
-    border-radius: 5px;
-    border: 1px solid #032761;
-    color: #fff;
-    font-weight: 400;
-    margin-left: 0;
-    margin-right: 3px;
-    padding: 6px 15px;
-    text-decoration: none;
-    min-width: 200px !important;
+  nav#main_nav {
+    background-color: rgba(80, 133, 197, 0.58) !important;
+    z-index: 100 !important;
+    top: 0 !important;
+    left: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: rgba(16, 123, 205, 0.3);
+
+    .navbar-toggler {
+      margin-right: 20px;
+      margin-top: 10px;
+    }
 
-    &:focus,
-    &:hover {
-      color: #000;
-      background-color: #ff7800;
+    a#brand-logo {
+      display: block;
+      width: 100px;
+      height: 100px;
+      border-width: 0 !important;
+      padding: 0 !important;
+      background-color: transparent !important;
+      border-radius: 0;
+
+      img#brand-logo-img {
+        display: block;
+        height: 100px !important;
+        width: 100px !important;
+        padding: 10px;
+      }
     }
-  }
-}
 
-.btn-round {
-  border-radius: 10px !important;
-  padding: 6px 15px !important;
-  vertical-align: baseline !important;
-  font-size: 20pt;
-}
+    ul {
+      margin-left: 10px !important;
+
+      li.nav-item {
+        a.nav-link {
+          width: auto !important;
+          border-radius: 5px;
+          color: rgb(255, 255, 255) !important;
+          text-decoration: none !important;
+          padding: 6px 15px !important;
+          margin-right: 10px !important;
+          margin-left: 10px !important;
+          background-color: rgba(69, 150, 254, 0.65) !important;
+
+          &:focus,
+          &:hover {
+            background-color: rgba(69, 150, 254, 1) !important;
+          }
+        }
+      }
+    }
 
-.container-fluid, .container {
-  .navbar {
     .btn, a.btn, a.button-link {
       border-radius: 10px;
       color: #fff;

diff --git a/app/assets/stylesheets/site/width_0000_0600.css.scss b/app/assets/stylesheets/site/width_0000_0600.css.scss
@@ -1,21 +1,30 @@
-
 // Hide navbar text for small screens
 @media (min-width: 0px) and (max-width: 600px) {
   body {
-    padding: 0 !important;
-    margin: 0 !important;
+    #columns-container {
+      margin: 20px auto;
+      width: 100% !important;
+    }
+
+    %ul.navbar-nav {
+      float: right;
+    }
+    .main-container {
+      padding: 0 !important;
+      margin-top: 0 !important;
+      width: 90% !important;
+    }
 
     .container-fluid, .container {
       margin-top: 0 !important;
+      padding-left: 0 !important;
     }
 
     %nav {
       top: 0px !important;
-      margin-top: -20px !important;
     }
 
-    width: 100% !important;
-    font-size: 1em;
+    font-size: 0.9em !important;
 
     td.ticket-user {
       a {
@@ -49,35 +58,36 @@
     }
 
     .btn {
-      font-size: 0.8em !important;
+      font-size: 10pt !important;
     }
+
     h1 {
-      font-size: 30pt;
+      font-size: 20pt;
     }
 
     h2 {
-      font-size: 25pt;
+      font-size: 15pt;
     }
 
     h3 {
-      font-size: 23pt;
+      font-size: 13pt;
       margin: 15px auto;
       text-shadow: 1px 1px 2px #000;
       color: #999 !important;
     }
 
     h4 {
-      font-size: 19pt;
+      font-size: 12pt;
       margin: 10px auto;
     }
 
     h5 {
-      font-size: 16pt;
+      font-size: 11pt;
       margin: 5px auto;
     }
 
     .container-fluid, .container {
-      padding: 20px;
+      padding: 0;
 
       .event-admins {
         a {
@@ -86,7 +96,6 @@
       }
 
       .card {
-        width: 95%;
         margin-left: 0;
         margin-right: 0;
         overflow-y: scroll;
@@ -108,10 +117,12 @@
       td.optional, th.optional {
         display: none !important;
       }
+
       td.optional-small, th.optional-small {
         display: none !important;
       }
-      td.optional-medium, th.optional-medium  {
+
+      td.optional-medium, th.optional-medium {
         display: none !important;
       }
     }
@@ -128,11 +139,6 @@
     white-space: normal;
   }
 
-  .main-container {
-    padding: 0;
-  }
-
-
   #footer {
     font-size: 0.7em;
   }

diff --git a/app/assets/stylesheets/site/width_0600_0900.css.scss b/app/assets/stylesheets/site/width_0600_0900.css.scss
@@ -1,6 +1,10 @@
 
 // Hide navbar text for small screens
 @media (min-width: 601px) and (max-width: 900px) {
+  nav.navbar {
+    font-size: 0.8em;
+  }
+
   table {
     tr {
       td.optional, th.optional {
@@ -27,7 +31,16 @@
   }
 
   body {
-    font-size: 14pt;
+    font-size: 10pt !important;
+
+    .btn {
+      font-size: 12pt !important;
+    }
+
+    #columns-container {
+      margin: 20px auto;
+      width: 100%;
+    }
   }
 
   .event-admins {
@@ -44,10 +57,6 @@
     font-size: 1.2em !important;
   }
 
-  #brand-logo img {
-    display: none !important;
-  }
-
   .btn, .nav-link {
     font-size: 1em !important;
   }

diff --git a/app/assets/stylesheets/site/width_0900_1500.css.scss b/app/assets/stylesheets/site/width_0900_1500.css.scss
@@ -4,6 +4,11 @@
   body {
     font-size: 15pt;
 
+    #columns-container {
+      margin: 20px auto;
+      width: 95%;
+    }
+
     table {
       tr {
 

diff --git a/app/assets/stylesheets/site/width_1500_9999.css.scss b/app/assets/stylesheets/site/width_1500_9999.css.scss
@@ -4,6 +4,11 @@
   body {
     font-size: 16pt;
 
+    #columns-container {
+      margin: 20px auto;
+      width: 90%;
+    }
+
     td.optional, th.optional {
       display: table-cell !important;
     }

diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js
@@ -29,16 +29,16 @@ export default class FlashController extends Controller {
     }
 
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    hideFlash = () => {
+    hideFlash = (hideDelay = 'fast') => {
         $("#flash").html('')
-        $('#flash_container').hide('fast')
+        $('#flash_container').hide(hideDelay)
     }
 
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     hideFlashAfter = (delay = 3000) => {
         const self = this
         setTimeout(function () {
-            self.hideFlash()
+            self.hideFlash('slow')
         }, delay)
     }
 

diff --git a/app/views/home/oops.html.haml b/app/views/home/oops.html.haml
@@ -1,6 +1,6 @@
-.hero-unit.w-75.m-auto
+.hero-unit
   %h1
     #{@error_description || "Please ask your administrator to do so if you'd like to party soon." }
+  .vertical-20
 
-.hero-unit.w-75.m-auto
   = render 'shared/marketing'