From 2432ca864db57feb17281847a758340ed94b95a2 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Tue, 23 Apr 2024 13:14:44 -0400
Subject: [PATCH] Update style on feature-title-list

---
 css/style.css       | 11 +++++++----
 features.html       | 22 +++++++++++-----------
 scripts/features.js | 15 +++++++++++++--
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/css/style.css b/css/style.css
index b87faaf..a3c0497 100644
--- a/css/style.css
+++ b/css/style.css
@@ -56,19 +56,22 @@ footer {
     left: 0;
 }
 
+/* Features Page */
+
 .row.feature-list-item {
     padding: 0.5rem;
+    cursor: pointer;
     background: #333;
 }
 
-.row.feature-list-item#active-feature-item {
-    background: transparent;
-}
-
 .feature-detail-container {
     display: none;
 }
 
 .feature-detail-container#active-feature-detail {
     display: inherit;
+}
+
+#feature-jumbotron {
+    background: #333;
 }
\ No newline at end of file
diff --git a/features.html b/features.html
index 74335b9..2070f72 100644
--- a/features.html
+++ b/features.html
@@ -133,16 +133,16 @@
         <!-- End Jumbotron -->
 
         <!-- Feature Section -->
-        <div class="p-2 mb-4 rounded-3 jumbotron my-gradient gradient-spin">
+        <div class="p-2 mb-4 rounded-3 jumbotron" id="feature-jumbotron">
             <div class="container-fluid">
                 <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
 
                 <div class="row">
                     <!-- Left Column -->
-                    <div class="col-4 rounded-3" id="left-feature-column">
+                    <div class="col-4" id="left-feature-column">
 
                         <!-- Logo Header -->
-                        <div class="row p-3" id="feature-logo-container">
+                        <div class="row p-3 rounded-3" id="feature-logo-container">
                             <div class="col">
                                 <img class="img-fluid" src="assets/logos/logo_stacked_esde.png">
                             </div>
@@ -150,22 +150,22 @@
 
                         <!-- Feature List -->
                         <div class="h5" id="feature-list">
-                            <div class="row feature-list-item" id="active-feature-item">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="active-feature-item">
                                 <div class="col">
                                     Pick Up and Play
                                 </div>
                             </div>
-                            <div class="row feature-list-item" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
                                 <div class="col">
                                     Quick Resume
                                 </div>
                             </div>
-                            <div class="row feature-list-item" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
                                 <div class="col">
                                     Rewind & Fast Forward
                                 </div>
                             </div>
-                            <div class="row feature-list-item" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
                                 <div class="col">
                                     Configurator
                                 </div>
@@ -176,7 +176,7 @@
 
                     <!-- Right Column -->
                     <div class="col-8" id="feature-detail-column">
-                        <div class="feature-detail-container" id="active-feature-detail">
+                        <div class="feature-detail-container rounded-3" id="active-feature-detail">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -198,7 +198,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container" id="">
+                        <div class="feature-detail-container rounded-3" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -220,7 +220,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container" id="">
+                        <div class="feature-detail-container rounded-3" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -242,7 +242,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container" id="">
+                        <div class="feature-detail-container rounded-3" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
diff --git a/scripts/features.js b/scripts/features.js
index a1fb800..e64be19 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -1,20 +1,31 @@
 featureTitles = document.getElementsByClassName('feature-list-item');
 featureDetails = document.getElementsByClassName('feature-detail-container');
-let currentFeature = 0;
+// let currentFeature = 0;
 
 for (let i = 0; i < featureTitles.length; i++) {
     featureTitles[i].addEventListener('click', function () {
         updateActiveFeature(i);
     }, false)
+    if (featureTitles[i].id != 'active-feature-item') {
+        featureTitles[i].className = 'row feature-list-item rounded-3';
+    }
 }
 
 function updateActiveFeature(i) {
-    currentFeature = i;
+    // Reset all
     for (let j = 0; j < featureTitles.length; j++) {
         featureTitles[j].removeAttribute('id');
         featureDetails[j].removeAttribute('id');
+        featureTitles[j].className = 'row feature-list-item rounded-3';
+        featureTitles[j].style = '';
     }
 
+    // currentFeature = i;
+
+    // Update the active feature
     featureTitles[i].id = 'active-feature-item';
     featureDetails[i].id = 'active-feature-detail'
+
+    // Handle styles
+    featureTitles[i].className += ' gradient-spin my-gradient';
 }
\ No newline at end of file