mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 22:45:39 +00:00
Revert "Add exterior divs to reduce number of gradient calculations"
This reverts commit c02eb37814.
This commit is contained in:
Adam Iannazzone
parent
c02eb37814
commit
8c57752ada
|
|
@ -89,6 +89,4 @@ footer {
|
|||
|
||||
#active-feature-item {
|
||||
border: 1px white solid;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -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,9 +176,7 @@
|
|||
|
||||
<!-- 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">
|
||||
<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">
|
||||
|
|
@ -189,21 +187,18 @@
|
|||
<!-- 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>
|
||||
<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
|
||||
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
|
||||
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="">
|
||||
<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">
|
||||
|
|
@ -216,19 +211,16 @@
|
|||
<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
|
||||
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
|
||||
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="">
|
||||
<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">
|
||||
|
|
@ -241,19 +233,16 @@
|
|||
<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
|
||||
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
|
||||
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="">
|
||||
<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">
|
||||
|
|
@ -266,18 +255,15 @@
|
|||
<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
|
||||
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
|
||||
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>
|
||||
|
||||
</div>
|
||||
<!-- End Right Column -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
Loading…
Reference in a new issue