From 97e54f83550fcbd25bf3aad1e6cf1353370ba98c Mon Sep 17 00:00:00 2001 From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:46:13 -0400 Subject: [PATCH] Implement first pass of screenshot scrolling --- css/style.css | 18 +++- index.html | 224 +++++++++++++++++++++++++++++++++----------- scripts/features.js | 37 ++++---- 3 files changed, 207 insertions(+), 72 deletions(-) diff --git a/css/style.css b/css/style.css index fe71476..ee62168 100644 --- a/css/style.css +++ b/css/style.css @@ -96,27 +96,39 @@ footer { } /* Features Styles */ + #features { background: #000; border-top: var(--rd-purple) 5px solid; border-bottom: var(--rd-purple) 5px solid; } -#feature-card-container { - /* overflow-x: scroll; */ +#feature-card-row, #screenshot-row { flex-wrap: nowrap; scrollbar-width: none; scroll-behavior: smooth; } +.screenshot { + scale: 80%; +} + .feature-card { background: var(--rd-blue); border: white 2px solid; border-radius: 5px; - width: 40%; + cursor: pointer; + scale: 80%; } +.feature-card#active-feature-card, .screenshot#active-screenshot { + scale: 100%; + transition: 0.25s; +} +.feature-card#empty-feature, .screenshot#empty-screenshot { + visibility: hidden; +} .feature-card h3 { color: white; font-family: var(--pixel-font); diff --git a/index.html b/index.html index 292daf6..5d2d164 100644 --- a/index.html +++ b/index.html @@ -54,61 +54,91 @@ href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog
  • -
  • - @@ -140,18 +170,27 @@
    - -
    -
    - Flathub + +
    +
    + + Flathub + + +
    +
    +
    +
    Get it on
    -
    -
    Get it on
    -
    Flathub
    +
    +
    Flathub
    -     +
    +
    @@ -170,57 +209,133 @@
    -

    - With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam Deck. - If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator. - And don’t worry – you can always reset with a single click. -

    -
    - - - +

    + With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam + Deck. + If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator. + And don’t worry – you can always reset with a single click. +

    + + +
    - - -
    + + + + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    +
    + +
    +

    Feature 1

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales + mattis. Praesent eget lacinia risus, ut bibendum est.

    -
    +

    Feature 2

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit + sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    -
    +

    Feature 3

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales + mattis. Praesent eget lacinia risus, ut bibendum est.

    -
    +

    Feature 4

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales + mattis. Praesent eget lacinia risus, ut bibendum est.

    -
    +

    Feature 5

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales + mattis. Praesent eget lacinia risus, ut bibendum est.

    -
    +

    Feature 6

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales + mattis. Praesent eget lacinia risus, ut bibendum est.

    +
    @@ -235,7 +350,8 @@

    We can't do this alone!

    RetroDECK is run by volunteers. - If you appreciate our work, please consider code contribution or donating to us or our sibling projects. + If you appreciate our work, please consider code contribution or donating to us or our + sibling projects.

    @@ -245,8 +361,10 @@ href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
    - - + +
    Learn More
    diff --git a/scripts/features.js b/scripts/features.js index 50aa503..050b062 100644 --- a/scripts/features.js +++ b/scripts/features.js @@ -1,26 +1,31 @@ +const screenshotElems = document.getElementsByClassName('screenshot'); const featureCardElems = document.getElementsByClassName('feature-card'); -const featureCardContainerElem = document.getElementById('feature-card-container'); -let currentFeatureCard = 1 +let currentFeature = 1 for (let i = 0; i < featureCardElems.length; i++) { - featureCardElems[i].addEventListener('click', function() { - if (i != currentFeatureCard) { - updateActiveFeatureCard(i); + screenshotElems[i].addEventListener('click', function() { + if (i != currentFeature) { + updateActiveFeature(i); } - }, false) + }) + featureCardElems[i].addEventListener('click', function() { + if (i != currentFeature) { + updateActiveFeature(i); + } + }) } -function updateActiveFeatureCard(i) { - const lastCurrentFeature = currentFeatureCard; - currentFeatureCard = i; - console.log(i) +function updateActiveFeature(i) { + const lastCurrentFeature = currentFeature; + currentFeature = i; + + screenshotElems[i].id = 'active-screenshot'; + screenshotElems[lastCurrentFeature].id = ""; featureCardElems[i].id = 'active-feature-card'; featureCardElems[lastCurrentFeature].id = ""; - if (lastCurrentFeature < i) { - // featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth/2 - featureCardContainerElem.scrollIntoView - } else { - featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth - } + + + featureCardElems[i].scrollIntoView({inline: 'center'}); + screenshotElems[i].scrollIntoView({inline: 'center'}); } \ No newline at end of file