UHF-12360 remove react fallback views

hdbt.theme

@@ -123,6 +123,7 @@ function hdbt_preprocess_html(&$variables): void {
   $variables['use_global_navigation'] = $navigation_enabled;
   $variables['#attached']['drupalSettings']['hdbt']['global_menu'] = $navigation_enabled;
   $variables['#attached']['drupalSettings']['hdbt']['search_dropdown'] = $navigation_enabled;
+  $variables['#attached']['drupalSettings']['hdbt']['otherlangs_dropdown'] = $navigation_enabled;
 
   // Set theme path variable.
   $variables['theme_path'] = _hdbt_get_theme_path();
@@ -287,15 +288,6 @@ function hdbt_preprocess_node(&$variables): void {
   /** @var \Drupal\node\NodeInterface $node */
   $node = $variables['node'];
 
-  // Change news archive teasers to use h4 headers instead of the default h3.
-  if (
-    !empty($variables['view']) &&
-    is_object($variables['view']) &&
-    $variables['view']->current_display === 'news_archive_block'
-  ) {
-    $variables['node_header_level'] = 'h4';
-  }
-
   // Add current node langcode for easy access.
   $variables['node_langcode'] = $node->get('langcode')->value;
 
@@ -710,10 +702,6 @@ function hdbt_preprocess_block(&$variables): void {
     $variables['#attached']['library'][] = 'hdbt/closable-surveys';
   }
 
-  if ($variables['plugin_id'] == 'external_menu_block:header-language-links') {
-    $variables['#attached']['drupalSettings']['hdbt']['otherlangs_dropdown'] = TRUE;
-  }
-
   // Attach "nav_toggle" library to "profile" block.
   if ($variables['plugin_id'] == 'profile_block') {
     $variables['#attached']['drupalSettings']['hdbt']['profile_dropdown'] = TRUE;

src/js/nav-global/menu.js

@@ -453,8 +453,7 @@ const MobilePanel = {
     try {
       await this.load();
     } catch (e) {
-      console.error('Unable to load menu API, using fallback menu instead', e);
-      this.enableFallback();
+      console.error('Unable to load menu API', e);
       return;
     }
     /**
@@ -486,16 +485,7 @@ const MobilePanel = {
     });
   },
   isOpen() {
-    return window.location.hash === '#menu' || this.toggleButton.getAttribute('aria-expanded') === 'true';
-  },
-  disableFallback() {
-    this.menu.dataset.js = true; // Switch to use js-enhanced version instead of pure css version
-  },
-  enableFallback() {
-    this.menu.dataset.target = 'false'; // Close the menu with js so that we can use css version instead
-    this.getRoot().innerHTML = ''; // Remove rotator
-    delete this.menu.dataset.js; // Switch to use pure css version instead of js-enhanced version
-    window.location.hash = '#menu'; // Open menu with the css way
+    return this.toggleButton.getAttribute('aria-expanded') === 'true';
   },
   close() {
     this.dropdownInstance.classList.add('nav-toggle-dropdown--closed');
@@ -552,8 +542,6 @@ const MobilePanel = {
       return;
     }
 
-    this.disableFallback();
-
     /**
      * Close menu on Escape button click if it is open.
      */
@@ -585,14 +573,6 @@ const MobilePanel = {
     this.toggleButton.addEventListener('click', start);
     this.toggleButton.addEventListener('click', () => this.toggle());
 
-    /**
-     * Open menu if it is required in the hash, then clear hash.
-     */
-    if (this.isOpen()) {
-      window.location.hash = '';
-      start();
-      this.open();
-    }
     this.running = true;
   },
 };

src/scss/06-components/block/_language-switcher.scss

@@ -38,10 +38,6 @@
   }
 }
 
-#menu:not([data-js]) ~ * .mega-and-mobilemenu .block--language-switcher + * {
-  margin-top: $spacing;
-}
-
 .language-links {
   display: flex; // disables wrapping to multiple lines for now
 }
