Style local tasks

Based on https://flowbite.com/docs/components/tabs.
This commit is contained in:
Oliver Davies 2025-05-29 15:40:03 +01:00
parent f83c587527
commit c3965c027f
4 changed files with 90 additions and 1 deletions

View file

@ -0,0 +1,43 @@
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
<div{{ attributes.addClass('mb-10') }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes.addClass('text-xl font-bold') }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>

View file

@ -0,0 +1,19 @@
{#
/**
* @file
* Default theme implementation for a local task link.
*
* Available variables:
* - attributes: HTML attributes for the wrapper element.
* - is_active: Whether the task item is an active tab.
* - link: A rendered link element.
*
* Note: This template renders the content for each task item in
* menu-local-tasks.html.twig.
*
* @see template_preprocess_menu_local_task()
*
* @ingroup themeable
*/
#}
<li{{ attributes.addClass('me-2') }}>{{ link|add_class('inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-blue-primary hover:border-blue-primary dark:hover:text-gray-300') }}</li>

View file

@ -0,0 +1,28 @@
{#
/**
* @file
* Default theme implementation to display primary and secondary local tasks.
*
* Available variables:
* - primary: HTML list items representing primary tasks.
* - secondary: HTML list items representing secondary tasks.
*
* Each item in these variables (primary and secondary) can be individually
* themed in menu-local-task.html.twig.
*
* @ingroup themeable
*/
#}
{% if primary %}
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
<h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
<ul class="flex flex-wrap -mb-px">{{ primary }}</ul>
</div>
{% endif %}
{% if secondary %}
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
<h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
<ul class="flex flex-wrap -mb-px">{{ secondary }}</ul>
</div>
{% endif %}

View file

@ -36,7 +36,6 @@ General:
- Recreate the "About me" block in Drupal.
- Migrate redirects to be managed by the Redirect module.
- Style local actions links (View, Edit, etc).
- Make the "Years of experience" dynamic.
- Add PHPStan.
- Add phpcs.