Rebuild carousel to include summary

osuosl · Aug 29, 2024 · 4d2b659 · 4d2b659
1 parent a177a9f
commit 4d2b659
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 256 deletions.
diff --git a/themes/osuosl/assets/css/style.css b/themes/osuosl/assets/css/style.css
@@ -401,140 +401,67 @@ button:not(:-moz-focusring):focus>.menu__btn-title {
     display: none;
 }
 
-.carousel {
+.carousel-container {
     position: relative;
-    border-bottom: none;
-}
-
-.carousel ul {
-    overflow: auto;
-    display: flex;
-    flex-wrap: nowrap;
-    scroll-snap-type: x mandatory;
-    scroll-snap-points-y: repeat(100%);
-    scroll-behavior: smooth;
-    background: gray;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
     margin: 0;
     padding: 0;
+    display: flex;
 }
 
-.carousel ul::-webkit-scrollbar {
-    display: none;
-    /* Hide scrollbar for Chrome, Safari and Opera */
-}
-
-.carousel ul li {
-    position: relative;
-    min-width: 100%;
-    list-style: none;
-    background: url() center center / cover no-repeat;
-    scroll-snap-align: start;
-}
-
-.carousel ul li>* {
-    position: absolute;
-    left: 0;
-    top: 0;
+.slide {
     width: 100%;
-    height: 100%;
-}
-
-.carousel ul li>img {
-    object-fit: cover;
-}
-
-.carousel ul li>div {
+    height: 25rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: white;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.carousel ol {
-    visibility: hidden;
-    position: absolute;
-    bottom: 15px;
-    display: flex;
-    justify-content: center;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 9;
-}
-
-.carousel ol li {
-    list-style: none;
-    padding: 0 5px;
-}
-
-.carousel ol li a {
-    display: block;
-    height: 10px;
-    width: 10px;
-    border: 2px solid white;
-    background: transparent;
-    border-radius: 100%;
-}
-
-.carousel ol li.selected a {
-    background: white;
-}
-
-.carousel .prev,
-.carousel .next {
-    display: none;
-    user-select: none;
-    cursor: pointer;
-    font-size: 50px;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    left: 0;
-    padding: 30px 15px 35px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 9;
-    line-height: 0;
+    position: relative;
+    overflow: hidden;
 }
 
-.carousel .next {
-    left: auto;
-    right: 0;
+.slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
 }
 
-.carousel-title-container {
+.slide-title-container {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.7);
     padding: 5px 2px;
     margin-bottom: 10px;
-    display: flex;
-    align-items: center;
 }
 
-.carousel-title {
+.slide-info {
+    display: none;
+}
+
+.slide-info.show {
+    display: block;
+    margin-right: 90px;
+}
+
+.slide-title {
     margin: 0;
-    padding: 10px;
+    padding: 5px;
     font-family: "Impact", sans-serif;
 }
 
-.carousel-title a {
+.slide-title a {
     text-decoration: none;
     font-weight: bold;
 }
 
-.carousel-title a:hover {
+.slide-title a:hover {
     text-decoration: underline;
 }
 
 .more-link {
     position: absolute;
-    bottom: 25px;
+    bottom: 20px;
     right: 25px;
     border: none;
     box-shadow: none;
@@ -550,6 +477,27 @@ button:not(:-moz-focusring):focus>.menu__btn-title {
     border: 1px solid #eee;
 }
 
+.prev,
+.next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 2rem;
+    color: #fff;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 0.5rem;
+    z-index: 10;
+}
+
+.prev {
+    left: 0;
+}
+
+.next {
+    right: 0;
+}
+
 /* 
     Images 
 */
@@ -656,17 +604,26 @@ input {
     border: 1px solid #d7d7d7;
     border-radius: 5px;
     margin-bottom: 20px;
-    width: 30%;
+    width: 20rem;
     height: 20px;
 }
 
+select {
+    padding: 5px;
+    font-size: 12px;
+    border: 1px solid #d7d7d7;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    width: 20rem;
+}
+
 textarea {
     padding: 5px;
     font-size: 12px;
     border: 1px solid #d7d7d7;
     border-radius: 5px;
     margin-bottom: 20px;
-    width: 30%;
+    width: 20rem;
     height: 20px;
 }
 
@@ -798,7 +755,7 @@ textarea {
         margin-right: auto;
     }
 
-    .carousel {
+    .carousel-container {
         display: none;
     }
 

diff --git a/themes/osuosl/layouts/index.html b/themes/osuosl/layouts/index.html
@@ -2,7 +2,7 @@
 <main class="main_content">
 {{- partial "menu.html" . -}}
 
-{{ partial "carousel.html" (dict "context" . "items" "2i" "height" "50" "unit" "%" "duration" "6000") }}
+{{ partial "carousel.html" . }}
 
 {{ .Content }}
 </main>

diff --git a/themes/osuosl/layouts/partials/carousel.html b/themes/osuosl/layouts/partials/carousel.html
@@ -1,35 +1,29 @@
-{{ .context.Scratch.Set "height" .height }}
-{{ .context.Scratch.Set "unit" .unit }}
-{{ .context.Scratch.Set "items" .items }}
-<div id="carousel10" class="carousel" duration="{{ .duration }}" items="{{ .items }}">
-    <ul>
-        {{ range $index, $slide := .context.Site.Data.carousel.images }}
-        <li id="c10_slide{{ add $index 1}}" style="min-width: calc(100%/{{ $.context.Scratch.Get " items" }});
-            padding-bottom: {{ $.context.Scratch.Get "height" }}{{ $.context.Scratch.Get "unit" }};"><img
-                src="{{ $slide.image }}" alt="" />
-            <div>
-                <div class="carousel-title-container">
-                    <h2 class="carousel-title"><a href="{{ $slide.link }}">{{ $slide.title }}</a></h2>
-                </div>
-                <div>
-                    <a href="/blog" class="more-link">All stories</a>
+<div class="carousel-container">
+    {{ range $slide := .Site.Data.carousel.images }}
+    <div class="slide">
+        <img src="{{ $slide.image }}" alt="" />
+        <div class="slide-title-container">
+            <h2 class="slide-title"><a href="{{ $slide.link }}">{{ $slide.title }}</a></h2>
+            <div class="slide-info">
+                {{ with $.Site.GetPage $slide.link }}
+                <div class="slide-summary">
+                    <p>{{ .Summary }}</p>
                 </div>
+                {{ end }}
+            </div>
+            <div>
+                <a href="/blog" class="more-link">All stories</a>
             </div>
-
-        </li>
-        {{ end }}
-    </ul>
-    <ol>
-        {{ range $index, $page := .context.Site.Data.carousel.images }}
-        <li><a href="#c10_slide{{ add $index 1 }}"></a></li>
-        {{ end }}
-    </ol>
+        </div>
+    </div>
+    {{ end }}
+
     <div class="prev">&lsaquo;</div>
     <div class="next">&rsaquo;</div>
 </div>
 
 <div class="mobile-carousel">
-    {{ with index .context.Site.Data.carousel.images 0 }} 
+    {{ with index .Site.Data.carousel.images 0 }}
     <h2 class="mobile-carousel-title"><a href="{{ .link }}">{{ .title }}</a></h2>
     <img src="{{ .image }}" />
     {{ end }}

diff --git a/themes/osuosl/layouts/partials/head.html b/themes/osuosl/layouts/partials/head.html
@@ -6,7 +6,7 @@
     {{ $styles := resources.Get "css/style.css" }}
     <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/new_carousel.js"></script>
     <script type="text/javascript" src="/js/mobile-menu.js"></script>
     <script type="text/javascript" src="/js/search-modal.js"></script>
 </head>