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

Padding adjustments on features

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-24 09:53:04 -04:00
parent 9515a8453e
commit 60941aaeb2
2 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
features.html
View file

@ -105,13 +105,8 @@
<main class="container mt-4 mb-4">
<!-- Lead Jumbotron -->
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-5">
<!-- <div class="row">
<img class="img-fluid p-4" src="assets/logos/logo_unstacked.svg">
</div> -->
<div class="p-md-2 mb-md-4 mb-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-md-5 py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="display-md-5 fw-bold">It's dangerous to go alone! Take these.</h1>
@ -133,13 +128,13 @@
<!-- End Jumbotron -->
<!-- Feature Section -->
<div class="p-2 mb-4 rounded-3 jumbotron" id="feature-jumbotron">
<div class="p-md-2 p-1 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" id="left-feature-column">
<div class="col-md-4" id="left-feature-column">
<!-- Logo Header -->
<div class="row p-3 rounded-3" id="feature-logo-container">
@ -150,23 +145,23 @@
<!-- Feature List -->
<div class="h5" id="feature-list">
<div class="row feature-list-item gradient-spin my-gradient rounded-3"
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item">
<div class="col">
Pick Up and Play
</div>
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Quick Resume
</div>
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Rewind & Fast Forward
</div>
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Configurator
</div>
@ -176,7 +171,7 @@
<!-- End Left Column -->
<!-- Right Column -->
<div class="col-8" id="feature-detail-column">
<div class="col-md-8" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3">
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
<!-- Image/Video Container -->
@ -187,7 +182,7 @@
</div>
<!-- Feature Detail Container -->
<div class="row py-2 m-1 rounded-3 feature-text-container">
<div class="row py-2 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
@ -212,9 +207,9 @@
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="row py-2 rounded-3 feature-text-container">
<div class="col">
<h4>Don't waste time on setup #2</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
@ -237,9 +232,9 @@
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="row py-2 rounded-3 feature-text-container">
<div class="col">
<h4>Don't waste time on setup #3</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
@ -262,9 +257,9 @@
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1">
<div class="row py-2 rounded-3 feature-text-container">
<div class="col">
<h4>Don't waste time on setup #4</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

8
scripts/features.js
View file

@ -4,10 +4,14 @@ let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () {
if (i != currentFeature) {
updateActiveFeature(i);
}
}, false)
// We need to remove the gradient so that linearBackground is hidden
if (featureTitles[i].id != 'active-feature-item') {
featureTitles[i].className = 'row feature-list-item rounded-3';
featureTitles[i].className = 'row feature-list-item rounded-3 m-0';
}
}
@ -22,7 +26,7 @@ function updateActiveFeature(i) {
// Reset previous current feature
featureTitles[lastCurrentFeature].removeAttribute('id');
featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3';
featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3 m-0';
featureTitles[lastCurrentFeature].style = '';
featureDetails[lastCurrentFeature].removeAttribute('id');