Schedule 2.0 Mobile (#1163)

* progress on mobile * Progress * Aligning things and fix specifity roadblock * Tab spacing and tweak section on very small screen * style fix
codeRIT · Feb 13, 2021 · 473a87a · 473a87a
1 parent 229ea6b
commit 473a87a
Showing 1 changed file with 90 additions and 53 deletions.
diff --git a/sass/main.scss b/sass/main.scss
@@ -718,13 +718,16 @@ nav {
         justify-content: flex-end;
         margin-top: -50px; // -height (without 5px for translateY)
         position: absolute;
-        width: 95%; // tabs have room on border radius of schedule block
+        width: 100%;
+        padding-right: 30px; // tabs have room on border radius of schedule block
 
         .schedule-tab {
             font-weight: bold;
             padding: 10px 20px;
             height: 50px;
-            margin-left: 20px;
+            &:not(:first-child) {
+                margin-left: 20px;
+            }
             border-top-left-radius: $img-border-radius;
             border-top-right-radius: $img-border-radius;
             user-select: none;
@@ -798,38 +801,41 @@ nav {
                 padding-bottom: 20px;
             }
 
-            .show-full-schedule, .hide-full-schedule {
-                bottom: 0;
-                text-align: right;
-                margin-right: 20%; // TODO: make more aligned with right of events
-                padding-bottom: 40px;
-                display: flex;
-                justify-content: flex-end;
-                align-items: center;
-                cursor: pointer;
+            .events {
+                height: 370px;
+                padding-bottom: 10px;
+                overflow: hidden;
+            }
+        }
 
-                p {
-                    font-size: 1.3em;
-                    user-select: none;
-                }
+        // Part of the above content ids
+        // but specificity is counterproductive to mobile styling
+        .show-full-schedule, .hide-full-schedule {
+            bottom: 0;
+            text-align: right;
+            margin-right: 20%; // TODO: make more aligned with right of events
+            padding-bottom: 40px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            cursor: pointer;
 
-                i {
-                    color: $red;
-                    font-size: 2em;
-                    margin-left: 10px;
-                }
+            p {
+                font-size: 1.3em;
+                user-select: none;
             }
 
-            .hide-full-schedule {
-                display: none;
+            i {
+                color: $red;
+                font-size: 2em;
+                margin-left: 10px;
             }
+        }
 
-            .events {
-                height: 370px;
-                padding-bottom: 10px;
-                overflow: hidden;
-            }
+        .hide-full-schedule {
+            display: none;
         }
+
     }
 
     .schedule-content {
@@ -1569,48 +1575,63 @@ footer {
             width: 100%;
         }
 
-        #schedule-tapes {
+        #schedule-tabs {
             justify-content: center;
+            padding-right: 0;
 
-            .tape {
-                margin-top: -10px; //Half of tape height
-                height: 20px;
+            .schedule-tab {
+                // Center tab is now always centered,
+                // prev. first and last tabs offset it
+                // because flex container has no set width
+                width: 130px;
+
+                p {
+                    text-align: center;
+                }
             }
         }
 
-        #schedule-content {
+        #binder-container {
+            display: none;
+        }
+
+        .schedule-content {
             flex-direction: column;
             padding: 20px;
+            align-items: center;
 
-            #days {
-                width: auto;
-                margin-top: 10px;
-                flex-direction: row;
-
-                .day {
-                    .number {
-                        font-size: 5em;
-                        text-align: center;
-                    }
+            .day {
+                .number, .name {
+                    text-align: center;
+                }
 
-                    .name {
-                        font-size: 1.5em;
-                    }
+                .number {
+                    font-size: 4em;
                 }
             }
 
-            .events {
-                width: auto;
+            .day-row {
+                flex-direction: column;
+                width: 100%;
+            }
 
-                .event {
-                    padding: 5px;
+            .events {
+                width: 90%;
 
-                    .title {
-                        font-size: 1em;
-                    }
+                .event .title {
+                    font-size: 1em;
                 }
             }
+
+        }
+
+        #schedule-content-wrapper {
+            .show-full-schedule, .hide-full-schedule {
+                justify-content: center;
+                margin: 0 auto;
+            }
         }
+
     }
 
     #prizes #prizes-wrapper {
@@ -1675,7 +1696,7 @@ footer {
 @media screen and (max-width: 650px) {
 
     .section-pad {
-        padding: 20px;
+        padding: 10px;
     }
 
     #hero {
@@ -1732,6 +1753,22 @@ footer {
         }
     }
 
+
+    #schedule {
+        #schedule-tabs .schedule-tab {
+            width: 80px;
+            font-size: 0.8em;
+
+            &:not(:first-child) {
+                margin-left: 10px;
+            }
+        }
+
+        .schedule-content .events {
+            width: 100%;
+        }
+    }
+
     #faq #faq-wrapper {
         // Only center the "contact" string in the FAQ
         a {