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

Feature Titles now scrolls when horizontal and tapped/clicked

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-24 13:10:15 -04:00
parent 81871def2b
commit 86af6cdabc
2 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -69,6 +69,10 @@ footer {
background: #333; background: #333;
} }
#feature-list {
scrollbar-width: none;
}
.feature-list-item { .feature-list-item {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;

10
scripts/features.js
View file

@ -1,5 +1,6 @@
const featureTitles = document.getElementsByClassName('feature-list-item'); const featureTitles = document.getElementsByClassName('feature-list-item');
const featureDetails = document.getElementsByClassName('feature-detail-container'); const featureDetails = document.getElementsByClassName('feature-detail-container');
const featureList = document.getElementById('feature-list');
let currentFeature = 0; let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) { for (let i = 0; i < featureTitles.length; i++) {
@ -18,6 +19,7 @@ for (let i = 0; i < featureTitles.length; i++) {
function updateActiveFeature(i) { function updateActiveFeature(i) {
const lastCurrentFeature = currentFeature; const lastCurrentFeature = currentFeature;
currentFeature = i; currentFeature = i;
// console.log(`${lastCurrentFeature} -> ${currentFeature}`);
// New current feature // New current feature
featureTitles[currentFeature].className += ' gradient-spin my-gradient'; featureTitles[currentFeature].className += ' gradient-spin my-gradient';
@ -30,4 +32,12 @@ function updateActiveFeature(i) {
featureTitles[lastCurrentFeature].style = ''; featureTitles[lastCurrentFeature].style = '';
featureDetails[lastCurrentFeature].removeAttribute('id'); featureDetails[lastCurrentFeature].removeAttribute('id');
// Update scroll position
const offsetPadding = 20;
if (lastCurrentFeature < currentFeature) {
featureList.scrollLeft = featureTitles[currentFeature].offsetLeft - offsetPadding;
} else {
featureList.scrollLeft = featureTitles[currentFeature].offsetLeft - featureTitles[currentFeature].offsetWidth/2 - offsetPadding;
}
} }