style: improve responsiveness and ux

Author: makors

intranet/static/css/bus.scss

@@ -284,6 +284,12 @@ div.selectize-input.full {
     width: 220px;
 }
 
+@media (min-width: 1400px) {
+    .selectize-input {
+        width: 90%;
+    }
+}
+
 .update-button {
     display: block;
 

intranet/static/css/dashboard.scss

@@ -12,7 +12,6 @@
   }
 
   h2 {
-    padding-left: 10px;
     line-height: 38px;
     float: left;
   }
@@ -39,7 +38,7 @@
 }
 
 .announcements-header {
-  height: 38px;
+  overflow: hidden;
   margin-bottom: 4px;
 }
 
@@ -120,9 +119,10 @@ a.club-announcement-meta-link:visited {
 }
 
 .announcements-icon-wrapper:has(> .club-announcements-button) {
-  @media (max-width: 800px) {
+  @media (max-width: 1120px) {
     display: block !important;
     width: 100%;
+    margin-bottom: 6px;
   }
 
   @media (max-width: 550px) {
@@ -236,6 +236,12 @@ a.club-announcement-meta-link:visited {
   float: right;
 }
 
+@media (max-width: 515px) {
+  .announcements-icon-wrapper {
+    float: left;
+  }
+}
+
 .announcement-metadata {
   color: rgb(144, 144, 144);
   font-size: 12px;
@@ -322,17 +328,6 @@ a.button {
   text-align: center;
 }
 
-@media (max-width: 800px) {
-  /*
-     * widgets that fall underneath nav shouldn't float
-     * all the way to the left in 800-500px tablet view.
-     * mainly affects student admins
-     */
-  ul.nav {
-    margin-bottom: 100%;
-  }
-}
-
 /*
  * between 800px and 662px, show a two column widget view
  * nonfunctional

intranet/static/css/dashboard.widgets.scss

@@ -84,9 +84,9 @@ $font-stack: "Open Sans", "Helvetica Neue", sans-serif;
     color: red;
 }
 
-.widget .widget-title .warning i {
-    //color: rgb(255, 72, 72);
-}
+// .widget .widget-title .warning i {
+//     //color: rgb(255, 72, 72);
+// }
 
 .main div.widgets {
     @media (max-width: 355px) {
@@ -398,14 +398,14 @@ a#eighth-sponsor {
 
         @media (max-width: 800px) {
             display: block;
-            width: calc(100% - 75px);
+            width: calc(100% - 78px);
 
             body.show-extra-widgets & {
                 display: none;
             }
         }
 
-        @media (max-width: 550px) {
+        @media (max-width: 680px) {
             width: 100%;
         }
     }

intranet/static/css/events.scss

@@ -1,58 +1,58 @@
 @import "colors";
 
+.primary-content {
+    position: relative;
+}
+
 .events {
     min-width: 290px; // for 320x480 screens
     max-width: 1000px;
-    margin-bottom: 100px;
 
     h2 {
-        padding-left: 10px;
         line-height: 38px;
 
         &.category {
             font-size: 18px;
             font-weight: normal;
-            padding-left: 10px;
             height: 33px;
         }
     }
 }
 
 .button-container {
-    float: right;
-    margin-top: -38px;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
 .button-subcontainer {
     display: inline-block;
     margin-right: 5px;
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 570px) {
+    .events {
+        max-width: none;
+    }
     .button-container {
-      margin-top: auto;
-      margin-bottom: 5px;
+        position: static;
     }
+}
+
+@media (max-width: 1225px) {
     .arrow-container {
         margin-bottom: -20px !important;
     }
 
-    .events-container > .event:nth-child(2) {
-        margin-top: 43px;
-        @media (max-width: 387px) {
-            margin-top: 80px;
-        }
-    }
-
     .week-only {
         position: relative;
-        right: 8.5%;
+        right: 0;
 
         & > tbody > tr > td {
             display: block;
             border-bottom: 1px solid lightgrey;
             padding: 20px 0 !important;
-            width: 120%;
+            width: 100%;
 
             &:first-child {
                 border-top: 1px solid lightgrey;
@@ -139,13 +139,14 @@
         }
     }
 
-    @media (max-width: 710px) {
+    /* these values are mostly arbitrary but were collected manually and do work */
+    @media (max-width: 710px), (min-width: 960px) and (max-width: 1000px), (min-width: 800px) and (max-width: 880px) {
         .bottom-row {
-            margin-bottom: 23px;
+            margin-bottom: 15px;
 
             .attend-status {
                 left: 0;
-                bottom: -27px;
+                bottom: -15px;
             }
         }
     }
@@ -321,6 +322,7 @@ span.approve-reject {
         width: 19%;
         padding: 10px !important;
         border: 1px solid lightgrey;
+        vertical-align: top;
 
         h2 {
             font-weight: normal;

intranet/static/css/page_base.scss

@@ -200,7 +200,7 @@ h1 {
 .header .csl-apps {
     display: inline-block;
     position: relative;
-    padding: 0 10px 0 0;
+    padding: 0 6px 0 0;
     line-height: normal;
 
     .fa-user, .fa-th {
@@ -241,10 +241,6 @@ h1 {
     color: white;
 }
 
-.header .username {
-    margin-right: 10px;
-}
-
 .header .dropdown-menu {
     display: none;
     opacity: 0;

intranet/static/css/printing.scss

@@ -12,6 +12,12 @@
     width: 60%;
 }
 
+@media (max-width: 600px) {
+    .primary-content form {
+        width: 100%;
+    }
+}
+
 .print-status-container {
     float: left;
     padding: 10px;

intranet/static/css/responsive.core.scss

@@ -12,7 +12,7 @@ body.disable-scroll {
 
 @media (max-width: 800px) {
     .header .search input[type="text"] {
-        width: 158px;
+        width: 250px;
         font-size: 12px;
         padding-right: 3px;
     }
@@ -45,6 +45,10 @@ body.disable-scroll {
         position: absolute !important;
         top: 4px;
         left: 60px;
+
+        body.mobile-nav-show & {
+            display: none;
+        }
     }
 
     .status-icon {
@@ -88,10 +92,10 @@ body.disable-scroll {
             }
         }
 
-        &.has-badge .left > form.search {
+        //&.has-badge .left > form.search {
             //width: 50%;
             //left: 20%;
-        }
+        //}
     }
     .left > a.intranet-title {
         position: absolute;
@@ -158,8 +162,6 @@ body.disable-scroll {
         height: 100%;
         height: calc(100% - 42px);
         overflow-y: auto;
-        background-color: rgb(242, 242, 244);
-        //background-color: rgb(56, 56, 56);
         border-radius: 0;
         border: none;
         /*
@@ -273,6 +275,7 @@ body.disable-scroll {
         cursor: pointer;
     }
     .intranet-title,
+    .status-link,
     .search {
         transition: all 0.2s ease;
         -webkit-transition: all 0.2s ease;
@@ -287,9 +290,30 @@ body.disable-scroll {
  * screens (320x480, iPhone 4)
  */
 
-@media (max-width: 325px) {
+@media (max-width: 420px) {
     body {
         padding-left: 6px;
         padding-right: 6px;
     }
+
+    // overlaps with the search bar otherwise
+    body.mobile-nav-show {
+        .right {
+            display: none;
+        }
+
+        .left {
+            text-align: center;
+
+            // otherwise the search bar is too close to the back button
+            > form.search {
+                left: 20%;;
+            }
+        }
+
+        // search bar only shows when the mobile nav menu is active
+        .search input[type="text"] {
+            width: 180px; // using the space freed by no right buttons
+        }
+    }
 }

intranet/static/css/responsive.scss

@@ -29,17 +29,23 @@
             position: static;
             height: auto;
             width: 100%;
+        }
+
+        div.announcements {
+            padding-right: 0;
+        }
+    }
+
+    /* if the min isnt 680 everything will be slightly shifted to the left on mobile */
+    @media (min-width: 681px) and (max-width: 800px) {
+        div.widgets {
             width: calc(100% - 16px);
-            margin-bottom: 10px;
 
             .widget {
                 position: relative;
                 left: 16px;
             }
         }
-        div.announcements {
-            padding-right: 0;
-        }
     }
 }