@@ -52,7 +48,6 @@
 // on the pages when the language switcher is close to the right
 // end of the page.
 @mixin language-switcher-overflow-prevention($id, $wrapper-modifier) {
-  #{$id}:target,
   #{$id}[data-target='true'] {
     & ~ * #{$wrapper-modifier} {
       overflow: visible;

src/scss/06-components/navigation/global/_menu-toggle.scss

@@ -42,7 +42,6 @@
 }
 
 // What should happen when menu is opened
-#menu:target,
 #menu[data-target='true'] {
   & ~ * .header-branding {
     @include breakpoint(max-width $breakpoint-l) {
@@ -61,12 +60,6 @@
   }
 }
 
-// When js is enabled, hide fallback menu and mobile menu footer
-#menu[data-js] ~ * .mega-and-mobilemenu .mobile-menu-fallback,
-#menu[data-js] ~ * .mega-and-mobilemenu .mmenu__footer {
-  display: none;
-}
-
 .mobile-menu {
   @include breakpoint($breakpoint-l) {
     display: none;

src/scss/06-components/navigation/local/_mobile-navigation.scss

@@ -35,7 +35,6 @@ $-cssmenu-bottom-padding: 80px; // Reserve space for mobile browser untappable-a
 }
 
 // What should happen when menu is opened
-#cssmenu:target,
 #cssmenu[data-target='true'] {
   & ~ * .header-branding {
     @include breakpoint(max-width $breakpoint-l) {
@@ -50,12 +49,6 @@ $-cssmenu-bottom-padding: 80px; // Reserve space for mobile browser untappable-a
   }
 }
 
-// When js is enabled, hide fallback menu and mobile menu footer
-#cssmenu[data-js] ~ * .mega-and-mobilemenu .mobile-menu-fallback,
-#cssmenu[data-js] ~ * .mega-and-mobilemenu .mmenu__footer {
-  display: none;
-}
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 // Navigation ul inside cssmenu

src/scss/06-components/navigation/toggle/_nav-toggle.scss

@@ -7,30 +7,21 @@ $label-font: 'special.navigation.icon_label';
   display: flex;
 }
 
-.nav-toggle__anchor {
-  display: grid;
-}
-
-.nav-toggle__anchor,
-.nav-toggle__button {
-  grid-template-areas: 'link';
-  z-index: 2;
-}
-
 .nav-toggle__button {
   background-color: transparent; // Reset button styles
   border: 0 none; // Reset button styles
   cursor: pointer;
-  display: none;
+  display: grid;
+  grid-template-areas: 'link';
   padding: 0;
+  z-index: 2;
 
   &:focus {
     outline: 0 none;
   }
 }
 
