Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-22 06:55:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update style on feature-title-list

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-23 13:14:44 -04:00
parent efc637b7c0
commit 2432ca864d
3 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css/style.css
View file

@ -56,15 +56,14 @@ footer {
left: 0; left: 0;
} }
/* Features Page */
.row.feature-list-item { .row.feature-list-item {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer;
background: #333; background: #333;
} }
.row.feature-list-item#active-feature-item {
background: transparent;
}
.feature-detail-container { .feature-detail-container {
display: none; display: none;
} }
@ -72,3 +71,7 @@ footer {
.feature-detail-container#active-feature-detail { .feature-detail-container#active-feature-detail {
display: inherit; display: inherit;
} }
#feature-jumbotron {
background: #333;
}

22
features.html
View file

@ -133,16 +133,16 @@
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Feature Section --> <!-- 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"> <div class="container-fluid">
<!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de--> <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
<div class="row"> <div class="row">
<!-- Left Column --> <!-- Left Column -->
<div class="col-4 rounded-3" id="left-feature-column"> <div class="col-4" id="left-feature-column">
<!-- Logo Header --> <!-- 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"> <div class="col">
<img class="img-fluid" src="assets/logos/logo_stacked_esde.png"> <img class="img-fluid" src="assets/logos/logo_stacked_esde.png">
</div> </div>
@ -150,22 +150,22 @@
<!-- Feature List --> <!-- Feature List -->
<div class="h5" id="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"> <div class="col">
Pick Up and Play Pick Up and Play
</div> </div>
</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"> <div class="col">
Quick Resume Quick Resume
</div> </div>
</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"> <div class="col">
Rewind & Fast Forward Rewind & Fast Forward
</div> </div>
</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"> <div class="col">
Configurator Configurator
</div> </div>
@ -176,7 +176,7 @@
<!-- Right Column --> <!-- Right Column -->
<div class="col-8" id="feature-detail-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 --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -198,7 +198,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container" id=""> <div class="feature-detail-container rounded-3" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -220,7 +220,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container" id=""> <div class="feature-detail-container rounded-3" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">
@ -242,7 +242,7 @@
</div> </div>
</div> </div>
<div class="feature-detail-container" id=""> <div class="feature-detail-container rounded-3" id="">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">

15
scripts/features.js
View file

@ -1,20 +1,31 @@
featureTitles = document.getElementsByClassName('feature-list-item'); featureTitles = document.getElementsByClassName('feature-list-item');
featureDetails = document.getElementsByClassName('feature-detail-container'); featureDetails = document.getElementsByClassName('feature-detail-container');
let currentFeature = 0; // let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) { for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () { featureTitles[i].addEventListener('click', function () {
updateActiveFeature(i); updateActiveFeature(i);
}, false) }, false)
if (featureTitles[i].id != 'active-feature-item') {
featureTitles[i].className = 'row feature-list-item rounded-3';
}
} }
function updateActiveFeature(i) { function updateActiveFeature(i) {
currentFeature = i; // Reset all
for (let j = 0; j < featureTitles.length; j++) { for (let j = 0; j < featureTitles.length; j++) {
featureTitles[j].removeAttribute('id'); featureTitles[j].removeAttribute('id');
featureDetails[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'; featureTitles[i].id = 'active-feature-item';
featureDetails[i].id = 'active-feature-detail' featureDetails[i].id = 'active-feature-detail'
// Handle styles
featureTitles[i].className += ' gradient-spin my-gradient';
} }