mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 22:45:39 +00:00
Add exterior divs to reduce number of gradient calculations
This commit is contained in:
Adam Iannazzone
parent
8d3fca59e2
commit
c02eb37814
|
|
@ -89,4 +89,6 @@ footer {
|
||||||
|
|
||||||
#active-feature-item {
|
#active-feature-item {
|
||||||
border: 1px white solid;
|
border: 1px white solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
188
features.html
188
features.html
|
|
@ -149,23 +149,23 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Feature List -->
|
<!-- Feature List -->
|
||||||
<div class="h5" id="feature-list">
|
<div class="h5 my-gradient gradient-spin" id="feature-list">
|
||||||
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="active-feature-item">
|
<div class="row feature-list-item" 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 gradient-spin my-gradient rounded-3" id="">
|
<div class="row feature-list-item" id="">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Quick Resume
|
Quick Resume
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
|
<div class="row feature-list-item" id="">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Rewind & Fast Forward
|
Rewind & Fast Forward
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
|
<div class="row feature-list-item" id="">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
Configurator
|
Configurator
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -176,94 +176,108 @@
|
||||||
|
|
||||||
<!-- 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 rounded-3 p-3 my-gradient gradient-spin" id="active-feature-detail">
|
<div class="my-gradient gradient-spin rounded-3 p-3">
|
||||||
<!-- Image/Video Container -->
|
<div class="feature-detail-container"
|
||||||
<div class="row" id="feature-media-container">
|
id="active-feature-detail">
|
||||||
<div class="col">
|
<!-- Image/Video Container -->
|
||||||
<img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Feature Detail Container -->
|
<div class="feature-detail-container" id="">
|
||||||
<div class="row py-2 m-1 rounded-3 feature-text-container">
|
<!-- Image/Video Container -->
|
||||||
<div class="col">
|
<div class="row" id="feature-media-container">
|
||||||
<h4 >Don't waste time on setup</h4>
|
<div class="col">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
<img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
|
||||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
</div>
|
||||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
</div>
|
||||||
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
|
<!-- Feature Detail Container -->
|
||||||
deserunt mollit anim id est laborum.
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<!-- End Right Column -->
|
<!-- End Right Column -->
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
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;
|
|
||||||
|
|
||||||
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 () {
|
||||||
|
|
@ -16,16 +15,9 @@ function updateActiveFeature(i) {
|
||||||
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
|
// 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';
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue