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

Sidebar now changes to tabs on mobile

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-24 10:52:30 -04:00
parent 60941aaeb2
commit ecadf03d0a
3 changed files with 14 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -69,7 +69,7 @@ footer {
background: #333; background: #333;
} }
.row.feature-list-item { .feature-list-item {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
background: #333; background: #333;
@ -85,5 +85,5 @@ footer {
} }
#active-feature-detail { #active-feature-detail {
display: inherit; display: block;
} }

27
features.html
View file

@ -133,6 +133,7 @@
<!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de--> <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
<div class="row"> <div class="row">
<!-- Left Column --> <!-- Left Column -->
<div class="col-md-4" id="left-feature-column"> <div class="col-md-4" id="left-feature-column">
@ -144,27 +145,19 @@
</div> </div>
<!-- Feature List --> <!-- Feature List -->
<div class="h5" id="feature-list"> <div class="h5 row d-flex flex-md-column align-items-center" id="feature-list">
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item"> id="active-feature-item">
<div class="col"> Pick Up and Play
Pick Up and Play
</div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id=""> <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> Quick Resume
Quick Resume
</div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id=""> <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> Rewind & Fast Forward
Rewind & Fast Forward
</div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id=""> <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> Configurator
Configurator
</div>
</div> </div>
</div> </div>
</div> </div>

4
scripts/features.js
View file

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