From 60941aaeb2f1332ab787d10b04ce42a08fc0909c Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Wed, 24 Apr 2024 09:53:04 -0400
Subject: [PATCH] Padding adjustments on features

---
 features.html       | 37 ++++++++++++++++---------------------
 scripts/features.js | 10 +++++++---
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/features.html b/features.html
index f400d24..f4a48ec 100644
--- a/features.html
+++ b/features.html
@@ -105,13 +105,8 @@
     <main class="container mt-4 mb-4">
 
         <!-- Lead Jumbotron -->
-        <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
-            <div class="container-fluid py-5">
-
-                <!-- <div class="row">
-                    <img class="img-fluid p-4" src="assets/logos/logo_unstacked.svg">
-                </div> -->
-
+        <div class="p-md-2 mb-md-4 mb-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
+            <div class="container-fluid py-md-5 py-3">
                 <div class="row align-items-center">
                     <div class="col-md-8">
                         <h1 class="display-md-5 fw-bold">It's dangerous to go alone! Take these.</h1>
@@ -133,13 +128,13 @@
         <!-- End Jumbotron -->
 
         <!-- Feature Section -->
-        <div class="p-2 mb-4 rounded-3 jumbotron" id="feature-jumbotron">
+        <div class="p-md-2 p-1 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" id="left-feature-column">
+                    <div class="col-md-4" id="left-feature-column">
 
                         <!-- Logo Header -->
                         <div class="row p-3 rounded-3" id="feature-logo-container">
@@ -150,23 +145,23 @@
 
                         <!-- Feature List -->
                         <div class="h5" id="feature-list">
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3"
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0"
                                 id="active-feature-item">
                                 <div class="col">
                                     Pick Up and Play
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
                                 <div class="col">
                                     Quick Resume
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
                                 <div class="col">
                                     Rewind & Fast Forward
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
                                 <div class="col">
                                     Configurator
                                 </div>
@@ -176,7 +171,7 @@
                     <!-- End Left Column -->
 
                     <!-- Right Column -->
-                    <div class="col-8" id="feature-detail-column">
+                    <div class="col-md-8" id="feature-detail-column">
                         <div class="my-gradient gradient-spin rounded-3">
                             <div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
                                 <!-- Image/Video Container -->
@@ -187,7 +182,7 @@
                                 </div>
 
                                 <!-- Feature Detail Container -->
-                                <div class="row py-2 m-1 rounded-3 feature-text-container">
+                                <div class="row py-2 rounded-3 feature-text-container">
                                     <div class="col">
                                         <h4>Don't waste time on setup</h4>
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -212,9 +207,9 @@
                                 </div>
 
                                 <!-- Feature Detail Container -->
-                                <div class="row rounded-3 py-2 m-1">
+                                <div class="row py-2 rounded-3 feature-text-container">
                                     <div class="col">
-                                        <h4>Don't waste time on setup #2</h4>
+                                        <h4>Don't waste time on setup</h4>
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                         nostrud
@@ -237,9 +232,9 @@
                                 </div>
 
                                 <!-- Feature Detail Container -->
-                                <div class="row rounded-3 py-2 m-1">
+                                <div class="row py-2 rounded-3 feature-text-container">
                                     <div class="col">
-                                        <h4>Don't waste time on setup #3</h4>
+                                        <h4>Don't waste time on setup</h4>
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                         nostrud
@@ -262,9 +257,9 @@
                                 </div>
 
                                 <!-- Feature Detail Container -->
-                                <div class="row rounded-3 py-2 m-1">
+                                <div class="row py-2 rounded-3 feature-text-container">
                                     <div class="col">
-                                        <h4>Don't waste time on setup #4</h4>
+                                        <h4>Don't waste time on setup</h4>
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                         nostrud
diff --git a/scripts/features.js b/scripts/features.js
index 0dbf442..8c17366 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -4,10 +4,14 @@ let currentFeature = 0;
 
 for (let i = 0; i < featureTitles.length; i++) {
     featureTitles[i].addEventListener('click', function () {
-        updateActiveFeature(i);
+        if (i != currentFeature) {
+            updateActiveFeature(i);
+        }
     }, false)
+
+    // We need to remove the gradient so that linearBackground is hidden
     if (featureTitles[i].id != 'active-feature-item') {
-        featureTitles[i].className = 'row feature-list-item rounded-3';
+        featureTitles[i].className = 'row feature-list-item rounded-3 m-0';
     }
 }
 
@@ -22,7 +26,7 @@ function updateActiveFeature(i) {
 
     // Reset previous current feature
     featureTitles[lastCurrentFeature].removeAttribute('id');
-    featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3';
+    featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3 m-0';
     featureTitles[lastCurrentFeature].style = '';
     featureDetails[lastCurrentFeature].removeAttribute('id');