Implement mobile-friendliness

MinThaMie · Nov 9, 2023 · 1d2d069 · 1d2d069
1 parent de84afb
commit 1d2d069
Show file tree

Hide file tree

Showing 6 changed files with 15,764 additions and 9,095 deletions.
diff --git a/app/breakpoints.js b/app/breakpoints.js
@@ -0,0 +1,5 @@
+export default {
+  mobile: '(max-width: 767px)',
+  tablet: '(min-width: 768px) and (max-width: 991px)',
+  desktop: '(min-width: 840px)',
+};
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -27,7 +27,7 @@ img {
 }
 
 p.intro {
-  width: 50ch;
+  max-width: 50ch;
 }
 
 .navbar {
@@ -38,7 +38,7 @@ p.intro {
   margin-top: 38px;
 }
 
-nav {
+.nav-bar > nav {
   height: 60px;
   display: flex;
   justify-content: flex-end;
@@ -60,10 +60,31 @@ nav > a.active {
   text-decoration-thickness: 2px;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.mobile-menu__toggle {
+  margin-bottom: 20px;
+}
+
+.mobile > nav {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 16px;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.mobile-menu-wrapper__content {
+  background: unset;
+}
+
 .container {
   padding: 94px 0 120px 120px;
 }
 
+.mobile-container {
+  padding: 20px;
+}
+
 .text {
   max-width: 60ch;
 }
@@ -97,3 +118,13 @@ nav > a.active {
   margin-top: 80px;
   font-size: 1.125em;
 }
+
+.button-inverted {
+  border: 2px solid var(--primary-color);
+  color: var(--primary-color);
+  background-color: white;
+}
+
+.button-inverted:hover {
+  color: white;
+}
diff --git a/app/styles/glossary.css b/app/styles/glossary.css
@@ -55,3 +55,9 @@
 .definition-container a:hover {
   color: var(--primary-hover-color);
 }
+
+@media (width <= 840px) {
+  .row {
+    grid-template-columns: 32px 1fr;
+  }
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,14 +1,38 @@
 {{page-title "DEI Bingo"}}
+
+{{#if (media 'isDesktop')}}
 <div class="navbar">
   <img src="logo.svg" alt="4 abstract people">
-<nav>
-  <LinkTo @route="index">Home</LinkTo>
-  <LinkTo @route="bingo">Contribute</LinkTo>
-  <LinkTo @route="glossary">Glossary</LinkTo>
-  <LinkTo @route="resources">Resources</LinkTo>
-</nav>
+  <nav>
+    <LinkTo @route="index">Home</LinkTo>
+    <LinkTo @route="bingo">Contribute</LinkTo>
+    <LinkTo @route="glossary">Glossary</LinkTo>
+    <LinkTo @route="resources">Resources</LinkTo>
+  </nav>
 </div>
-
 <div class="container">
-{{outlet}}
+  {{outlet}}
 </div>
+{{else}}
+<MobileMenuWrapper as |mmw|>
+  <mmw.MobileMenu as |mm|>
+    <div class="menu mobile">
+      {{!-- template-lint-disable no-duplicate-landmark-elements --}}
+      <nav>
+        <mm.LinkTo @route="index">Home</mm.LinkTo>
+        <mm.LinkTo @route="bingo">Contribute</mm.LinkTo>
+        <mm.LinkTo @route="glossary">Glossary</mm.LinkTo>
+        <mm.LinkTo @route="resources">Resources</mm.LinkTo>
+      </nav>
+    </div>
+  </mmw.MobileMenu>
+
+  <mmw.Content class="mobile-container">
+    <mmw.Toggle class="button button-inverted">
+      Menu
+    </mmw.Toggle>
+    {{outlet}}
+  </mmw.Content>
+</MobileMenuWrapper>
+{{/if}}
+