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

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;
}
.row.feature-list-item {
.feature-list-item {
padding: 0.5rem;
cursor: pointer;
background: #333;
@ -85,5 +85,5 @@ footer {
}
#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-->
<div class="row">
<!-- Left Column -->
<div class="col-md-4" id="left-feature-column">
@ -144,27 +145,19 @@
</div>
<!-- Feature List -->
<div class="h5" id="feature-list">
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0"
<div class="h5 row d-flex flex-md-column align-items-center" id="feature-list">
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item">
<div class="col">
Pick Up and Play
</div>
Pick Up and Play
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Quick Resume
</div>
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
Quick Resume
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Rewind & Fast Forward
</div>
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
Rewind & Fast Forward
</div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col">
Configurator
</div>
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
Configurator
</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
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
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 = '';
featureDetails[lastCurrentFeature].removeAttribute('id');