-.mega-and-mobilemenu .mobile-menu-fallback,
-.mega-and-mobilemenu .mmenu__footer {
+.mmenu > .mmenu__footer {
   padding-top: $spacing;
 
   @include breakpoint($breakpoint-l) {
@@ -170,7 +161,6 @@ $label-font: 'special.navigation.icon_label';
 }
 
 // When any nav-toggle is active in mobile size, lets hide page content to avoid tabbing behind the dropdown
-.nav-toggle-target:target:not(.nav-toggle-target--toast),
 .nav-toggle-target[data-target='true']:not(.nav-toggle-target--toast) {
   & ~ .wrapper > *:not(.header), // All wrapper content except .header
   & ~ .footer {
@@ -186,21 +176,6 @@ $label-font: 'special.navigation.icon_label';
 }
 
 @mixin button-toggle-rules($id, $nav-toggle-modifier, $nav-toggle-dropdown-modifier) {
-  // When menu is opened with anchor instead of JS, this forces the page to scroll to top
-  #{$id}:not([data-js]) {
-    scroll-margin-top: 100vh;
-  }
-
-  #{$id}:not([data-js]) ~ * {
-    // Chrome browser has a bug that renders initial menu state as open on page load and then animates it close.
-    // For this reason I had to remove the closing animation when there is no js available :(
-    .nav-toggle-dropdown__wrapper,
-    .nav-toggle-dropdown__content {
-      transition: none;
-    }
-  }
-
-  #{$id}:target,
   #{$id}[data-target='true'] {
     & ~ * #{$nav-toggle-modifier} {
       .nav-toggle__label--open {
@@ -230,18 +205,7 @@ $label-font: 'special.navigation.icon_label';
     }
   }
 
-  // When JS is enabled, switch to use button instead of anchor
-  #{$id}[data-js] ~ * #{$nav-toggle-modifier},
-  #{$id}[data-js] ~ * #{$nav-toggle-dropdown-modifier} {
-    .nav-toggle__anchor {
-      display: none;
-    }
-
-    // On desktop sizes with js, button should open dropdowns with js
-    .nav-toggle__button {
-      display: grid;
-    }
-
+  #{$nav-toggle-dropdown-modifier} {
     .nav-toggle-dropdown__content {
       overflow-y: hidden;
     }

src/scss/06-components/navigation/toggle/_otherlangs.scss

@@ -53,7 +53,6 @@
   }
 }
 
-#otherlangs:target,
 #otherlangs[data-target='true'] {
   & ~ * .nav-toggle--otherlangs .nav-toggle__label::after {
     transform: rotate(180deg);

src/scss/06-components/navigation/toggle/_profile-block.scss

@@ -191,7 +191,6 @@
   }
 }
 
