Merge pull request #22 from Gum-Joe/Add-Proper-Mobile-Layout

"mobile styling... mostly" Adds mobile styling & responsiveness. By @ILikeTeaALot
Gum-Joe · Jan 12, 2021 · 86b501b · 86b501b
2 parents c1f8950 + cedbe6f
commit 86b501b
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 43 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,47 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
 @import url("./fonts/Metropolis/stylesheet.css");
 
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-/* END CRA STUFF */
-
 /* Bootstrap OVERRRIDE */
+
 body {
   font-family: "Metropolis", 'Open Sans', sans-serif !important;
   color: #fff;
@@ -97,7 +58,7 @@ body {
 }
 
 .events * {
-  text-align: left;
+  text-align: center;
 }
 
 /* Button */
@@ -275,7 +236,80 @@ button.back::after {
   border-top-color: var(--link-active);
 }
 
+@media screen and (max-width: 400px) {
+  .isitweeka h1 {
+    /*font-size: 5em;*/
+    margin-top: 0;
+    margin-bottom: 0;
+    display: inline-flex;
+  }
+
+  .isitweeka h2 {
+    font-size: 2.5em;
+    display: inline-flex;
+  }
+  .isitweeka h3 {
+    font-size: 2em;
+    display: inline-flex;
+  }
+
+  .r-tab-row {
+    padding-top: 40px !important;
+  }
+
+  .r-tab {
+    font-size: 1.75em !important;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .events-row {
+    flex-direction: column;
+    min-height: 600px;
+  }
+
+  .events-list {
+    height: unset;
+    min-height: 50%;
+    /*flex: 1;*/
+  }
 
+  .events-list > * > div {
+    min-height: 40%;
+  }
+
+  .isitweeka > h1.mobile {
+    justify-content: center;
+    font-size: 7em;
+    display: flex !important;
+  }
+
+  .isitweeka > h2.mobile {
+    justify-content: center;
+    font-size: 3em;
+    display: flex !important;
+  }
+
+  .isitweeka > h4 {
+    justify-content: center;
+  }
+
+  .forward {
+    margin: 0 auto;
+  }
+
+  .desktop {
+    display: none !important;
+  }
+}
+
+.isitweeka > h1.mobile {
+    display: none;
+}
+
+.isitweeka > h2.mobile {
+  display: none;
+}
 
 :root {
   --rykan-accent-primary: #F10DA2;

diff --git a/frontend/src/components/SiteContainer.tsx b/frontend/src/components/SiteContainer.tsx
@@ -252,8 +252,10 @@ export default class SiteContainer extends Component<SiteProps, TheState> {
 		} else {
 			return (
 				<>
-					<h2>{this.state.isWeekend ? "Next week will be" : "It is"}</h2> {/* Special case for weekend, where we show next week*/}
-					<h1>Week {this.state.week}</h1>
+					<h2 className="desktop">{this.state.isWeekend ? "Next week will be" : "It is"}</h2> {/* Special case for weekend, where we show next week*/}
+					<h1 className="desktop">Week {this.state.week}</h1>
+					<h2 className="mobile">{this.state.isWeekend ? "Next week will be" : "It is week"}</h2> {/* Special case for weekend, where we show next week*/}
+					<h1 className="mobile">{this.state.week}</h1>
 					<h4>More coming soon...</h4>
 					<Button style={{ marginRight: "auto" }} className="forward" onClick={getScrollDownWithAdditional(150)}>events</Button>
 				</>