From 687b9d035c6ef62a9cf4a4b1d7e70b2bc9831329 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:16:37 -0400
Subject: [PATCH] Style adjustments to features

---
 css/style.css       |  40 ++++++-----
 index.html          | 164 +++++++++++++++-----------------------------
 scripts/features.js |  43 +++++++-----
 3 files changed, 103 insertions(+), 144 deletions(-)

diff --git a/css/style.css b/css/style.css
index ee62168..a593187 100644
--- a/css/style.css
+++ b/css/style.css
@@ -44,10 +44,6 @@ nav i.bi {
 }
 
 nav .nav-link:hover, nav .nav-link.show {
-    /* background: var(--rd-purple);
-    border: white solid 1px;
-    border-radius: 5px;
-    margin: -1px; */
     color: white;
 }
 
@@ -103,32 +99,44 @@ footer {
     border-bottom: var(--rd-purple) 5px solid;
 }
 
-#feature-card-row, #screenshot-row {
+#feature-row {
     flex-wrap: nowrap;
     scrollbar-width: none;
     scroll-behavior: smooth;
 }
 
-.screenshot {
+.feature-container {
+    transition: 0.5s;
+    cursor: pointer;
     scale: 80%;
+    scroll-margin-top: 20px;
+    max-height: fit-content;
+}
+
+.feature-container#active-feature {
+    transition: 0.5s;
+    scale: 100%;
+}
+
+.empty-feature-container {
+    visibility: hidden;
+}
+
+img.screenshot {
+    border: white 2px solid;
+    border-radius: 5px;
+    margin: auto;
+    width: 150%;
 }
 
 .feature-card {
     background: var(--rd-blue);
     border: white 2px solid;
     border-radius: 5px;
-    cursor: pointer;
-    scale: 80%;
+    transition: 0.5s;
+    width: 75%;
 }
 