-#profile:target,
 #profile[data-target='true'] {
   & ~ * .nav-toggle-dropdown--profile .nav-toggle-dropdown__content {
     @include breakpoint($breakpoint-l) {

templates/block/block--external-menu-block-fallback.html.twig

@@ -38,12 +38,6 @@
   {% endset %}
 {% endif %}
 
-{% set block_content %}
-  {% block content %}
-    {{ content }}
-  {% endblock %}
-{% endset %}
-
 {# Do we want to render navigation with content from another instance "globally" #}
 {% if use_global_navigation %}
 
@@ -52,7 +46,6 @@
   {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
     modifier_class: 'nav-toggle--menu',
     controls: dropdown_id,
-    anchor_target: '#menu',
     js_target: 'js-menu-toggle-button',
     open_label: 'Menu'|t({}, {'context': 'Mobile navigation menu open button text'}),
     close_label: 'Close'|t({}, {'context': 'Mobile navigation menu close button text'}),
@@ -67,18 +60,15 @@
   } %}
     {% block content %}
       <div class="mega-and-mobilemenu">
-
         {# Render external mega menu block. #}
         {{ drupal_entity('block', 'external_menu_mega_menu', check_access=false) }}
+      </div>
 
-        {# The block content will render menu--external-menu--fallback.html.twig #}
-        {{ block_content }}
-
+      <div id="mmenu" class="mmenu">
+        <div id="mmenu__panels" class="mmenu__panels"></div>
         <div class="mmenu__footer js-mmenu__footer">
-
           {% set inside_cssmenu = true %}
           {{ header_top_navigation_content }}
-
           <div class="mmenu__logo">
             {% set link_label %}
               {% embed "@hdbt/misc/logo.twig" %}{% endembed %}
@@ -92,10 +82,6 @@
           </div>
         </div>
       </div>
-
-      <div id="mmenu" class="mmenu">
-        <div id="mmenu__panels" class="mmenu__panels" />
-      </div>
     {% endblock %}
   {% endembed %}
 {% endif %}

templates/block/block--mobile-navigation.html.twig

@@ -40,7 +40,6 @@
   {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
     modifier_class: 'nav-toggle--cssmenu',
     controls: dropdown_id,
-    anchor_target: '#cssmenu',
     js_target: 'js-cssmenu-button',
     open_label: 'Menu'|t(),
     close_label: 'Close'|t(),

templates/component/header-search.twig

@@ -3,7 +3,6 @@
 {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
   modifier_class: 'nav-toggle--search',
   controls: dropdown_id,
-  anchor_target: '#search',
   js_target: 'js-search-button',
   open_label: 'Search'|t({}, {'context': 'Helfi menu search button'}),
   close_label: 'Close'|t,

templates/component/otherlanguages.twig

@@ -35,7 +35,6 @@
     {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
       modifier_class: 'nav-toggle--otherlangs',
       controls: dropdown_id,
-      anchor_target: '#otherlangs',
       js_target: 'js-otherlangs-button',
 
       open_label: null,

templates/layout/html.html.twig

@@ -58,6 +58,7 @@
   <head>
     <head-placeholder token="{{ placeholder_token }}">
     <title>{{ head_title|safe_join(' | ') }}</title>
+    <noscript><style>div.nav-toggle { display: none; }</style></noscript>
     <link rel="icon" href="{{ theme_path }}/src/images/favicon/favicon-32x32.ico" sizes="any">
     <link rel="icon" href="{{ theme_path }}/src/images/favicon/favicon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="{{ theme_path }}/src/images/favicon/apple-touch-icon.png">

templates/layout/page.html.twig

@@ -36,14 +36,10 @@
 
 {# Do we want to render navigation with content from another instance "globally" #}
 {% if use_global_navigation %}
-  {#
-  Anchor targets for global navi and other-langs nojs fallbacks.
-  Also works as a CSS data-attr selector reference point for JS version.
-  These must be on top and at root.
-  #}
+  {# CSS data-attr selector reference point for JS navigation toggle. Must be on top and at root. #}
   <div id="menu" class="nav-toggle-target"></div>
 {% else %}
-  {# This checkbox handles opening and closing mobile menu #}
+  {# CSS data-attr selector reference point for JS navigation toggle. #}
   <div id="cssmenu" class="nav-toggle-target"></div>
 {% endif %}
 

templates/module/helfi_platform_config/profile-block.html.twig

@@ -10,7 +10,6 @@
   {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
     modifier_class: 'nav-toggle--profile',
     controls: dropdown_id,
-    anchor_target: '#profile',
     js_target: 'js-profile-button',
     modifier_suffix: 'profile',
 

templates/navigation/links--language-block.html.twig

@@ -42,10 +42,8 @@
           <span class="language-link__wrapper language-link__wrapper--{{ lang }}">
             {% embed "@hdbt/navigation/nav-toggle-button.twig" with {
               modifier_class: button_wrapper_classes,
-              anchor_modified: anchor_button_classes,
               button_modified: anchor_button_classes,
               controls: dropdown_id,
-              anchor_target: '#language-toast--' ~ lang,
               js_target: 'js-language-toast--' ~ lang ~ '-button',
               open_label: item.text|capitalize,
               close_label: item.text|capitalize,
@@ -61,9 +59,6 @@
                 <section class="language-toast" id="language-toast--{{ lang }}" aria-label="{{ item.text|capitalize }}" lang="{{ lang }}">
                   {% set language_toast_close_labelled_by = "language-toast__close__aria-label--" ~ random() %}
                   <div class="language-toast__close-wrapper">
-                    <a href="#" class="nav-toggle__anchor language-toast__close">
-                      <span class="is-hidden">{{ toast_languages[lang].toast_close_button }}</span>
-                    </a>
                     <button class="nav-toggle__button language-toast__close js-language-toast--{{ lang }}-button" aria-labelledby="{{ language_toast_close_labelled_by }}" aria-expanded="false" aria-controls="{{ dropdown_id }}">
                       <span id="{{language_toast_close_labelled_by}}" class="is-hidden">{{ toast_languages[lang].toast_close_button }}</span>
                     </button>