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

Revert "Add exterior divs to reduce number of gradient calculations"

Browse source 
This reverts commit c02eb37814.
This commit is contained in:
Adam Iannazzone 2024-04-23 18:34:02 -04:00
parent c02eb37814
commit 8c57752ada
3 changed files with 95 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/style.css
View file

@ -89,6 +89,4 @@ footer {
#active-feature-item {
border: 1px white solid;
border-radius: 5px;
background: transparent;
}

188
features.html
View file

@ -149,23 +149,23 @@
</div>
<!-- Feature List -->
<div class="h5 my-gradient gradient-spin" id="feature-list">
<div class="row feature-list-item" id="active-feature-item">
<div class="h5" id="feature-list">
<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,108 +176,94 @@
<!-- Right Column -->
<div class="col-8" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3 p-3">
<div class="feature-detail-container"
id="active-feature-detail">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row py-2 m-1 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
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt mollit anim id est laborum.
</div>
<div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="active-feature-detail">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #2</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen03.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #3</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen04.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #4</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt mollit anim id est laborum.
</div>
<!-- Feature Detail Container -->
<div class="row py-2 m-1 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
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #2</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen03.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #3</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen04.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="col">
<h4>Don't waste time on setup #4</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
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
<!-- End Right Column -->
</div>

8
scripts/features.js
View file

@ -1,5 +1,6 @@
featureTitles = document.getElementsByClassName('feature-list-item');
featureDetails = document.getElementsByClassName('feature-detail-container');
// let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () {
@ -15,9 +16,16 @@ function updateActiveFeature(i) {
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';
}