-.feature-card#active-feature-card, .screenshot#active-screenshot {
-    scale: 100%;
-    transition: 0.25s;
-}
-
-.feature-card#empty-feature, .screenshot#empty-screenshot {
-    visibility: hidden;
-}
 .feature-card h3 {
     color: white;
     font-family: var(--pixel-font);
diff --git a/index.html b/index.html
index 5d2d164..1e3e785 100644
--- a/index.html
+++ b/index.html
@@ -223,121 +223,65 @@
         <!-- End Jumbotron -->
 
         <!-- Screenshot/Feature Section -->
-        <div class="container-fluid mb-4" id="features" height="100px">
-
-            <!-- Screenshot Images -->
-            <!-- <div class="container mb-2">
-                <div class="row">
-                    <div class="col">
-                        <div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative">
-                            <div class="carousel-inner" id="deck-carousel">
-                                <div class="carousel-item active">
-                                    <img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
-                                        alt="The RetroDECK logo displayed on a Steam Deck">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
-                                        alt="The RetroDECK icon visible in a Steam Library">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
-                                        alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
-                                        alt="One of the ES-DE Themes with SEGA Genesis visible">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
-                                        alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="assets/screens/large/screen06.png" class="d-block w-100 rounded-3"
-                                        alt="A list of TurboGrafx games in the ES-DE frontend">
-                                </div>
-                            </div>        
-                            <button class="carousel-control-prev z-2" type="button" data-bs-target="#screenshotCarousel"
-                                data-bs-slide="prev">
-                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Previous</span>
-                            </button>
-                            <button class="carousel-control-next z-2" type="button" data-bs-target="#screenshotCarousel"
-                                data-bs-slide="next">
-                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Next</span>
-                            </button>
-                        </div>
+        <div class="container-fluid mb-4 pt-2" id="features">
+            <div class="row mb-2 overflow-x-scroll" id="feature-row">
+                <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
+                <div class="col-8 col-sm-6 feature-container" id="active-feature">
+                    <img src="assets/screens/large/screen01.png" class="img-fluid screenshot mx-auto" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
                     </div>
                 </div>
-            </div> -->
-
-            <!-- Screenshots v2 -->
-            <div class="row mb-2 overflow-x-scroll" id="screenshot-row">
-                <div class="col-4 screenshot" id="empty-screenshot"></div>
-                <div class="col-4 screenshot" id="active-screenshot">
-                    <img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
-                        alt=""/>
+                <div class="col-8 col-sm-6 feature-container" id="">
+                    <img src="assets/screens/large/screen02.png" class="img-fluid screenshot" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                    </div>
                 </div>
-                <div class="col-4 screenshot" id="">
-                    <img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
-                        alt=""/>
+                <div class="col-8 col-sm-6 feature-container" id="">
+                    <img src="assets/screens/large/screen03.png" class="img-fluid screenshot" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                    </div>
                 </div>
-                <div class="col-4 screenshot" id="">
-                    <img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
-                        alt=""/>
+                <div class="col-8 col-sm-6 feature-container" id="">
+                    <img src="assets/screens/large/screen04.png" class="img-fluid screenshot" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                    </div>
                 </div>
-                <div class="col-4 screenshot" id="">
-                    <img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
-                        alt=""/>
+                <div class="col-8 col-sm-6 feature-container" id="">
+                    <img src="assets/screens/large/screen05.png" class="img-fluid screenshot" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                    </div>
                 </div>
-                <div class="col-4 screenshot" id="">
-                    <img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
-                        alt=""/>
+                <div class="col-8 col-sm-6 feature-container" id="">
+                    <img src="assets/screens/large/screen06.png" class="img-fluid screenshot" alt="" />
+                    <div class="feature-card px-2 mt-2 mx-auto">
+                        <h3>Feature 1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
+                            sodales
+                            mattis. Praesent eget lacinia risus, ut bibendum est.</p>
+                    </div>
                 </div>
-                <div class="col-4 screenshot" id="">
-                    <img src="assets/screens/large/screen06.png" class="d-block w-100 rounded-3"
-                        alt=""/>
-                </div>
-                <div class="col-4 screenshot" id="empty-screenshot"></div>
+                <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
             </div>
-
-            <!-- Feature List -->
-            <div class="row mb-2 overflow-x-scroll" id="feature-card-row">
-
-                <div class="col-4 feature-card" id="empty-feature"></div>
-                <div class="col-4 feature-card" id="active-feature-card">
-                    <h3>Feature 1</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
-                        mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="">
-                    <h3>Feature 2</h3>
-                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
-                        sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="">
-                    <h3>Feature 3</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
-                        mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="">
-                    <h3>Feature 4</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
-                        mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="">
-                    <h3>Feature 5</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
-                        mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="">
-                    <h3>Feature 6</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
-                        mattis. Praesent eget lacinia risus, ut bibendum est.</p>
-                </div>
-                <div class="col-4 feature-card" id="empty-feature"></div>
-            </div>
-
         </div>
         <!-- End Screenshot/Feature Section -->
 
@@ -387,12 +331,12 @@
     <!-- Footer -->
     <footer class="container-fluid pt-2 pb-2">
         <div class="row justify-content-between">
-            <div class="col float-start">
+            <div class="col-12 col-sm-6">
                 Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
                     Iannazzone</a> and the RetroDECK team.
             </div>
-            <div class="col align-content-end">
-                <div class="form-check form-switch float-end">
+            <div class="col-12 col-sm-6">
+                <div class="form-check form-switch">
                     <input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
                         id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
                     <label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
diff --git a/scripts/features.js b/scripts/features.js
index 050b062..25aba1f 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -1,31 +1,38 @@
-const screenshotElems = document.getElementsByClassName('screenshot');
-const featureCardElems = document.getElementsByClassName('feature-card');
+const featureContainerElems = document.getElementsByClassName('feature-container');
 let currentFeature = 1
 
-for (let i = 0; i < featureCardElems.length; i++) {
-    screenshotElems[i].addEventListener('click', function() {
-        if (i != currentFeature) {
-            updateActiveFeature(i);
-        }
-    })
-    featureCardElems[i].addEventListener('click', function() {
+for (let i = 0; i < featureContainerElems.length; i++) {
+    featureContainerElems[i].addEventListener('click', function() {
         if (i != currentFeature) {
             updateActiveFeature(i);
         }
     })
 }
 
+document.addEventListener('keyup', keyControl);
+
+function keyControl(e) {
+    if (e.code == 'ArrowRight') {
+        if (currentFeature < featureContainerElems.length-2) {
+            updateActiveFeature(currentFeature + 1);
+        } else {
+            updateActiveFeature(1);
+        }
+    }
+    if (e.code == 'ArrowLeft') {
+        if (currentFeature > 1) {
+            updateActiveFeature(currentFeature - 1);
+        } else {
+            updateActiveFeature(featureContainerElems.length-2);
+        }
+    }
+}
+
 function updateActiveFeature(i) {
     const lastCurrentFeature = currentFeature;
     currentFeature = i;
 
-    screenshotElems[i].id = 'active-screenshot';
-    screenshotElems[lastCurrentFeature].id = "";    
-
-    featureCardElems[i].id = 'active-feature-card';
-    featureCardElems[lastCurrentFeature].id = "";
-    
-    
-    featureCardElems[i].scrollIntoView({inline: 'center'});
-    screenshotElems[i].scrollIntoView({inline: 'center'});
+    featureContainerElems[i].id = 'active-feature';
+    featureContainerElems[i].scrollIntoView({block: 'start', inline: 'center'});
+    featureContainerElems[lastCurrentFeature].id = ''
 }
\ No newline at end of file