claro-8.x-1.x-dev/templates/system-themes-page.html.twig
templates/system-themes-page.html.twig
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | {#/** * @file * Theme override for the Appearance page. * * Available variables: * - attributes: HTML attributes for the main container. * - theme_groups: A list of theme groups. Each theme group contains: * - attributes: HTML attributes specific to this theme group. * - title: Title for the theme group. * - state: State of the theme group, e.g. installed or uninstalled. * - themes: A list of themes within the theme group. Each theme contains: * - attributes: HTML attributes specific to this theme. * - screenshot: A screenshot representing the theme. * - description: Description of the theme. * - name: Theme name. * - version: The theme's version number. * - is_default: Boolean indicating whether the theme is the default theme * or not. * - is_admin: Boolean indicating whether the theme is the admin theme or * not. * - notes: Identifies what context this theme is being used in, e.g., * default theme, admin theme. * - incompatible: Text describing any compatibility issues. * - operations: A list of operation links, e.g., Settings, Enable, Disable, * etc. these links should only be displayed if the theme is compatible. * - title_id: The unique id of the theme label. * - description_id: The unique id of the theme description. This is * undefined if the description is casted to an empty string. * * @see template_preprocess_system_themes_page() * @see claro_preprocess_system_themes_page() */#}<div{{ attributes }}> {% for theme_group in theme_groups %} {% set theme_group_classes = [ 'system-themes-list', 'system-themes-list--' ~ theme_group.state, 'clearfix', ] %} {% set card_alignment = theme_group.state == 'installed' ? 'horizontal' : 'vertical' %} {% if not loop.first %} <hr> {% endif %} <div{{ theme_group.attributes.addClass(theme_group_classes) }}> <h2 class="system-themes-list__header">{{ theme_group.title }}</h2> <div class="card-list {{ card_alignment == 'horizontal' ? 'card-list--two-cols' : 'card-list--four-cols' }}"> {% for theme in theme_group.themes %} {% set theme_classes = [ theme.is_default ? 'theme-default', theme.is_admin ? 'theme-admin', 'card', 'card--' ~ card_alignment, 'card-list__item', ] %} {% set theme_title_classes = [ 'card__content-item', 'heading-f', ] %} {% set theme_description_classes = [ 'card__content-item', ] %} <div{{ theme.attributes.addClass(theme_classes).setAttribute('aria-labelledby', theme.title_id).setAttribute('aria-describedby', theme.description_id ?: null) }}> {% if theme.screenshot %} <div class="card__image"> {{ theme.screenshot }} </div> {% endif %} <div class="card__content-wrapper"> <div class="card__content"> <h3{{ create_attribute({'id': theme.title_id}).addClass(theme_title_classes) }} id={{ theme.title_id }}> {{- theme.name }} {{ theme.version -}} {% if theme.notes %} ({{ theme.notes|safe_join(', ') }}) {%- endif -%} </h3> {% if theme.description and theme.description_id %} <div{{ create_attribute({'id': theme.description_id ?: null}).addClass(theme_description_classes) }}> {{ theme.description }} </div> {%- endif -%} </div> <div class="card__footer"> {# Display operation links only if the theme is compatible. #} {% if theme.incompatible %} <small class="incompatible">{{ theme.incompatible }}</small> {% else %} {{ theme.operations }} {% endif %} </div> </div> </div> {% endfor %} </div> </div> {% endfor %}</div> |
