Menu and carousel responsive to smaller screens

osuosl · Aug 28, 2024 · 4280528 · 4280528
1 parent d2ecfb0
commit 4280528
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 30 deletions.
diff --git a/themes/osuosl/assets/css/style.css b/themes/osuosl/assets/css/style.css
@@ -77,6 +77,10 @@ textarea {
     height: auto;
 }
 
+.mobile-menu-container {
+    display: none;
+}
+
 .header {
     display: block;
 }
@@ -129,9 +133,9 @@ textarea {
 .search {
     border-radius: 12px 0 0 12px;
     border: medium none;
-    padding: 8px;
+    padding: 6px;
     margin: 0;
-    width: 200px;
+    width: 100px;
 }
 
 .submit-search {
@@ -153,6 +157,10 @@ textarea {
     Main menu
     source: Hugo mainroad theme
 */
+.mobile-menu {
+    display: none;
+}
+
 .no-js .menu__btn {
     display: none;
 }
@@ -358,6 +366,10 @@ button:not(:-moz-focusring):focus>.menu__btn-title {
     Carousel
     Source: https://hugocodex.org/add-ons/slider-carousel/
 */
+.mobile-carousel {
+    display: none;
+}
+
 .carousel {
     position: relative;
     border-bottom: none;
@@ -705,7 +717,6 @@ textarea {
 .footer_headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     margin: auto;
     margin-top: 20px;
 }
@@ -741,4 +752,108 @@ textarea {
 
 .footer_map_container {
     margin-bottom: 10px;
+}
+
+.footer_menu_container {
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 979px) {
+    main,
+    .footer__container {
+        width: 90vw;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .carousel {
+        display: none;
+    }
+
+    .mobile-carousel {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .mobile-carousel img {
+        width: 100%;
+        height: auto;
+        max-height: 470px;
+        vertical-align: middle;
+    }
+
+    .footer_headers {
+        flex-direction: column;
+    }
+
+    .footer_menu_container {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+@media (max-width: 767px) {
+    body {
+        width: 100%;
+    }
+
+    .mobile-carousel {
+        padding-top: 20px;
+    }
+
+    .main-menu {
+        display: none;
+    }
+
+    .mobile-menu.show {
+        display: block;
+    }
+
+    .search-container {
+        display: none;
+    }
+
+    .mobile-menu-container {
+        display: block;
+    }
+
+    .toggle-mobile-menu {
+        padding: 11px 13px 9px;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+    }
+
+    a.toggle-mobile-menu {
+        color: white;
+    }
+
+    .toggle-mobile-menu:hover {
+        background-color: #373737;
+        cursor: pointer;
+    }
+
+    .menu__list {
+        flex-direction: column;
+        margin: 0;
+    }
+
+    .menu__text {
+        text-transform: capitalize;
+        color: white;
+    }
+
+    .menu__item {
+        background-color: rgba(0, 0, 0, 0.7);
+        margin: 0;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
 }
diff --git a/themes/osuosl/layouts/_default/list.html b/themes/osuosl/layouts/_default/list.html
@@ -1,5 +1,6 @@
 {{ define "main" }}
 <main class="main_content">
+    {{- partial "menu.html" . -}}
     <h1>{{ .Title }}</h1>
     <div>
         {{ .Content }}

diff --git a/themes/osuosl/layouts/_default/single.html b/themes/osuosl/layouts/_default/single.html
@@ -1,5 +1,6 @@
 {{ define "main" }}
 <main class="main_content">
+    {{- partial "menu.html" . -}}
     <h1>{{ .Title }}</h1>
     <div>
         {{ .Content }}

diff --git a/themes/osuosl/layouts/blog/list.html b/themes/osuosl/layouts/blog/list.html
@@ -1,5 +1,6 @@
 {{ define "main" }}
 <main class="main_content">
+    {{- partial "menu.html" . -}}
     <h1>OSU Open Source Lab</h1>
     <div>
         {{ .Content }}

diff --git a/themes/osuosl/layouts/partials/carousel.html b/themes/osuosl/layouts/partials/carousel.html
@@ -26,4 +26,11 @@ <h2 class="carousel-title"><a href="{{ $slide.link }}">{{ $slide.title }}</a></h
     </ol>
     <div class="prev">&lsaquo;</div>
     <div class="next">&rsaquo;</div>
+</div>
+
+<div class="mobile-carousel">
+    {{ with index .context.Site.Data.carousel.images 0 }} 
+    <h2 class="mobile-carousel-title"><a href="{{ .link }}">{{ .title }}</a></h2>
+    <img src="{{ .image }}" />
+    {{ end }}
 </div>
diff --git a/themes/osuosl/layouts/partials/footer.html b/themes/osuosl/layouts/partials/footer.html
@@ -28,36 +28,39 @@
                 </div>
             </div>
 
-            <div class="footer_menu_link_container"><a class="footer_links">HOME</a></div>
-            <div class="footer_menu_link_container">
-                <a href="/about" class="footer_links">ABOUT</a>
-                <div class="footer_link_container">
-                    <a href="/about">About OSL</a>
-                    <a href="/faq">FAQ</a>
-                    <a href="/contact">Contact Us</a>
-                    <a href="/people">Staff</a>
-                    <a href="/logos">Logos</a>
-                    <a href="/donate">Donate</a>
+            <div class="footer_menu_container">
+                <div class="footer_menu_link_container"><a class="footer_links">HOME</a></div>
+                <div class="footer_menu_link_container">
+                    <a href="/about" class="footer_links">ABOUT</a>
+                    <div class="footer_link_container">
+                        <a href="/about">About OSL</a>
+                        <a href="/faq">FAQ</a>
+                        <a href="/contact">Contact Us</a>
+                        <a href="/people">Staff</a>
+                        <a href="/logos">Logos</a>
+                        <a href="/donate">Donate</a>
+                    </div>
                 </div>
-            </div>
-            <div class="footer_menu_link_container">
-                <a href="/services" class="footer_links">SERVICES</a>
-                <div class="footer_link_container">
-                    <a href="/services/hosting">Hosting</a>
-                    <a href="/services/aarch64">AARCH64 Development Hosting</a>
-                    <a href="/services/powerdev">POWERLinux/OpnePOWER Development Hosting</a>
-                    <a href="/services/ibm-z">IBM Z Development Hosting</a>
+                <div class="footer_menu_link_container">
+                    <a href="/services" class="footer_links">SERVICES</a>
+                    <div class="footer_link_container">
+                        <a href="/services/hosting">Hosting</a>
+                        <a href="/services/aarch64">AARCH64 Development Hosting</a>
+                        <a href="/services/powerdev">POWERLinux/OpnePOWER Development Hosting</a>
+                        <a href="/services/ibm-z">IBM Z Development Hosting</a>
+                    </div>
                 </div>
-            </div>
-            <div class="footer_menu_link_container">
-                <a href="/students" class="footer_links">STUDENT EXPERIENCE</a>
-                <div class="footer_link_container">
-                    <a href="/about/employement">Employement</a>
-                    <a href="/about/education">Education</a>
-                    <a href="/student-stories">Student Stories</a>
+                <div class="footer_menu_link_container">
+                    <a href="/students" class="footer_links">STUDENT EXPERIENCE</a>
+                    <div class="footer_link_container">
+                        <a href="/about/employement">Employement</a>
+                        <a href="/about/education">Education</a>
+                        <a href="/student-stories">Student Stories</a>
+                    </div>
                 </div>
+                <div class="footer_menu_link_container"><a href="/blog" class="footer_links">BLOG</a></div>
             </div>
-            <div class="footer_menu_link_container"><a href="/blog" class="footer_links">BLOG</a></div>
+
         </div>
     </div>
 </footer>
diff --git a/themes/osuosl/layouts/partials/head.html b/themes/osuosl/layouts/partials/head.html
@@ -7,4 +7,5 @@
     <link rel="stylesheet" href="{{ $styles.Permalink }}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script type="text/javascript" src="/js/carousel.js"></script>
+    <script type="text/javascript" src="/js/mobile-menu.js"></script>
 </head>
diff --git a/themes/osuosl/layouts/partials/header.html b/themes/osuosl/layouts/partials/header.html
@@ -11,6 +11,9 @@
                 <button type="submit" class="submit-search"><i class="fa-solid fa-search"></i></button>
             </form>
         </div>
+        <div class="mobile-menu-container">
+            <a class="toggle-mobile-menu" id="toggle-mobile-menu"><i class="fa-solid fa-bars"></i></a>
+        </div>
     </div>
     <div class="subheader-container">
         <a href="https://cass.oregonstate.edu/">Center for Applied Systems & Software</a>

diff --git a/themes/osuosl/layouts/partials/menu.html b/themes/osuosl/layouts/partials/menu.html
@@ -1,5 +1,5 @@
 {{- if .Site.Menus.main }}
-<div class="page-wrapper">
+<div class="main-menu">
     <button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
         <span class="menu__btn-title" tabindex="-1">{{ T "menu_label" }}</span>
     </button>
@@ -68,4 +68,29 @@
         {{- end }}
     </ul>
 </div>
+
+<div class="mobile-menu">
+    <ul class="menu__list">
+        {{- $currentNode := . }}
+        {{- range .Site.Menus.main }}
+        {{- if .HasChildren }}
+        <li class="menu__item menu__dropdown{{ if or ($currentNode.IsMenuCurrent " main" .)
+            ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
+            <a class="menu__link" href="{{ .URL }}">
+                {{ .Pre }}
+                <span class="menu__text">{{ .Name }}</span>
+            </a>
+        </li>
+        {{- else }}
+        <li class="menu__item{{ if or ($currentNode.IsMenuCurrent " main" .) ($currentNode.HasMenuCurrent "main" .) }}
+            menu__item--active{{ end }}">
+            <a class="menu__link" href="{{ .URL }}">
+                {{ .Pre }}
+                <span class="menu__text">{{ .Name }}</span>
+            </a>
+        </li>
+        {{- end }}
+        {{- end }}
+    </ul>
+</div>
 {{- end }}
diff --git a/themes/osuosl/static/js/mobile-menu.js b/themes/osuosl/static/js/mobile-menu.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var button = document.getElementById("toggle-mobile-menu");
+    var menu = document.querySelector(".mobile-menu");
+    button.addEventListener("click", function () {
+        menu.classList.toggle("show");
+    })
+});