feat: improve AT cards styling & usability

fluid-project · Jul 20, 2022 · bdadb78 · bdadb78
1 parent 5122b11
commit bdadb78
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 46 deletions.
diff --git a/src/_includes/layouts/audio-tactile-cards.njk b/src/_includes/layouts/audio-tactile-cards.njk
@@ -5,33 +5,35 @@
     {% uioTemplate %}
     {% include "partials/global/header.njk" %}
     <main class="main">
-        <h1 class="audio-tactile__title">{{ title }}</h1>
-
-        {% include "partials/components/breadcrumb.njk" %}
-
-        <nav class="flc-toc-tocContainer"></nav>
-
-        {% block content %}
-            {{ content | safe }}
-            <div class="audio-tactile__diagram">
-                {%- svg_sprite "audio-tactile-card-diagram", translations[lang].audioTactileCardDiagramAltText -%}
-            </div>
-            {%- include "partials/components/audio-tactile-legend.njk" -%}
-        {% endblock %}
-
-        {%- include "partials/components/sections-control.njk" -%}
-
-        <ul class="audio-tactile__sections">
-        {%- for section in collections.cards | eleventyNavigation("Audio Tactile Design Recommendations") -%}
-            {%- include "partials/components/audio-tactile-section.njk" -%}
-        {%- endfor -%}
-        </ul>
+        <div class="audio-tactile__container">
+            <h1 class="audio-tactile__title">{{ title }}</h1>
+
+            {% include "partials/components/breadcrumb.njk" %}
+
+            <nav class="flc-toc-tocContainer"></nav>
+
+            {% block content %}
+                {{ content | safe }}
+                <div class="audio-tactile__diagram">
+                    {%- svg_sprite "audio-tactile-card-diagram", translations[lang].audioTactileCardDiagramAltText, false -%}
+                </div>
+                {%- include "partials/components/audio-tactile-legend.njk" -%}
+            {% endblock %}
+
+            {%- include "partials/components/sections-control.njk" -%}
+
+            <ul class="audio-tactile__sections">
+            {%- for section in collections.cards | eleventyNavigation("Audio Tactile Design Recommendations") -%}
+                {%- include "partials/components/audio-tactile-section.njk" -%}
+            {%- endfor -%}
+            </ul>
+        </div>
     </main>
     {% include "partials/global/footer.njk" %}
     {# 
         Calling a custom duplicate of eleventy-plugin-fluid's uioInit shortcode in
         order to run it without the text-size preference until issue #57 is solved.
-        
+
         This call is duplicated in base.njk and home.njk
 
         https://github.com/fluid-project/handbook.floeproject.org/issues/57

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -14,7 +14,7 @@
     {# 
         Calling a custom duplicate of eleventy-plugin-fluid's uioInit shortcode in
         order to run it without the text-size preference until issue #57 is solved.
-        
+
         This call is duplicated in base.njk
 
         https://github.com/fluid-project/handbook.floeproject.org/issues/57

diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
@@ -19,15 +19,15 @@
         {% set icon = "toolkits" %}
         {% set sideContentTitle = sideContentHeadings[lang].toolkitsTitle %}
         {% set toolkitsAndGuidesPath = "src/collections/pages/" + lang + "/toolkits-and-guides.md" %}
-        
+
         {# TODO: find a tidier way of rendering the markdown content. `renderFile` doesn't seem to work #}
         {% set sideContentPreFilter %}
             {% include toolkitsAndGuidesPath %}
         {% endset %}
         {% set sideContent %}
             {{ sideContentPreFilter | markdown | safe }}
         {% endset %}
-        
+
         {% include "partials/components/side-content-item.njk" %}
     </div>
 {% endblock %}
diff --git a/src/_includes/layouts/topic-page.njk b/src/_includes/layouts/topic-page.njk
@@ -7,8 +7,6 @@
         </header>
 
         {% include "partials/components/breadcrumb.njk" %}
-
-        {# accordion table of contents listing all page headings #}
     </div>
 {% endblock %}
 

diff --git a/src/_includes/partials/components/audio-tactile-card.njk b/src/_includes/partials/components/audio-tactile-card.njk
@@ -3,15 +3,12 @@
     {%- content_from_nav_key collections.cards, card.key -%}
 {%- endset -%}
 <li class="card{{ "empty" if not cardContent }}">
-    <button class="card__toggle" aria-labelledby="{{ cardID }}" aria-expanded="false" type="button">
+    <button class="card__toggle" aria-labelledby="{{ cardID }}" {%- if cardContent -%}aria-expanded="false"{% endif %} type="button">
         <h4 class="card__title" id="{{ cardID }}">
             {{- card.title | safe -}}
         </h4>
         <div class="card__details">
             <div class="card__description">{{ card.description | safe }}</div>
-            {%- set cardContent -%}
-                {%- content_from_nav_key collections.cards, card.key -%}
-            {%- endset -%}
             <span class="card__icon fl-inverted-color" aria-hidden="true">
                 {%- if cardContent -%}{% svg_sprite "arrow" %}{%- endif -%}
             </span>

diff --git a/src/assets/scripts/app.js b/src/assets/scripts/app.js
@@ -38,11 +38,21 @@ const toggleExpandedState = function (evt, accordionContainerSelector) {
  * @param {Boolean} state - the state to which to set the toggle control
  */
 const toggleAccordion = function (button, accordionContainerSelector, state) {
-    $(button)
-        .attr("aria-expanded", state)
-        .toggleClass(accordionContainerSelector + "__toggle" + "--expanded", state)
-        .closest("." + accordionContainerSelector)
-        .toggleClass(accordionContainerSelector + "__content--show", state);
+
+    /*
+     * Ensure aria-expanded exists before toggling the accordion, in case this is an "empty" accordion
+     * and is not intended to be expanded (i.e. if it's a card with no content)
+     *
+     * Please see this page for more detail on the syntax:
+     * https://css-tricks.com/snippets/jquery/make-an-jquery-hasattr/
+     */
+    if ($(button)[0].hasAttribute("aria-expanded")) {
+        $(button)
+            .attr("aria-expanded", state)
+            .toggleClass(accordionContainerSelector + "__toggle" + "--expanded", state)
+            .closest("." + accordionContainerSelector)
+            .toggleClass(accordionContainerSelector + "__content--show", state);
+    }
 };
 
 $(document).ready(function () {

diff --git a/src/assets/styles/components/_audio-tactile-subsection.scss b/src/assets/styles/components/_audio-tactile-subsection.scss
@@ -74,7 +74,6 @@
 
     .subsection__content--show .subsection__content {
         display: block;
-        padding-inline: 3.75rem;
     }
 
     /* The "Context, Use, and Inclusion" section is only cards, for the time being */
@@ -84,19 +83,15 @@
         gap: 3rem;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
         list-style: none;
-        margin: 0;
         margin-block-end: 2.5rem;
-        padding: 0;
-    }
+        padding-inline: 2rem;
 
-    @include breakpoint-up(sm) {
-        .subsection__cards {
+        @include breakpoint-up(sm) {
             grid-template-columns: 1fr 1fr;
+            padding-inline: 3.75rem;
         }
-    }
 
-    @include breakpoint-up(md-lg) {
-        .subsection__cards {
+        @include breakpoint-up(md-lg) {
             grid-template-columns: 1fr 1fr 1fr;
         }
     }

diff --git a/src/assets/styles/pages/_audio-tactile.scss b/src/assets/styles/pages/_audio-tactile.scss
@@ -15,22 +15,34 @@
     .audio-tactile__title {
         font-size: 3rem;
         font-weight: 700;
+        grid-area: title;
         hyphens: auto;
         line-height: 3.5rem;
         word-break: break-word;
     }
 
+    .breadcrumb {
+        grid-area: bread;
+    }
+
+    .flc-toc-tocContainer {
+        grid-area: uioToc;
+    }
+
     .audio-tactile__intro {
         font-size: 1.25rem;
+        grid-area: intro;
     }
 
     .audio-tactile__credits {
         font-size: 1.25rem;
         font-style: italic;
+        grid-area: credits;
         margin-inline: auto;
     }
 
     .audio-tactile__diagram {
+        grid-area: diagram;
         text-align: center;
 
         svg {
@@ -41,7 +53,16 @@
         }
     }
 
+    .legend {
+        grid-area: legend;
+    }
+
+    .sections-control {
+        grid-area: secCtrl;
+    }
+
     .audio-tactile__sections {
+        grid-area: sections;
         list-style: none;
         margin: 0;
         padding: 0;
@@ -52,8 +73,38 @@
     @include card-section-colour-override(".cui", $sectionBorderColourAltTwo);
 
     @include breakpoint-up(md) {
-        .main > * {
+        .audio-tactile__container {
+            column-gap: 2rem;
+            display: grid;
+            grid-template-areas:
+                "title title"
+                "bread bread"
+                "uioToc uioToc"
+                "intro diagram"
+                "credits diagram"
+                "legend legend"
+                "secCtrl secCtrl"
+                "sections sections";
             max-width: $xl-content-width;
         }
+
+        .audio-tactile__intro,
+        .audio-tactile__diagram {
+            margin-block-start: 3rem;
+        }
+
+        .audio-tactile__intro > p:first-child {
+            margin-block-start: 0;
+        }
+
+        .audio-tactile__diagram {
+            align-self: center;
+        }
+
+        .legend {
+            justify-self: center;
+            max-width: 40.5rem;
+            width: 100%;
+        }
     }
 }