Provide a better UX out of the box

Created on 10 January 2021, almost 4 years ago
Updated 16 September 2024, 2 months ago

I have been unable to get tabbed view pages working in Drupal 8/9 if I include a contextual filter in my view. There are a whole lot of issues around this, some up to 3 years old! Anyway, this module appears to provide a way to achieve what I want. Unfortunately, the links it produces are not very visually appealing:

It would be much nicer if these links were styled as tabs. I found lots of stuff about doing this using pure CSS, e.g. https://css-tricks.com/better-tabs-with-round-out-borders/.

The necessary steps are:

  1. Add a *.libraries.yml file to the root folder of the module which declares a CSS file.
  2. Add a /css folder and put the CSS file I just declared into it - I called in tabs.css
  3. Modify the template views-display-switch.html.twig to load this css and modify the markup it generates slightly so that the links are formatted as an unordered list.

My modified template looks like this:

{{ attach_library('views_display_switch/tabs') }}
<div class="views-display-switch">
  <ul class="views-display-switch-nav">
    {% for link in links %}
	  <li>{{ link }}</li>
    {% endfor%}
  </ul>
</div>

Copies of the two new files and the modified template are in the attached zip.

The result now looks like this:

If you were to include this feature in your module, it might need a little work on the CSS to ensure it worked across browsers, meets the Drupal CSS coding standards and works with themes. This goes a bit beyond my limited Drupal/web-design knowledge and abilities I'm afraid!

Feature request
Status

Closed: works as designed

Version

1.1

Component

Code

Created by

🇬🇧United Kingdom Stuart-UK

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024