From fd1b1826c27d76ed16bd0d143736e594ed55b887 Mon Sep 17 00:00:00 2001 From: rdrew Date: Tue, 17 Jun 2025 13:03:58 -0300 Subject: [PATCH] paragraph styles --- css/components/islandora_mods.css | 6 ++ js/mirador-mods.js | 4 +- ...h--field-contributor-description.html.twig | 81 +++++++++++++++++++ ...-field-contributor-name-and-role.html.twig | 81 +++++++++++++++++++ .../paragraph--contributor.html.twig | 57 +++++++++++++ 5 files changed, 227 insertions(+), 2 deletions(-) create mode 100755 templates/paragraphs/field--paragraph--field-contributor-description.html.twig create mode 100755 templates/paragraphs/field--paragraph--field-contributor-name-and-role.html.twig create mode 100644 templates/paragraphs/paragraph--contributor.html.twig diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index 1ee002d..6e99981 100755 --- a/css/components/islandora_mods.css +++ b/css/components/islandora_mods.css @@ -10,3 +10,9 @@ .mirador33 { width:2em !important; } +.paragraph--type--contributor { + display: flex; + .field { + margin-block-end: 0; + } +} diff --git a/js/mirador-mods.js b/js/mirador-mods.js index 00f4964..c321dfd 100755 --- a/js/mirador-mods.js +++ b/js/mirador-mods.js @@ -16,8 +16,8 @@ window.addEventListener("load", (event) => { searchPanelToggle.setAttribute("aria-label", "Expand sidebar"); searchPanelToggle.setAttribute("title", "Expand sidebar"); - searchPanelIcon.style.fontSize = "2.7em"; - searchPanelIcon.style.marginTop = "21px"; +// searchPanelIcon.style.fontSize = "2.7em"; +// searchPanelIcon.style.marginTop = "21px"; //fake click searchPanelToggle.click(); diff --git a/templates/paragraphs/field--paragraph--field-contributor-description.html.twig b/templates/paragraphs/field--paragraph--field-contributor-description.html.twig new file mode 100755 index 0000000..42a5d1c --- /dev/null +++ b/templates/paragraphs/field--paragraph--field-contributor-description.html.twig @@ -0,0 +1,81 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * + * @see template_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + label_display == 'inline' ? 'clearfix', + ] +%} +{% + set title_classes = [ + 'field__label', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} +  ({{ item.content }}) + {% endfor %} + + {% else %} + {% for item in items %} +  ({{ item.content }}) + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/templates/paragraphs/field--paragraph--field-contributor-name-and-role.html.twig b/templates/paragraphs/field--paragraph--field-contributor-name-and-role.html.twig new file mode 100755 index 0000000..1cfbd65 --- /dev/null +++ b/templates/paragraphs/field--paragraph--field-contributor-name-and-role.html.twig @@ -0,0 +1,81 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * + * @see template_preprocess_field() + */ +#} +{% + set classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + label_display == 'inline' ? 'clearfix', + ] +%} +{% + set title_classes = [ + 'field__label', + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} + +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/templates/paragraphs/paragraph--contributor.html.twig b/templates/paragraphs/paragraph--contributor.html.twig new file mode 100644 index 0000000..c651e1d --- /dev/null +++ b/templates/paragraphs/paragraph--contributor.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' + ] +%} +{% block paragraph %} + + {% block content %} + {{ content.field_contributor_name_and_role }} + {{ content.field_contributor_description }} + {% endblock %} + + +{% endblock paragraph %}