From fbf5d5daf2c06176b9d9c6ed63aec68ffdf6aaca Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Wed, 11 May 2022 17:26:47 +0200 Subject: [PATCH] tabs can operate without JS Co-authored-by: Jamie Thompson Co-authored-by: Julien Richard-Foy --- _includes/alt-details.html | 2 +- _includes/tabsection.html | 28 ++++++++++---- _install_tabs/4-other.html | 2 +- _sass/components/alt-details.scss | 6 ++- _sass/components/tab.scss | 63 +++++++++++++++++++++++++------ _sass/layout/inner-main.scss | 8 ++-- resources/js/functions.js | 30 +-------------- 7 files changed, 82 insertions(+), 57 deletions(-) diff --git a/_includes/alt-details.html b/_includes/alt-details.html index 34a5eced5..fc2d94c85 100644 --- a/_includes/alt-details.html +++ b/_includes/alt-details.html @@ -1,5 +1,5 @@
- +
{{include.detail}} diff --git a/_includes/tabsection.html b/_includes/tabsection.html index 0ec1cb591..765cacf8b 100644 --- a/_includes/tabsection.html +++ b/_includes/tabsection.html @@ -1,15 +1,27 @@ -
-
    +
    + {% for tabRoot in include.collection %} + + {% endfor %} + - {% for tabRoot in include.collection %} -
    - {{tabRoot.content}} +
    + {% for tabRoot in include.collection %} +
    + {{tabRoot.content}} +
    + {% endfor %}
    - {% endfor %}
    diff --git a/_install_tabs/4-other.html b/_install_tabs/4-other.html index 548f22ba7..a74788c3a 100644 --- a/_install_tabs/4-other.html +++ b/_install_tabs/4-other.html @@ -6,7 +6,7 @@

    Follow the documentation from Coursier on how to install and run cs setup.

    diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss index 50b797d32..e90c91efe 100644 --- a/_sass/components/alt-details.scss +++ b/_sass/components/alt-details.scss @@ -41,12 +41,14 @@ .alt-details-control + .alt-details-toggle + .alt-details-detail { // by default, hide the details - display: none; + position: absolute; + top: -999em; + left: -999em; } .alt-details-control:checked + .alt-details-toggle + .alt-details-detail { // show the details when the control is checked - display: block; + position: static; } .alt-details-control:checked + .alt-details-toggle:after { diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss index 625668927..acb042e30 100755 --- a/_sass/components/tab.scss +++ b/_sass/components/tab.scss @@ -2,6 +2,8 @@ //------------------------------------------------ //------------------------------------------------ +// dynamic tab switching based on https: //levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8 + .nav-tab { border-bottom: $base-border-gray; @include display(flex); @@ -9,6 +11,7 @@ @include justify-content(flex-start); .item-tab { + label, a { transition: none; // do not animate the transition to active color: $base-font-color-light; @@ -26,19 +29,21 @@ &:hover { cursor: pointer; } - - &.active { - border-bottom: 2px solid $brand-primary; - padding: 0 20px 8px; // so text does not jump up when active - color: $brand-primary; - pointer-events: none; - } } + label { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } } @include bp(small) { @include justify-content(space-between); .item-tab { + label, a { transition: none; // do not animate the transition to active padding: 0 10px 10px; @@ -48,17 +53,51 @@ } } +.nav-tab>.item-tab>a.active, // used in the blog +.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label, +.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label, +.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label, +.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label, +.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label, +.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label, +.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label, +.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label, +.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label { + border-bottom: 2px solid $brand-primary; + padding: 0 20px 8px; // so text does not jump up when active + color: $brand-primary; + pointer-events: none; +} + .tabsection { border-bottom: $base-border-gray; border-left: $base-border-gray; border-right: $base-border-gray; border-radius: $border-radius-medium; -} -.tabcontent { - display: none; + input { // hide the input because they are not interactive + display: block; /* "enable" hidden elements in IE/edge */ + position: absolute; /* then hide them off-screen */ + left: -100%; + } - &.active { - display: block; + .tabcontent { + section { // by default, hide all sections until the user clicks on the associated label + position: absolute; + top: -999em; + left: -999em; + } } } + +.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1), +.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2), +.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3), +.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4), +.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5), +.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6), +.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7), +.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8), +.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) { + position: static; +} diff --git a/_sass/layout/inner-main.scss b/_sass/layout/inner-main.scss index 97ba864e2..8a8053b48 100755 --- a/_sass/layout/inner-main.scss +++ b/_sass/layout/inner-main.scss @@ -2,14 +2,14 @@ //------------------------------------------------ //------------------------------------------------ +#inner-main > section:nth-child(2) { // corresponds to area with the content below the title + margin-top: -80px; // have it overlap with the title area +} + #inner-main { background: $gray-lighter; padding-bottom: $padding-xlarge; - section:nth-child(2) { - margin-top: -80px; - } - .inner-box { padding: $padding-medium; background: #fff; diff --git a/resources/js/functions.js b/resources/js/functions.js index 5a740d711..36bcfd735 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -312,29 +312,6 @@ $(document).ready(function () { } }); -$(document).ready(function () { - $('.tabsection').each(function () { - var tabsection = this; - $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () { - var tabLink = this; - var targetTab = $(tabLink).attr('data-target'); - $(tabLink).click(function () { - console.log("clicked on " + targetTab); - $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function() { - var otherTab = this; - var otherTarget = $(otherTab).attr('data-target'); - otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active'); - }) - $(tabsection).children('.tabcontent').each(function() { - var tabContent = this; - var tabId = $(tabContent).attr('data-tab'); - targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active'); - }); - }); - }); - }); -}); - $(document).ready(function () { // click the get-started tab corresponding to the users OS. if ($(".main-download").length) { @@ -342,12 +319,7 @@ $(document).ready(function () { if (os === 'unix') { os = 'linux'; } - $("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () { - var targetTab = $(this).attr("data-target"); - if (targetTab === os) { - $(this).click(); - } - }); + $("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true); } });