Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 14:35:38 +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,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;
}

22
features.html
View file

@ -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">

15
scripts/features.js
View file

@ -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';
}