Merge pull request #798 from City-of-Helsinki/UHF-7269_JS_fallback

UHF-7269: JS fallback updates
City-of-Helsinki · Oct 19, 2023 · b85f559 · b85f559
2 parents 9adca24 + d50b288
commit b85f559
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 4 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/embedded-content-cookie-compliance.min.js b/dist/js/embedded-content-cookie-compliance.min.js
diff --git a/src/js/embedded-content-cookie-compliance.js b/src/js/embedded-content-cookie-compliance.js
@@ -71,6 +71,9 @@
   // Run after choosing cookie settings.
   $(document).on('eu_cookie_compliance.changeStatus', loadEmbeddedContent);
 
+  // Remove noscript element.
+  $('.embedded-content-cookie-compliance .js-remove').remove();
+
   // Run after page is ready.
   $(document).ready(loadEmbeddedContent);
 })(jQuery, Drupal, drupalSettings);
diff --git a/src/scss/06_components/navigation/_table-of-contents.scss b/src/scss/06_components/navigation/_table-of-contents.scss
@@ -76,3 +76,58 @@
     }
   }
 }
+
+.table-of-contents__js {
+  display: none;
+
+  &[data-js="true"] {
+    display: block;
+  }
+}
+
+.table-of-contents__nojs {
+  background-color: $color-silver-light;
+  display: flex;
+  flex-flow: column;
+  padding: $spacing-double $spacing-and-half;
+
+  @include breakpoint($breakpoint-m) {
+    flex-flow: row;
+  }
+
+  .nojs__icon {
+    display: inline-flex;
+    margin-bottom: $spacing-and-half;
+    margin-inline-end: $spacing;
+
+    @include breakpoint($breakpoint-m) {
+      margin-inline-end: $spacing-and-half;
+    }
+
+    .hel-icon {
+      --icon-size: #{$spacing-quadruple};
+
+      @include breakpoint($breakpoint-m) {
+        --icon-size: #{remify(100px)};
+      }
+    }
+  }
+
+  .nojs__title {
+    @include font('h3');
+    margin-top: 0;
+  }
+
+  .nojs__desc {
+    @include font('body');
+    margin-top: $spacing;
+
+    @include breakpoint($breakpoint-l) {
+      margin-top: $spacing-and-half;
+    }
+
+    p:first-child {
+      margin: 0;
+    }
+  }
+}
diff --git a/src/scss/06_components/paragraphs/_banner.scss b/src/scss/06_components/paragraphs/_banner.scss
@@ -29,7 +29,7 @@
     --icon-size: #{$spacing-quadruple};
 
     @include breakpoint($breakpoint-m) {
-      --icon-size: 6.25rem;
+      --icon-size: #{remify(100px)};
     }
   }
 

diff --git a/templates/field/field--toc-enabled.html.twig b/templates/field/field--toc-enabled.html.twig
@@ -1,6 +1,6 @@
 {% if toc_enabled|render|striptags|trim is not empty %}
   <div class="table-of-contents">
-    <div id="helfi-toc-table-of-contents" class="table-of-contents__container">
+    <div id="helfi-toc-table-of-contents" class="table-of-contents__container table-of-contents__js">
       {% if toc_title|render %}
         {% set title_attributes = {
             'class': [
@@ -23,6 +23,23 @@
         </ul>
       </nav>
     </div>
+    <noscript class="table-of-contents__nojs js-remove">
+      <div class="nojs__icon">
+        {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'alert-circle-fill'} %}
+      </div>
+      <div class="nojs__content-wrapper">
+        <div class="nojs__content">
+          <h2 class="nojs__title"> {{ 'Content cannot be displayed'|t }}</h2>
+          <div class="nojs__desc">
+            <p>
+              {% trans with {'context': 'Table of contents, no javascript'} %}
+                Table of contents requires JavaScript. Your browser doesn't support JavaScript or it is disabled. Please check your browser settings and try again.
+              {% endtrans %}
+            </p>
+          </div>
+        </div>
+      </div>
+    </noscript>
   </div>
 {% else %}
   <div class="page-divider"></div>

diff --git a/templates/misc/embedded-content-cookie-compliance.twig b/templates/misc/embedded-content-cookie-compliance.twig
@@ -2,6 +2,13 @@
   <div class="message" {{ alternative_language ? create_attribute({'lang': lang_attributes.fallback_lang, 'dir': lang_attributes.fallback_dir}) }}>
     {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'alert-circle-fill'} %}
     <h2>{{ 'Content cannot be displayed'|t }}</h2>
+    <noscript class="js-remove">
+      <p>
+        {% trans with {'context': 'Generic javascript required message'} %}
+            This content requires JavaScript. Your browser doesn't support JavaScript or it is disabled. Please check your browser settings and try again.
+        {% endtrans %}
+      </p>
+    </noscript>
     <p>
       {% trans %}
         This content is hosted by {{ media_service_url }}. To see the content, switch over to the external site or modify your cookie settings to allow for preference and statistics cookies.

diff --git a/translations/fi.po b/translations/fi.po
@@ -730,3 +730,7 @@ msgstr "Muut yhteystiedot"
 msgctxt "TPR Unit tpr data accordion heading"
 msgid "Further information"
 msgstr "Lisätiedot"
+
+msgctxt "Table of contents, no javascript"
+msgid "Table of contents requires JavaScript. Your browser doesn't support JavaScript or it is disabled. Please check your browser settings and try again."
+msgstr "Sisällysluettelo käyttää JavaScriptiä. Selaimesi ei tue JavaScriptiä tai se on pois käytöstä. Tarkista selaimesi asetukset ja yritä uudelleen."
diff --git a/translations/sv.po b/translations/sv.po
@@ -723,3 +723,7 @@ msgstr "Andra kontaktuppgifter"
 msgctxt "TPR Unit tpr data accordion heading"
 msgid "Further information"
 msgstr "Ytterligare uppgifter"
+
+msgctxt "Table of contents, no javascript"
+msgid "Table of contents requires JavaScript. Your browser doesn't support JavaScript or it is disabled. Please check your browser settings and try again."
+msgstr "Innehållsförteckning använder JavaScript. Din webbläsare stöder inte JavaScript eller det är inaktiverad. Kontrollera webbläsarens inställningar och försök igen."