From 733d36e9f70be767b1404ce75d4913e761a82a1c Mon Sep 17 00:00:00 2001 From: orakili Date: Thu, 3 Aug 2023 23:22:16 +0000 Subject: [PATCH 01/59] feat: use node story card template for stories paragraph to display the date and featured Refs: UNO-757 --- .../custom/common_design_claro/css/styles.css | 16 ++++++++++++++++ .../content/node--story--card.html.twig | 1 + 2 files changed, 17 insertions(+) create mode 100644 html/themes/custom/common_design_claro/templates/content/node--story--card.html.twig diff --git a/html/themes/custom/common_design_claro/css/styles.css b/html/themes/custom/common_design_claro/css/styles.css index 82d4526c..33e14b9b 100644 --- a/html/themes/custom/common_design_claro/css/styles.css +++ b/html/themes/custom/common_design_claro/css/styles.css @@ -182,6 +182,22 @@ form .paragraph--view-mode--preview.paragraph--type--content-list .uno-stories__ form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card .node__content { min-width: 220px; } +form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card:first-child .uno-card__image { + max-width: 220px; +} +form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card:first-child .cd-card__container { + display: block; +} +form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-card__container { + padding: 0; +} +form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-card__footer { + padding: 0; + font-size: var(--font-size-h5); +} +form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-read-more { + display: none; +} /* Events. */ form .paragraph--view-mode--preview.paragraph--type--events .viewsreference--view-title { diff --git a/html/themes/custom/common_design_claro/templates/content/node--story--card.html.twig b/html/themes/custom/common_design_claro/templates/content/node--story--card.html.twig new file mode 100644 index 00000000..094fd657 --- /dev/null +++ b/html/themes/custom/common_design_claro/templates/content/node--story--card.html.twig @@ -0,0 +1 @@ +{% include '@common_design_subtheme/content/node--story--card.html.twig' %} From 3c9a8dc0d9a5f3c1b93b945904700c775cb81b2d Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 7 Aug 2023 14:06:32 +0200 Subject: [PATCH 02/59] chore: hide the view all link from Storie block on form Refs: UNO-757 --- html/themes/custom/common_design_claro/css/styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/html/themes/custom/common_design_claro/css/styles.css b/html/themes/custom/common_design_claro/css/styles.css index 33e14b9b..d596eadf 100644 --- a/html/themes/custom/common_design_claro/css/styles.css +++ b/html/themes/custom/common_design_claro/css/styles.css @@ -179,6 +179,9 @@ form .paragraph--view-mode--preview.paragraph--type--news-and-stories .uno-stori form .paragraph--view-mode--preview.paragraph--type--content-list .uno-stories__header { margin-bottom: 1rem; } +form .paragraph--view-mode--preview.paragraph--type--content-list .uno-stories__view_all { + display: none; +} form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card .node__content { min-width: 220px; } From 83ec574c7ab8eb78ca08b1ab987ce0462f6811c3 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 7 Aug 2023 17:23:09 +0200 Subject: [PATCH 03/59] chore: remove unused templates Refs: UNO-678 --- ...-responses-active-responses-menu.html.twig | 55 ------- .../templates/cd/cd-header/cd-ocha.html.twig | 10 -- ...agraph--field-photos--media-item.html.twig | 7 - .../navigation/menu--responses.html.twig | 47 ------ ...h--card-list--featured-highlight.html.twig | 36 ----- .../paragraphs/paragraph--card-list.html.twig | 28 ---- .../paragraphs/paragraph--card.html.twig | 52 ------- .../paragraph--content-list.html.twig | 58 -------- .../paragraph--datawrapper.html.twig | 56 ------- .../paragraph--figures--preview.html.twig | 55 ------- .../templates/uno/donors.html.twig | 139 ------------------ .../templates/uno/gho.html.twig | 34 ----- 12 files changed, 577 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/templates/blocks/block--views-block--responses-active-responses-menu.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/cd/cd-header/cd-ocha.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-photos--media-item.html.twig delete mode 100755 html/themes/custom/common_design_subtheme/templates/navigation/menu--responses.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list--featured-highlight.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--content-list.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--datawrapper.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--figures--preview.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/uno/donors.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/templates/uno/gho.html.twig diff --git a/html/themes/custom/common_design_subtheme/templates/blocks/block--views-block--responses-active-responses-menu.html.twig b/html/themes/custom/common_design_subtheme/templates/blocks/block--views-block--responses-active-responses-menu.html.twig deleted file mode 100644 index c83f1b5c..00000000 --- a/html/themes/custom/common_design_subtheme/templates/blocks/block--views-block--responses-active-responses-menu.html.twig +++ /dev/null @@ -1,55 +0,0 @@ -{# -/** - * @file - * Theme override 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. - * - 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() - */ -#} -{% - set classes = [ - 'block', - 'block-menu', - 'navigation', - 'menu--' ~ derivative_plugin_id|clean_class, - 'uno-nav' - ] -%} - -{% set heading_id = attributes.id ~ '-menu'|clean_id %} - -{{ attach_library('common_design_subtheme/uno-nav') }} - - diff --git a/html/themes/custom/common_design_subtheme/templates/cd/cd-header/cd-ocha.html.twig b/html/themes/custom/common_design_subtheme/templates/cd/cd-header/cd-ocha.html.twig deleted file mode 100644 index 99cff8eb..00000000 --- a/html/themes/custom/common_design_subtheme/templates/cd/cd-header/cd-ocha.html.twig +++ /dev/null @@ -1,10 +0,0 @@ -{% embed '@common_design/cd/cd-header/cd-ocha.html.twig' %} - - {% block related_platforms %} -
  • {{ 'This is Customizable'|t }}
    • -
  • {{ 'Customizable'|t }}
    • -
  • {{ 'Customizable'|t }}
    • -
  • {{ 'Customizable'|t }}
    • - {% endblock %} - -{% endembed %} diff --git a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-photos--media-item.html.twig b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-photos--media-item.html.twig deleted file mode 100644 index 96f0bfbc..00000000 --- a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-photos--media-item.html.twig +++ /dev/null @@ -1,7 +0,0 @@ -
    - {%- for item in items -%} -
    - {{ item.content }} -
    - {%- endfor -%} -
    diff --git a/html/themes/custom/common_design_subtheme/templates/navigation/menu--responses.html.twig b/html/themes/custom/common_design_subtheme/templates/navigation/menu--responses.html.twig deleted file mode 100755 index 1fe77ecc..00000000 --- a/html/themes/custom/common_design_subtheme/templates/navigation/menu--responses.html.twig +++ /dev/null @@ -1,47 +0,0 @@ -{# -/** - * @file - * Theme override to display a menu. - * - * Available variables: - * - menu_name: The machine name of the menu. - * - items: A nested list of menu items. Each menu item contains: - * - attributes: HTML attributes for the menu item. - * - below: The menu item child items. - * - title: The menu link title. - * - url: The menu link url, instance of \Drupal\Core\Url - * - localized_options: Menu link localized options. - * - is_expanded: TRUE if the link has visible children within the current - * menu tree. - * - is_collapsed: TRUE if the link has children within the current menu tree - * that are not currently visible. - * - in_active_trail: TRUE if the link is in the active trail. - */ -#} -{% import _self as menus %} - -{# - We call a macro which calls itself to render the full tree. - @see https://twig.symfony.com/doc/1.x/tags/macro.html -#} -{{ menus.menu_links(items, attributes, 0) }} - -{% macro menu_links(items, attributes, menu_level) %} - {% import _self as menus %} - {% if items %} - {% if menu_level == 0 %} - - {% else %} -
      - {% endif %} - {% for item in items %} - - {{ link(item.title, item.url) }} - {% if item.below %} - {{ menus.menu_links(item.below, attributes, menu_level + 1) }} - {% endif %} - - {% endfor %} -
    - {% endif %} -{% endmacro %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list--featured-highlight.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list--featured-highlight.html.twig deleted file mode 100644 index 308e555c..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list--featured-highlight.html.twig +++ /dev/null @@ -1,36 +0,0 @@ -{# -/** - * @file - * Display a Featured Highlight within the Card List. - * - * @overrides html/themes/custom/common_design_subtheme/templates/paragraph.html.twig - * - * @see template_preprocess_paragraph() - * - * @ingroup themeable - */ -#} -{{ attach_library('common_design_subtheme/uno-card')}} - -{% - set classes = [ - 'paragraph', - 'paragraph--type--' ~ paragraph.bundle|clean_class, - view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, - not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-card', - ] -%} -{% block paragraph %} - - {% block content %} - {% set destination = paragraph.field_destination.0.url %} - - {{ content.field_image }} -

    {{ content.field_title.0 }}

    -

    {{ content.field_text|render|striptags|trim }}

    - {{ 'View more'|t }} - - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list.html.twig deleted file mode 100644 index 4e5f9818..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card-list.html.twig +++ /dev/null @@ -1,28 +0,0 @@ -{# -/** - * @file - * Default theme implementation to display a paragraph. - * - * @overrides html/themes/custom/common_design_subtheme/templates/paragraph.html.twig - * - * @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', - paragraph.field_numcols.value ? 'paragraph--type--card-list--col-' ~ paragraph.field_numcols.value : 'paragraph--type--card-list--col-2', - ] -%} -{% block paragraph %} - - {% block content %} - {{ content }} - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card.html.twig deleted file mode 100644 index 90453473..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--card.html.twig +++ /dev/null @@ -1,52 +0,0 @@ -{# -/** - * @file - * Default theme implementation to display a Featured Highlight paragraph. - * - * @overrides html/themes/custom/common_design_subtheme/templates/paragraph.html.twig - * - * @see template_preprocess_paragraph() - * - * @ingroup themeable - */ -#} -{{ attach_library('common_design_subtheme/uno-card')}} - -{% - set classes = [ - 'paragraph', - 'paragraph--type--' ~ paragraph.bundle|clean_class, - view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, - not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-card', - ] -%} - -{% block paragraph %} - - {% block content %} - {% set destination = paragraph.field_card_link.0.url %} -
    -
    - {% if destination %} - {{ content.field_card_title }} - {% else %} - {{ content.field_card_title }} - {% endif %} -
    -
    - {{ content|without('field_card_link', 'field_card_title') }} - {% if destination %} - - {{ 'View more'|t }} - - - {% endif %} -
    -
    - {#
    - {{ content.field_image }} -
    #} - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--content-list.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--content-list.html.twig deleted file mode 100644 index 0f6851e0..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--content-list.html.twig +++ /dev/null @@ -1,58 +0,0 @@ -{# -/** - * @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' - ] -%} - -{{ attach_library('common_design_subtheme/cd-cards')}} - -{% block paragraph %} - - {% block content %} - {{ content }} - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--datawrapper.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--datawrapper.html.twig deleted file mode 100644 index 83e7562b..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--datawrapper.html.twig +++ /dev/null @@ -1,56 +0,0 @@ -{# -/** - * @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|without('field_datawrapper_embed') }} - - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--figures--preview.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--figures--preview.html.twig deleted file mode 100644 index fa3ba93f..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--figures--preview.html.twig +++ /dev/null @@ -1,55 +0,0 @@ -{# -/** - * @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 }} - {% endblock %} - -{% endblock paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/uno/donors.html.twig b/html/themes/custom/common_design_subtheme/templates/uno/donors.html.twig deleted file mode 100644 index 4f2b48fe..00000000 --- a/html/themes/custom/common_design_subtheme/templates/uno/donors.html.twig +++ /dev/null @@ -1,139 +0,0 @@ -{{ attach_library('common_design_subtheme/uno-donors') }} - -
    -

    Top donors

    -
    -
    -
    Japan
    -
    $28.9 million (36.3%)
    -
    -
    -
    United States of America
    -
    $9.6 million (12.1%)
    -
    -
    -
    Sweden
    -
    $8.6 million (10.8%)
    -
    -
    -
    Germany
    -
    $8.5 million (10.7%)
    -
    -
    -
    Ausdlalia
    -
    $6.1 million (7.7%)
    -
    -
    -
    - -
    -

    Top funded sectors

    -
    -
    -
    Food Security
    -
    $17.5 million
    -
    -
    -
    Protection
    -
    $15.9 million
    -
    -
    -
    Not specified
    -
    $12.1 million
    -
    -
    -
    Coordination and Support Services
    -
    $6.2 million
    -
    -
    -
    Education
    -
    $4.7 million
    -
    -
    -
    - -
    -

    Top donors

    -
    -
    -
    - Australia - (paid) -
    -
    $4.2 million
    -
    -
    -
    - Canada - (paid) -
    -
    $6.1 million
    -
    -
    -
    - Sweden - (pledged) -
    -
    $1.5 million
    -
    -
    -
    - Switzerland - (paid) -
    -
    $538.2 thousand
    -
    -
    -
    - Ireland - (paid) -
    -
    $529.7 thousand
    -
    -
    -
    - -
    -

    Earmarked donors

    -
    -
    -
    Canada
    -
    $148.9 thousand
    -
    -
    -
    Protection
    -
    $535.9 thousand
    -
    -
    -
    Sweden (SIDA)
    -
    $192.1 thousand
    -
    -
    -
    - -
    -

    Unearmarked donors

    -
      -
    • Australia
      • -
    • Belgium
      • -
    • Canada
      • -
    • Estonia
      • -
    • Finland
      • -
    • France
      • -
    • Germany
      • -
    • Iceland
      • -
    • Ireland
      • -
    • Japan
      • -
    • Luxembourg
      • -
    • Monaco
      • -
    • Netherlands
      • -
    • New Zealand
      • -
    • Norway
      • -
    • Private Contributions
      • -
    • Russian Federation
      • -
    • South Africa
      • -
    • Sweden
      • -
    • Switzerland
      • -
    • United Kingdom
      • -
    -
    diff --git a/html/themes/custom/common_design_subtheme/templates/uno/gho.html.twig b/html/themes/custom/common_design_subtheme/templates/uno/gho.html.twig deleted file mode 100644 index db489209..00000000 --- a/html/themes/custom/common_design_subtheme/templates/uno/gho.html.twig +++ /dev/null @@ -1,34 +0,0 @@ -{{ attach_library('common_design_subtheme/uno-gho') }} - -{% set url ='https://humanitarianaction.info/gho2023' %} - -
    -
    -
    -

    {% trans %}GHO 2023{% endtrans %}

    -

    {% trans %}Global Humanitarian Overview is an annual assessment of global humanitarian needs and the resources required to respond to them.{% endtrans %} -

    - - {% trans %}Learn more{% endtrans %} - - -
    -
    -
    {% trans %}339M{% endtrans %}
    -
    {% trans %}People in need{% endtrans %}
    -
    -
    -
    {% trans %}230M{% endtrans %}
    -
    {% trans %}People targeted{% endtrans %}
    -
    -
    -
    {% trans %}51.5B{% endtrans %}
    -
    {% trans %}Requirements (US$){% endtrans %}
    -
    -
    -
    {% trans %}Top donors in 2022{% endtrans %}
    -
    -
    -
    From 9fb3a21f97658cf2b00dc138abfc8e75273d8df8 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 7 Aug 2023 17:24:16 +0200 Subject: [PATCH 04/59] chore: update template with comments, remove unused libraries or those better attached globally, translation tags Refs: UNO-678 --- .../cd/cd-footer/cd-social-menu.html.twig | 10 +++++----- .../content/media-oembed-iframe.html.twig | 2 ++ .../content/node--basic--card.html.twig | 9 +++------ .../content/node--basic--full.html.twig | 12 +++--------- .../content/node--basic--teaser.html.twig | 9 +++------ .../templates/content/node--campaign.html.twig | 10 +++------- .../templates/content/node--card.html.twig | 17 +++++------------ .../content/node--event--card.html.twig | 9 +++------ .../content/node--event--full.html.twig | 11 +++-------- .../content/node--event--teaser.html.twig | 9 +++------ .../content/node--front--basic--full.html.twig | 12 +++--------- .../templates/content/node--full.html.twig | 11 +++-------- .../content/node--leader--full.html.twig | 11 +++-------- .../content/node--leader--teaser.html.twig | 9 +++------ .../content/node--leader--title.html.twig | 9 +++------ .../node--media-collection--card.html.twig | 10 +++------- .../node--media-collection--full.html.twig | 12 +++--------- .../node--media-collection--teaser.html.twig | 9 +++------ .../content/node--region--card.html.twig | 9 +++------ .../content/node--region--full.html.twig | 11 +++-------- .../content/node--region--teaser.html.twig | 9 +++------ .../content/node--response--card.html.twig | 12 +++--------- .../content/node--response--full.html.twig | 11 +++-------- .../content/node--response--map.html.twig | 3 ++- .../content/node--story--full.html.twig | 2 -- .../templates/content/node--teaser.html.twig | 3 --- .../field--paragraph--field-text.html.twig | 1 - .../field--paragraph--field-title.html.twig | 3 +-- .../ocha_search/ocha-search-block.html.twig | 2 +- ...unocha-donors-list--oct-top-donors.html.twig | 1 - .../paragraph--call-to-action.html.twig | 1 - ...ews-view-unformatted--media-centre.html.twig | 2 -- 32 files changed, 76 insertions(+), 175 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-social-menu.html.twig b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-social-menu.html.twig index 5033a7c3..b830b12f 100644 --- a/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-social-menu.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-social-menu.html.twig @@ -3,7 +3,7 @@
    • - +
    • - +
    • - +
    • - +
    • - + + {# Overflow control is set inline to prevent vertical scroll on

      {{ label }}

      diff --git a/html/themes/custom/common_design_subtheme/templates/content/node--response--full.html.twig b/html/themes/custom/common_design_subtheme/templates/content/node--response--full.html.twig index 43d0d18f..c8f71715 100644 --- a/html/themes/custom/common_design_subtheme/templates/content/node--response--full.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/content/node--response--full.html.twig @@ -15,7 +15,7 @@ * Calling other methods, such as node.delete(), will result in an exception. * See \Drupal\node\Entity\Node for a full list of public properties and * methods for the node object. - * - label: (optional) The title of the node. + * - label: The title of the node. * - content: All node 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 @@ -23,8 +23,8 @@ * - author_picture: The node author user entity, rendered using the "compact" * view mode. * - metadata: Metadata for this node. - * - date: (optional) Themed creation date field. - * - author_name: (optional) Themed author name field. + * - date: Themed creation date field. + * - author_name: Themed author name field. * - url: Direct URL of the current node. * - display_submitted: Whether submission information should be displayed. * - attributes: HTML attributes for the containing element. @@ -65,9 +65,6 @@ * * @see template_preprocess_node() * - * @todo Remove the id attribute (or make it a class), because if that gets - * rendered twice on a page this is invalid CSS for example: two lists - * in different view modes. */ #} {% @@ -83,8 +80,6 @@ %} {{ attach_library('common_design/cd-article') }} {{ attach_library('common_design/cd-bleed') }} -{{ attach_library('common_design/cd-typography') }} -{{ attach_library('common_design_subtheme/uno-social-links') }} {% set unochaDate = node.getCreatedTime|date('j F Y') %} diff --git a/html/themes/custom/common_design_subtheme/templates/content/node--response--map.html.twig b/html/themes/custom/common_design_subtheme/templates/content/node--response--map.html.twig index 0d56423d..1ba54b90 100644 --- a/html/themes/custom/common_design_subtheme/templates/content/node--response--map.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/content/node--response--map.html.twig @@ -75,7 +75,8 @@ node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, - 'uno-card cd-card' + 'uno-card', + 'cd-card' ] %} {{ attach_library('common_design/cd-card') }} diff --git a/html/themes/custom/common_design_subtheme/templates/content/node--story--full.html.twig b/html/themes/custom/common_design_subtheme/templates/content/node--story--full.html.twig index 736bae7f..56744c07 100644 --- a/html/themes/custom/common_design_subtheme/templates/content/node--story--full.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/content/node--story--full.html.twig @@ -84,8 +84,6 @@ {{ attach_library('common_design/cd-article') }} {{ attach_library('common_design/cd-bleed') }} -{{ attach_library('common_design/cd-typography') }} -{{ attach_library('common_design_subtheme/uno-social-links') }} {% set unochaDate = node.getCreatedTime|date('j F Y') %} diff --git a/html/themes/custom/common_design_subtheme/templates/content/node--teaser.html.twig b/html/themes/custom/common_design_subtheme/templates/content/node--teaser.html.twig index abed9e9a..894b0f77 100644 --- a/html/themes/custom/common_design_subtheme/templates/content/node--teaser.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/content/node--teaser.html.twig @@ -83,10 +83,7 @@ %} {{ attach_library('common_design/cd-flow') }} -{{ attach_library('common_design/cd-utilities') }} -{{ attach_library('common_design/cd-typography') }} {{ attach_library('common_design/cd-button') }} -{{ attach_library('common_design/cd-read-more') }} {{ attach_library('common_design/cd-teaser') }} diff --git a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig index d8bb75ad..89e0bbaa 100644 --- a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig @@ -9,7 +9,6 @@ */ #} {{ attach_library('common_design/cd-table') }} -{{ attach_library('common_design_subtheme/hri-text-block') }} {% set classes = [ diff --git a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-title.html.twig b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-title.html.twig index 3995595a..62f430f2 100644 --- a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-title.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-title.html.twig @@ -27,6 +27,5 @@ {{ attach_library('common_design/cd-block-title') }} {% for item in items %} -{{ item.content }} - + {{ item.content }} {% endfor %} diff --git a/html/themes/custom/common_design_subtheme/templates/modules/ocha_search/ocha-search-block.html.twig b/html/themes/custom/common_design_subtheme/templates/modules/ocha_search/ocha-search-block.html.twig index d23dd488..f2dca7e6 100644 --- a/html/themes/custom/common_design_subtheme/templates/modules/ocha_search/ocha-search-block.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/modules/ocha_search/ocha-search-block.html.twig @@ -12,7 +12,7 @@ - + diff --git a/html/themes/custom/common_design_subtheme/templates/modules/unocha_donors/unocha-donors-list--oct-top-donors.html.twig b/html/themes/custom/common_design_subtheme/templates/modules/unocha_donors/unocha-donors-list--oct-top-donors.html.twig index f06edcf0..9742ab20 100644 --- a/html/themes/custom/common_design_subtheme/templates/modules/unocha_donors/unocha-donors-list--oct-top-donors.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/modules/unocha_donors/unocha-donors-list--oct-top-donors.html.twig @@ -22,7 +22,6 @@ #} {% if list is not empty %} {{ attach_library('common_design_subtheme/uno-donors') }} -{{ attach_library('common_design/cd-block-title') }} {% set title = year ? 'OCHA donors in @year'|t({'@year': year}) : 'OCHA donors'|t %} {% set title_id = id ~ '-title' %} {% set list_id = id ~ '-list' %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--call-to-action.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--call-to-action.html.twig index 915cb9f6..6bf8f50c 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--call-to-action.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--call-to-action.html.twig @@ -14,7 +14,6 @@ {{ attach_library('common_design_subtheme/uno-cta') }} {{ attach_library('common_design/cd-bleed') }} - {% set classes = [ 'paragraph', diff --git a/html/themes/custom/common_design_subtheme/templates/views/views-view-unformatted--media-centre.html.twig b/html/themes/custom/common_design_subtheme/templates/views/views-view-unformatted--media-centre.html.twig index 795f680e..4277203b 100644 --- a/html/themes/custom/common_design_subtheme/templates/views/views-view-unformatted--media-centre.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/views/views-view-unformatted--media-centre.html.twig @@ -15,8 +15,6 @@ * @see template_preprocess_views_view_unformatted() */ #} -{{ attach_library('common_design_subtheme/uno-card-list')}} - {% if title %}

      {{ title }}

      {% endif %} From 8f976dc60a7660119fe66a32b9a0b2fcf2db21a8 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 7 Aug 2023 18:05:59 +0200 Subject: [PATCH 05/59] style: typo Refs: UNO-678 --- .../common_design_subtheme.libraries.yml | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 94633486..eef27331 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -10,8 +10,11 @@ global-styling: css/brand.css: {} dependencies: - common_design_subtheme/uno-card-list + - common_design_subtheme/cd-article + - common_design_subtheme/cd-typography - common_design_subtheme/cd - common_design/cd-read-more + - common_design/cd-block-title ### # Define Drupal libraries for your custom components. @@ -168,28 +171,11 @@ uno-donors: theme: components/uno-donors/uno-donors.css: {} -uno-embed: - css: - component: - components/uno-embed/uno-embed.css: {} - js: - components/uno-embed/uno-embed.js: {} - -uno-event-date: - css: - theme: - components/uno-event-date/uno-event-date.css: {} - uno-figures: css: theme: components/uno-figures/uno-figures.css: {} -uno-gho: - css: - theme: - components/uno-gho/uno-gho.css: {} - uno-layout: css: theme: @@ -227,11 +213,6 @@ uno-river: theme: components/uno-river/uno-river.css: {} -uno-rss-feed: - css: - theme: - components/uno-rss-feed/uno-rss-feed.css: {} - uno-subscribe: css: theme: From ff1953a9d661d8ebcd5ad047c949237ad2d94e39 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 7 Aug 2023 18:07:50 +0200 Subject: [PATCH 06/59] refactor: remove unused components Refs: UNO-678 --- .../components/cd-banner/README.md | 23 --- .../components/cd-banner/cd-banner.css | 85 --------- .../components/cd-banner/cd-banner.html.twig | 28 --- .../components/cd-byline/README.md | 19 -- .../components/cd-byline/cd-byline.css | 47 ----- .../components/cd-byline/cd-byline.html.twig | 19 -- .../components/cd-event/README.md | 20 -- .../components/cd-event/cd-event.css | 19 -- .../components/cd-event/cd-event.html.twig | 171 ------------------ .../uno-embed/paragraph--embed.html.twig | 82 --------- .../components/uno-embed/uno-embed.css | 22 --- .../components/uno-embed/uno-embed.js | 15 -- .../components/uno-event-date/README.md | 4 - .../uno-event-date/uno-event-date.css | 15 -- .../components/uno-gho/uno-gho.css | 95 ---------- .../components/uno-rss-feed/uno-rss-feed.css | 16 -- 16 files changed, 680 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-banner/README.md delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.css delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-byline/README.md delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.css delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-event/README.md delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-event/cd-event.css delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-event/cd-event.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-embed/paragraph--embed.html.twig delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.css delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.js delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-event-date/README.md delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-event-date/uno-event-date.css delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-gho/uno-gho.css delete mode 100644 html/themes/custom/common_design_subtheme/components/uno-rss-feed/uno-rss-feed.css diff --git a/html/themes/custom/common_design_subtheme/components/cd-banner/README.md b/html/themes/custom/common_design_subtheme/components/cd-banner/README.md deleted file mode 100644 index c04dcb0e..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-banner/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Banner - -## Purpose and Usage -Provides a letterbox image to visually augment pages or separate sections. - -- image - -Use with cd-caption component for image caption and/or image credits. - -Use with cd-bleed component for full viewport width option. - -@TODO use srcset with good defaults, and add note about Responsive image module in Drupal and its config. - -## Caveats -Image uses object-fit and object-position when supported, otherwise a fallback -technique using absolute positioning and transform is used. - -### Variants - -``` -none - -``` diff --git a/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.css b/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.css deleted file mode 100644 index 81fc13c0..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.css +++ /dev/null @@ -1,85 +0,0 @@ -/** - * CD Banner - */ - -.cd-banner { - position: relative; - overflow: hidden; - height: 24rem; /* 384px */ - text-align: center; -} - -.cd-banner__image { - display: block; - width: 100%; - max-width: 100%; - height: 24rem; /* 384px */ -} - -@supports (object-fit: cover) { - .cd-banner__image { - object-fit: cover; - object-position: 50% 50%; - } -} - -@media screen and (min-width: 1024px) { - .cd-banner__image { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - @supports (object-fit: cover) { - .cd-banner__image { - top: 0; - left: 0; - transform: none; - } - } -} - -/* For IE11 */ -@media all and (-ms-high-contrast: none) { - .cd-banner__image { - height: auto; - } - - .cd-bleed--background-only .cd-banner__image { - width: auto; - } -} - -/* Microsoft Edge Browser 15+ - @supports method */ -@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) { - .cd-banner__image { - height: auto; - } - - .cd-bleed--background-only .cd-banner__image { - width: auto; - } - /* Exclude for Edge 16+ */ - @supports (object-fit: cover) { - .cd-banner__image { - height: inherit; - } - } -} - -@media screen and (min-width: 1200px) { - @supports (object-fit: cover) { - .cd-banner__image { - object-fit: none; - } - - .cd-bleed .cd-banner__image { - object-fit: cover; - } - - .cd-bleed--background-only .cd-banner__image { - object-fit: none; - } - } -} diff --git a/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.html.twig b/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.html.twig deleted file mode 100644 index 406236e8..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-banner/cd-banner.html.twig +++ /dev/null @@ -1,28 +0,0 @@ -{{ attach_library('common_design/cd-banner') }} -{{ attach_library('common_design/cd-caption') }} -{{ attach_library('common_design/cd-bleed') }} - -
      - banner placeholder -
      -
      - Cras molestie risus a enim convallis vitae luctus libero lacinia -
      - -
      -
      - banner placeholder -
      -
      - Cras molestie risus a enim convallis vitae luctus libero lacinia -
      - -
      - -
      - banner placeholder -
      -
      - Cras molestie risus a enim convallis vitae luctus libero lacinia -
      - diff --git a/html/themes/custom/common_design_subtheme/components/cd-byline/README.md b/html/themes/custom/common_design_subtheme/components/cd-byline/README.md deleted file mode 100644 index 6db09ba8..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-byline/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# Author byline - -## Purpose and Usage -Author information to accompany articles. - -- image -- name -- byline - -## Caveats -- Image needs to be square for `image--rounded` to work well -- Image has fixed width and height, currently 4rem - -### Variants - -``` -none - -``` diff --git a/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.css b/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.css deleted file mode 100644 index 22c194c8..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.css +++ /dev/null @@ -1,47 +0,0 @@ -/** - * CD Byline - */ - -.cd-byline { - --cd-byline-spacing: 2rem; - - margin-top: var(--cd-byline-spacing); -} - -/** - * The border is not on the container itself due to potential left/right padding - * values that can interfere. Ex: when it has the `content-width` class. - */ -.cd-byline::after { - display: block; - padding-bottom: var(--cd-byline-spacing); - content: ""; - border-bottom: 1px solid var(--brand-grey); -} - -.cd-byline__wrapper { - display: flex; -} - -.cd-byline__image { - flex: 0 0 4rem; - width: 4rem; - height: 4rem; - margin: 0; -} - -.cd-byline__image img { - width: 100%; - height: 4rem; -} - -@supports (object-fit: cover) { - .cd-byline__image img { - object-fit: cover; - object-position: 50% 50%; - } -} - -.cd-byline__name { - font-weight: 700; -} diff --git a/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.html.twig b/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.html.twig deleted file mode 100644 index 9fb77dd1..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-byline/cd-byline.html.twig +++ /dev/null @@ -1,19 +0,0 @@ -{{ attach_library('common_design/cd-utilities') }} -{{ attach_library('common_design/cd-flow') }} -{{ attach_library('common_design/cd-typography') }} -{{ attach_library('common_design/cd-byline') }} - -
      -
      - -
      - Mark Lowcock -
      - -
      -
      Mark Lowcock
      - -
      Under-Secretary-General for Humanitarian Affairs and Emergency Relief Coordinator, United Nations
      -
      -
      -
      diff --git a/html/themes/custom/common_design_subtheme/components/cd-event/README.md b/html/themes/custom/common_design_subtheme/components/cd-event/README.md deleted file mode 100644 index a5533c5b..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-event/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# Event - -## Purpose and Usage -Use with the cd-date and cd-grid components for a visually appealing Event -teaser. - -Replace the title heading tag with the semantic level based on the other headings on the page. - -@TODO add time and location icons. - -## Caveats -Add `cd-card__date--event` class on the `cd-card__date` element to use the date -in card layout. - -### Variants - -``` -none - -``` diff --git a/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.css b/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.css deleted file mode 100644 index 508ca765..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.css +++ /dev/null @@ -1,19 +0,0 @@ -/** - * CD Event - */ - -*[class*="--event"] { - margin: 1rem auto 0; -} - -/* IE11 fix width to align center */ -@media all and (-ms-high-contrast: none) { - *[class*="--event"] { - width: 5.5rem; - } -} - -*[class*="__location"], -*[class*="__time"] { - font-weight: 700; -} diff --git a/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.html.twig b/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.html.twig deleted file mode 100644 index 22365c45..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-event/cd-event.html.twig +++ /dev/null @@ -1,171 +0,0 @@ -{{ attach_library('common_design/cd-grid') }} -{{ attach_library('common_design/cd-flow') }} -{{ attach_library('common_design/cd-utilities') }} -{{ attach_library('common_design/cd-typography') }} -{{ attach_library('common_design/cd-button') }} -{{ attach_library('common_design/cd-read-more') }} -{{ attach_library('common_design/cd-card') }} -{{ attach_library('common_design/cd-date') }} -{{ attach_library('common_design/cd-event') }} - -
      - - - - -
      - -
      -
      -
      - 30 -
      -
      - Jul - 2020 -
      -
      -
      - -
      - -
      - Event title -
      - -
      - Location -
      - -
      - Time: 16:00 to 17:00 -
      - -
      -

      Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Nulla auctor eleifend turpis consequat pharetra. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec a congue leo?

      -
      - -
      - -
      - - Learn more - - -
      - -
      - - -
      - -
      -
      -
      - 18-20 -
      -
      - Jun - 2020 -
      -
      -
      - -
      - -
      -

      Sed dapibus lectus sit amet adipiscing egestas mauris est viverra nibh

      -
      - -
      -

      Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Nulla auctor eleifend turpis consequat pharetra. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec a congue leo?

      -
      - -
      - -
      - - More - -
      - -
      - - - - - - -
      diff --git a/html/themes/custom/common_design_subtheme/components/uno-embed/paragraph--embed.html.twig b/html/themes/custom/common_design_subtheme/components/uno-embed/paragraph--embed.html.twig deleted file mode 100644 index 17766e34..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-embed/paragraph--embed.html.twig +++ /dev/null @@ -1,82 +0,0 @@ -{# -/** - * @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' -] -%} - -{% set videoURL = content.field_embed_url.0['#context']['value'] %} - -{% block paragraph %} - - - {% block content %} - - {{ content.field_title }} - {{ content.field_text }} - - {% if videoURL %} - - {% else %} - -
      - 11 crises to watch in 2023 - by - UN Humanitarian - on - Exposure - {% endif %} - - {% endblock %} - - -{% endblock paragraph %} - diff --git a/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.css b/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.css deleted file mode 100644 index ab2d1673..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.css +++ /dev/null @@ -1,22 +0,0 @@ -/** - * HR.info customizations to iFrame Paragraphs. - */ -.hri-iframe { - width: 100%; -} - -.hri-iframe--ratio-16-9 { - aspect-ratio: 16 / 9; -} - -.hri-iframe--ratio-4-3 { - aspect-ratio: 4 / 3; -} - -/* JS will handle this case */ -/* .hri-iframe--ratio-auto {} */ - -.hri-iframe__iframe { - width: 100%; - height: 100%; -} diff --git a/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.js b/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.js deleted file mode 100644 index b61a6d48..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-embed/uno-embed.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * HR.info iFrame embeds. - */ -(function iife() { - var autoIframes = document.querySelectorAll('.hri-iframe--ratio-auto'); - - // Did we find iframes with the 'auto' aspect-ratio setting? - if (autoIframes) { - // For every iframe found, set its CSS aspect-ratio using the attributes - // on the container element: data-width, data-height. - autoIframes.forEach(function (el) { - el.style.aspectRatio = el.dataset.width +' / '+ el.dataset.height; - }); - } -})(); diff --git a/html/themes/custom/common_design_subtheme/components/uno-event-date/README.md b/html/themes/custom/common_design_subtheme/components/uno-event-date/README.md deleted file mode 100644 index 16ede196..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-event-date/README.md +++ /dev/null @@ -1,4 +0,0 @@ -UNOCHA Event Date -================= - -This component provides styling for the event dates. diff --git a/html/themes/custom/common_design_subtheme/components/uno-event-date/uno-event-date.css b/html/themes/custom/common_design_subtheme/components/uno-event-date/uno-event-date.css deleted file mode 100644 index d980bf13..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-event-date/uno-event-date.css +++ /dev/null @@ -1,15 +0,0 @@ -.uno-event-date { - display: block; -} -.uno-event-date__wrapper { - display: block; -} -.uno-event-date__label { - display: inline; -} -.uno-event-date__date { - display: inline; -} -.uno-event-date__time { - display: inline; -} diff --git a/html/themes/custom/common_design_subtheme/components/uno-gho/uno-gho.css b/html/themes/custom/common_design_subtheme/components/uno-gho/uno-gho.css deleted file mode 100644 index 2b21f56b..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-gho/uno-gho.css +++ /dev/null @@ -1,95 +0,0 @@ -/** Copied from - https: //github.com/UN-OCHA/gho-2022-site/blob/develop/html/themes/custom/common_design_subtheme/components/gho-needs-and-requirements/gho-needs-and-requirements.css - with some adjustments -*/ - -.gho-needs-and-requirements { - padding-bottom: 2rem; -} - -.gho-needs-and-requirements-figure { - padding: 0 0 1rem; -} - -.gho-needs-and-requirements-figure:last-child { - padding-right: 0; - padding-bottom: 0; -} - -.gho-needs-and-requirements-figure__label { - font-size: 1rem; - font-weight: bold; -} - -.gho-needs-and-requirements-figure__label small { - font-size: inherit; - font-weight: normal; -} - -.gho-needs-and-requirements-figure__value { - color: var(--brand-primary); - font-size: 1.625rem; - font-weight: bold; -} - -@media screen and (min-width: 768px) { - .gho-needs-and-requirements { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding-top: 2rem; - } - - .gho-needs-and-requirements-figure { - display: inline-block; - flex-basis: 33%; - flex-grow: 1; - flex-shrink: 0; - padding: 0 1.5rem 2rem 0; - } - - [dir="ltr"] .gho-needs-and-requirements-figure:first-child { - padding-left: 0; - } - - [dir="rtl"] .gho-needs-and-requirements-figure:first-child { - padding-right: 0; - } - - [dir="rtl"] .gho-needs-and-requirements-figure:last-child { - border-width: 0; - } - - .gho-needs-and-requirements-figure__label { - font-size: 1.125rem; - } - - .gho-needs-and-requirements-figure__value { - font-size: 2rem; - } -} - -@media screen and (min-width: 1024px) { - .gho-needs-and-requirements-figure__value { - font-size: 2.25rem; - } - - .gho-needs-and-requirements-figure { - flex-basis: 20%; - padding: 0 1.5rem 0 0; - } -} - -.gho-heading { - margin-bottom: 0; - color: var(--brand-primary); -} - -.gho-content p { - font-size: var(--cd-font-size--small); -} - -.gho-content .cd-read-more { - text-decoration: none; - color: black; -} diff --git a/html/themes/custom/common_design_subtheme/components/uno-rss-feed/uno-rss-feed.css b/html/themes/custom/common_design_subtheme/components/uno-rss-feed/uno-rss-feed.css deleted file mode 100644 index 6800826e..00000000 --- a/html/themes/custom/common_design_subtheme/components/uno-rss-feed/uno-rss-feed.css +++ /dev/null @@ -1,16 +0,0 @@ -/** - * UNO customizations for RSS feed paragraphs. - */ -.uno-rss-feed h3 { - margin-bottom: 0; - font-size: var(--cd-font-size--base); -} - -.uno-rss-feed ul { - margin: 1em 0 2rem; - padding-inline-start: 1rem; -} - -.uno-rss-feed ul li + li { - margin-top: 0.75rem; -} From 30de10af408327a8510d9b10a9d58f68831e53c4 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 13:14:04 +0200 Subject: [PATCH 07/59] refactor: delete another unused paragraph template Refs: UNO-678 --- .../paragraphs/paragraph--rss-feed.html.twig | 147 ------------------ 1 file changed, 147 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--rss-feed.html.twig diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--rss-feed.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--rss-feed.html.twig deleted file mode 100644 index 39bd8f2e..00000000 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--rss-feed.html.twig +++ /dev/null @@ -1,147 +0,0 @@ -{# -/** - * @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' - ] -%} -{{ attach_library('common_design_subtheme/cd-button') }} -{{ attach_library('common_design_subtheme/uno-rss-feed') }} - -{% block paragraph %} - - {{ content.field_title}} - {{ content.field_text}} - - {#
      -
        - {% for item in items %} -
      • -
        -

        - {% if options.display_date %}{{ item.date|date('d-M-Y') }} - {% endif %} - {{ item.title }} - -

        -
        - - {% if options.display_description %} - {% if item.description|length > 0 %} - {% if options.display_each_item_full %} -
        - {{ item.description|striptags|raw }} -
        - {% else %} -
        - {{ item.description|striptags|slice(0, 200)|raw }} -
        - {% endif %} - {% endif %} - {% endif %} -
        • - {% endfor %} -
      - - {% if read_more %} -
      - - {{ 'View all updates'|t }} - - -
      - {% endif %} -
      #} - -
      -
      - - - - - - -{% endblock paragraph %} - From 16982474fb0e85085acceeb03152dfc261f4f5f9 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 13:16:13 +0200 Subject: [PATCH 08/59] refactor: remove class paragraph--type--content-list, todos in comments, and associated CSS selectors in favour of paragraph type selectors Refs: UNO-678 --- .../uno-card-list/uno-card-list.css | 6 +---- .../common_design_subtheme/css/styles.css | 27 +++++-------------- .../paragraphs/paragraph--events.html.twig | 8 +----- .../paragraph--media-centre.html.twig | 3 +-- .../paragraphs/paragraph--regions.html.twig | 8 +----- .../paragraphs/paragraph--responses.html.twig | 8 +----- 6 files changed, 11 insertions(+), 49 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/components/uno-card-list/uno-card-list.css b/html/themes/custom/common_design_subtheme/components/uno-card-list/uno-card-list.css index f506c718..bc0448a2 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-card-list/uno-card-list.css +++ b/html/themes/custom/common_design_subtheme/components/uno-card-list/uno-card-list.css @@ -1,5 +1,5 @@ /** - * Card List + * UNO Card List * */ @@ -9,7 +9,6 @@ } .paragraph--type--node.paragraph--view-mode--cards .field--name-field-node, -.paragraph--type--content-list.paragraph--view-mode--cards .view .view-content, .view-stories .view-content, .uno-stories .uno-stories__content, .view-events .view-content, @@ -26,7 +25,6 @@ gap: 0 var(--uno-card-list-gap-size); } .paragraph--type--node.paragraph--view-mode--cards .field--name-field-node article, -.paragraph--type--content-list.paragraph--view-mode--cards article, .view-stories .view-content article, .uno-stories .uno-stories__content article, .view-events .view-content article, @@ -41,7 +39,6 @@ @media screen and (min-width: 480px) { .paragraph--type--node.paragraph--view-mode--cards .field--name-field-node, - .paragraph--type--content-list.paragraph--view-mode--cards .view .view-content, .view-stories .view-content, .uno-stories .uno-stories__content, .view-events .view-content, @@ -56,7 +53,6 @@ @media screen and (min-width: 750px) { .paragraph--type--node.paragraph--view-mode--cards .field--name-field-node, - .paragraph--type--content-list.paragraph--view-mode--cards .view .view-content, .view-stories .view-content, .uno-stories .uno-stories__content, .view-events .view-content, diff --git a/html/themes/custom/common_design_subtheme/css/styles.css b/html/themes/custom/common_design_subtheme/css/styles.css index d5563a65..139d36c9 100644 --- a/html/themes/custom/common_design_subtheme/css/styles.css +++ b/html/themes/custom/common_design_subtheme/css/styles.css @@ -91,11 +91,6 @@ margin-bottom: 2rem; } -/* .node--view-mode-full .paragraph .field--name-field-title, -.viewsreference--view-title { - margin-bottom: 1rem; -} */ - .node--view-mode-full .field--name-field-text, .node--type-event.node--view-mode-full .uno-event__link { margin-bottom: 2rem; @@ -146,7 +141,9 @@ .paragraph--type--node, .paragraph--type--section.paragraph--view-mode--default, .paragraph--type--section.paragraph--view-mode--tabs, -.paragraph--type--content-list, +.paragraph--type--events, +.paragraph--type--regions, +.paragraph--type--responses, .paragraph--type--stories, .paragraph--type--reliefweb-document, .paragraph--type--subscribe, @@ -167,7 +164,9 @@ .paragraph--type--node, .paragraph--type--section.paragraph--view-mode--default, .paragraph--type--section.paragraph--view-mode--tabs, - .paragraph--type--content-list, + .paragraph--type--events, + .paragraph--type--regions, + .paragraph--type--responses, .paragraph--type--stories, .paragraph--type--subscribe, .paragraph--type--cbpf, @@ -249,12 +248,6 @@ margin-bottom: 2rem; } -/* @media screen and (min-width: 768px) { - .paragraph--type--layout + .paragraph--type--layout { - margin-bottom: 6rem; - } -} */ - /* Donors followed by Donors */ @media screen and (min-width: 768px) { .paragraph--type--donors + .paragraph--type--donors { @@ -270,14 +263,6 @@ } } -/* Donors followed by layout */ -/* @media screen and (min-width: 768px) { - .paragraph--type--donors + .paragraph--type--layout { - margin-top: 6rem; - margin-bottom: 2rem; - } -} */ - /* River followed by another river */ .paragraph--type--reliefweb-river + .paragraph--type--reliefweb-river { margin-top: 4rem; diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--events.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--events.html.twig index 20126757..d9d0c57d 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--events.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--events.html.twig @@ -36,11 +36,6 @@ * @see template_preprocess_paragraph() * * @ingroup themeable - * - * @todo remove the 'view-stories', 'view-display-id-stories', - * 'paragraph--type--content-list', 'view-header' and 'view-content' which are - * just there for compatibility with the existing styling from the - * 'uno-card-list' component. */ #} {{ attach_library('common_design_subtheme/uno-card-list') }} @@ -50,8 +45,7 @@ 'paragraph--type--' ~ paragraph.bundle|clean_class, view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-events', - 'paragraph--type--content-list' + 'uno-events' ] %} {% block paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--media-centre.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--media-centre.html.twig index 75e17fee..e517086a 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--media-centre.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--media-centre.html.twig @@ -47,8 +47,7 @@ 'paragraph--type--' ~ paragraph.bundle|clean_class, view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-media-centre', - 'paragraph--type--content-list' + 'uno-media-centre' ] %} {% block paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--regions.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--regions.html.twig index 656dcebf..00b7dfa0 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--regions.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--regions.html.twig @@ -36,11 +36,6 @@ * @see template_preprocess_paragraph() * * @ingroup themeable - * - * @todo remove the 'view-stories', 'view-display-id-stories', - * 'paragraph--type--content-list', 'view-header' and 'view-content' which are - * just there for compatibility with the existing styling from the - * 'uno-card-list' component. */ #} {{ attach_library('common_design_subtheme/uno-card-list') }} @@ -50,8 +45,7 @@ 'paragraph--type--' ~ paragraph.bundle|clean_class, view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-responses', - 'paragraph--type--content-list' + 'uno-regions' ] %} {% block paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--responses.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--responses.html.twig index 3d2b3922..23798039 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--responses.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--responses.html.twig @@ -36,11 +36,6 @@ * @see template_preprocess_paragraph() * * @ingroup themeable - * - * @todo remove the 'view-stories', 'view-display-id-stories', - * 'paragraph--type--content-list', 'view-header' and 'view-content' which are - * just there for compatibility with the existing styling from the - * 'uno-card-list' component. */ #} {{ attach_library('common_design/cd-bleed') }} @@ -51,8 +46,7 @@ 'paragraph--type--' ~ paragraph.bundle|clean_class, view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished', - 'uno-responses', - 'paragraph--type--content-list' + 'uno-responses' ] %} {% block paragraph %} From e77aac40531a48b92c659594276f9c2c5542bca1 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 13:17:38 +0200 Subject: [PATCH 09/59] refactor: remove commented out rules, correct comments, typos Refs: UNO-678 --- .../components/uno-breadcrumb/uno-breadcrumb.css | 4 ++-- .../components/uno-cta/uno-cta.css | 9 --------- .../components/uno-mega-menu/README.md | 2 +- .../templates/paragraphs/paragraph--donors.html.twig | 3 --- 4 files changed, 3 insertions(+), 15 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/uno-breadcrumb.css b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/uno-breadcrumb.css index 78783f08..d3f84eae 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/uno-breadcrumb.css +++ b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/uno-breadcrumb.css @@ -45,8 +45,8 @@ content: none; } -/* Hide the current page title in breadcrumbs for - Stories, Events, Publications */ +/* Hide the current page title in breadcrumbs for Stories, Events, + Publications */ .path-publications .uno-breadcrumb ol li:last-child, .page-node-type-event .uno-breadcrumb ol li:last-child, .page-node-type-story .uno-breadcrumb ol li:last-child { diff --git a/html/themes/custom/common_design_subtheme/components/uno-cta/uno-cta.css b/html/themes/custom/common_design_subtheme/components/uno-cta/uno-cta.css index 1c3f0542..f2ccf8cf 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-cta/uno-cta.css +++ b/html/themes/custom/common_design_subtheme/components/uno-cta/uno-cta.css @@ -1,6 +1,3 @@ -/** - * HR.info CTA button - */ .paragraph--type--call-to-action { padding: 3rem 2rem 4rem; } @@ -21,9 +18,3 @@ .field--name-field-custom-content .paragraph:last-child.paragraph--type--call-to-action.cd-bleed { background-color: transparent; } - -.paragraph--type--call-to-action .uno-subscribe { - max-width: var(--cd-max-content-width); - margin-right: auto; - margin-left: auto; -} diff --git a/html/themes/custom/common_design_subtheme/components/uno-mega-menu/README.md b/html/themes/custom/common_design_subtheme/components/uno-mega-menu/README.md index 126e7ad7..f47b0136 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-mega-menu/README.md +++ b/html/themes/custom/common_design_subtheme/components/uno-mega-menu/README.md @@ -1,4 +1,4 @@ UNOCHA Mega Menu ================ -This component provides "mega meny" styling for nested main navigation menus. +This component provides "mega menu" styling for nested main navigation menus. diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--donors.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--donors.html.twig index bb6d667d..1d95adb6 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--donors.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--donors.html.twig @@ -80,10 +80,7 @@ {% if paragraph.field_url.0.url %}
      - {# {{ paragraph.field_url.0.title }} #} - {{ paragraph.field_url.0.title }} -
      {% endif %} {% endblock %} From 568aa96b14fe5c780c62a16698ea070c7cb0246d Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 13:18:27 +0200 Subject: [PATCH 10/59] refactor: readmes for components Refs: UNO-678 --- .../components/uno-breadcrumb/README.md | 4 ++++ .../components/uno-campaign/README.md | 4 ++++ .../components/uno-card-list/README.md | 5 +++++ .../common_design_subtheme/components/uno-card/README.md | 4 ++++ .../common_design_subtheme/components/uno-cta/README.md | 8 ++++++++ .../components/uno-document/README.md | 4 ++++ .../components/uno-figures/README.md | 5 +++++ .../components/uno-layout/README.md | 4 ++++ .../common_design_subtheme/components/uno-media/README.md | 5 +++++ .../common_design_subtheme/components/uno-nav/README.md | 7 +++++++ .../common_design_subtheme/components/uno-river/README.md | 4 ++++ .../components/uno-text-image/README.md | 7 +++++++ 12 files changed, 61 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-campaign/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-card-list/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-card/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-cta/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-document/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-figures/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-layout/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-media/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-nav/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-river/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-text-image/README.md diff --git a/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md new file mode 100644 index 00000000..9745f35d --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md @@ -0,0 +1,4 @@ +UNOCHA Breadcrumbs +============= + +This component provides styling for Breadcrumbs. diff --git a/html/themes/custom/common_design_subtheme/components/uno-campaign/README.md b/html/themes/custom/common_design_subtheme/components/uno-campaign/README.md new file mode 100644 index 00000000..6929eab5 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-campaign/README.md @@ -0,0 +1,4 @@ +UNOCHA Campaign +=============== + +This component provides styling the Campaign paragraph type. diff --git a/html/themes/custom/common_design_subtheme/components/uno-card-list/README.md b/html/themes/custom/common_design_subtheme/components/uno-card-list/README.md new file mode 100644 index 00000000..d5c8a76b --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-card-list/README.md @@ -0,0 +1,5 @@ +UNOCHA Card List +================ + +This component provides styling for Card Lists. +Card Lists can be paragraph types or Views Lists. diff --git a/html/themes/custom/common_design_subtheme/components/uno-card/README.md b/html/themes/custom/common_design_subtheme/components/uno-card/README.md new file mode 100644 index 00000000..b4d3907d --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-card/README.md @@ -0,0 +1,4 @@ +UNOCHA Card +============= + +This component provides styling Cards. diff --git a/html/themes/custom/common_design_subtheme/components/uno-cta/README.md b/html/themes/custom/common_design_subtheme/components/uno-cta/README.md new file mode 100644 index 00000000..19cdce17 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-cta/README.md @@ -0,0 +1,8 @@ +UNOCHA CTA +============= + +This component provides styling for the Call to Action paragraph type. +It displays the full-width of the browser using the cd-bleed component and has a +background colour. When it is the last paragraph in the Custom Content field, +the background colour is removed to prevent a visual conflict with the soft +footer. diff --git a/html/themes/custom/common_design_subtheme/components/uno-document/README.md b/html/themes/custom/common_design_subtheme/components/uno-document/README.md new file mode 100644 index 00000000..deb555d7 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-document/README.md @@ -0,0 +1,4 @@ +UNOCHA Document +=============== + +This component provides styling overrides for RW Documents. diff --git a/html/themes/custom/common_design_subtheme/components/uno-figures/README.md b/html/themes/custom/common_design_subtheme/components/uno-figures/README.md new file mode 100644 index 00000000..4d19598f --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-figures/README.md @@ -0,0 +1,5 @@ +UNOCHA Figures +============== + +This component provides styling for the Figures paragraph type including the RW +Document. diff --git a/html/themes/custom/common_design_subtheme/components/uno-layout/README.md b/html/themes/custom/common_design_subtheme/components/uno-layout/README.md new file mode 100644 index 00000000..0fe884cd --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-layout/README.md @@ -0,0 +1,4 @@ +UNOCHA Layout +============= + +This component provides styling for Layout paragraph type. diff --git a/html/themes/custom/common_design_subtheme/components/uno-media/README.md b/html/themes/custom/common_design_subtheme/components/uno-media/README.md new file mode 100644 index 00000000..4bdf2b70 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-media/README.md @@ -0,0 +1,5 @@ +UNOCHA Media +============= + +This component provides styling for the Media Collection content type and its +displays in Views Lists and paragraph type. diff --git a/html/themes/custom/common_design_subtheme/components/uno-nav/README.md b/html/themes/custom/common_design_subtheme/components/uno-nav/README.md new file mode 100644 index 00000000..06e2e921 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-nav/README.md @@ -0,0 +1,7 @@ +UNOCHA Nav +========== + +This component provides styling for Lists. +There are two variants - vertical and horizontal. + +It is currently used for Resources, Regions and Liaison Offices Views lists. diff --git a/html/themes/custom/common_design_subtheme/components/uno-river/README.md b/html/themes/custom/common_design_subtheme/components/uno-river/README.md new file mode 100644 index 00000000..b8f45fe3 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-river/README.md @@ -0,0 +1,4 @@ +UNOCHA River +============= + +This component provides styling overrides for RW Rivers paragraph type. diff --git a/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md b/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md new file mode 100644 index 00000000..4ee4beca --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md @@ -0,0 +1,7 @@ +UNOCHA Text and Image +============= + +This component provides styling for the Text and Image paragraph type. +There are 3 alignment options. +Default displays the image full width. +Left and Right alignment displays the image aligned at 50% width. From d320bd522f0481c4c85cd0249df0908fb5d5559b Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 14:41:06 +0200 Subject: [PATCH 11/59] refactor: split styles.css into components, define libraries and set dependencies where relevant Refs: UNO-678 --- .../common_design_subtheme.libraries.yml | 28 ++ .../components/uno-node/README.md | 5 + .../components/uno-node/uno-node.css | 112 +++++ .../components/uno-paragraphs/README.md | 5 + .../uno-paragraphs/uno-paragraphs.css | 205 ++++++++ .../components/uno-view-all/README.md | 5 + .../components/uno-view-all/uno-view-all.css | 53 ++ .../components/uno-views/README.md | 4 + .../components/uno-views/uno-views.css | 85 ++++ .../common_design_subtheme/css/styles.css | 467 ------------------ 10 files changed, 502 insertions(+), 467 deletions(-) create mode 100644 html/themes/custom/common_design_subtheme/components/uno-node/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-node/uno-node.css create mode 100644 html/themes/custom/common_design_subtheme/components/uno-paragraphs/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-paragraphs/uno-paragraphs.css create mode 100644 html/themes/custom/common_design_subtheme/components/uno-view-all/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-view-all/uno-view-all.css create mode 100644 html/themes/custom/common_design_subtheme/components/uno-views/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-views/uno-views.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 29827e42..462ed702 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -12,6 +12,7 @@ global-styling: - common_design_subtheme/uno-card-list - common_design_subtheme/cd-article - common_design_subtheme/cd-typography + - common_design_subtheme/uno-node - common_design_subtheme/cd - common_design/cd-read-more - common_design/cd-block-title @@ -201,6 +202,16 @@ uno-nav: theme: components/uno-nav/uno-nav.css: {} +uno-node: + css: + theme: + components/uno-node/uno-node.css: {} + +uno-paragraphs: + css: + theme: + components/uno-paragraphs/uno-paragraphs.css: {} + uno-response-map: css: theme: @@ -217,6 +228,8 @@ uno-stories: css: theme: components/uno-stories/uno-stories.css: {} + dependencies: + - common_design_subtheme/uno-view-all uno-subscribe: css: @@ -234,6 +247,21 @@ uno-text-image: css: theme: components/uno-text-image/uno-text-image.css: {} + +uno-view-all: + css: + theme: + components/uno-view-all/uno-view-all.css: {} + dependencies: + - common_design_subtheme/rw-icons + +uno-views: + css: + theme: + components/uno-views/uno-views.css: {} + dependencies: + - common_design_subtheme/uno-view-all + ### # Define Drupal libraries for additional webfonts. # diff --git a/html/themes/custom/common_design_subtheme/components/uno-node/README.md b/html/themes/custom/common_design_subtheme/components/uno-node/README.md new file mode 100644 index 00000000..c0c59fd7 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-node/README.md @@ -0,0 +1,5 @@ +UNOCHA Node +=========== + +This component provides styling for nodes and specific fields on nodes including +the Custom Content field which contains paragraphs. diff --git a/html/themes/custom/common_design_subtheme/components/uno-node/uno-node.css b/html/themes/custom/common_design_subtheme/components/uno-node/uno-node.css new file mode 100644 index 00000000..99dd1acc --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-node/uno-node.css @@ -0,0 +1,112 @@ +/* Restrict width and centre horizontally */ +.node--type-story .cd-layout-main-content > .field--label-inline, +.node--type-story .cd-caption, +.node--type-story .field--name-field-theme, +.node--type-story .field--type-text-with-summary, +.node--type-story .field--name-field-text, +.node--type-story .cd-layout-main-content > footer, +.node--type-basic .cd-caption, +.node--type-region .cd-caption, +.node--type-response .cd-caption { + max-width: var(--cd-max-content-width); + margin-right: auto; + margin-left: auto; +} + +/* Basic vertical rhythm, will need adjusting */ +.node--type-event .field--name-field-event-date, +.node--type-event .field--name-field-event-location, +.node--type-event.node--view-mode-full .field--name-field-event-image, +.node--type-event .uno-event__link, +.node--type-event .field--name-field-response, +.node--type-story .field--name-field-theme { + margin-bottom: 1rem; +} + +.node--type-event.node--view-mode-card .uno-event__link { + margin-bottom: 2rem; +} + +.node--view-mode-full .field--name-field-text, +.node--type-event.node--view-mode-full .uno-event__link { + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .node--view-mode-full .field--name-field-text { + margin-bottom: 6rem; + } +} + +/* When a Text paragraph is in a layout */ +.node--view-mode-full .paragraph .field--name-field-text { + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .node--view-mode-full .paragraph .field--name-field-text { + margin-bottom: 3rem; + } +} + +.node--view-mode-full .layout .paragraph .field--name-field-text { + margin-bottom: 0; +} + +@media screen and (min-width: 768px) { + .node--view-mode-full .layout .paragraph .field--name-field-text { + margin-bottom: 0; + } +} + +.node--view-mode-full .cd-layout-main-content > .field--name-body { + margin-bottom: 6rem; +} +.node--view-mode-full .node--view-mode-teaser .field--name-body { + margin-bottom: 0; +} + +/* Story node */ +footer.cd-author { + margin-top: 3rem; + padding: 1rem 0; + border-top: 1px solid var(--brand-grey); +} + +/* CTA link on Response and Region pages */ +.uno-content--custom > a.uno-button { + float: right; + margin-bottom: 0.75rem; + margin-inline-start: 0.75rem; +} +/* Prevent the floated button overlapping the next field */ +.uno-content--custom > a.uno-button + .field { + clear: both; +} +@media (min-width: 1200px) { + .uno-content--custom { + position: relative; + } + + .uno-content--custom > a.cd-button { + position: absolute; + top: 0; + right: 0; + } +} + +/* Center Hero images within the cd-bleed container */ +.field--name-field-story-image, +.field--name-field-basic-image, +.field--name-field-response-image, +.field--name-field-region-image { + text-align: center; +} + +/* When images are missing, restrict width of alt text */ +.field--name-field-media-image { + max-width: var(--cd-max-body-width); + margin-right: auto; + margin-left: auto; + font-size: 12px; +} diff --git a/html/themes/custom/common_design_subtheme/components/uno-paragraphs/README.md b/html/themes/custom/common_design_subtheme/components/uno-paragraphs/README.md new file mode 100644 index 00000000..25c52421 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-paragraphs/README.md @@ -0,0 +1,5 @@ +UNOCHA Paragraphs +================= + +This component provides styling for paragraphs, specifically vertical rhythm and +any other generic rules. diff --git a/html/themes/custom/common_design_subtheme/components/uno-paragraphs/uno-paragraphs.css b/html/themes/custom/common_design_subtheme/components/uno-paragraphs/uno-paragraphs.css new file mode 100644 index 00000000..ef372611 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-paragraphs/uno-paragraphs.css @@ -0,0 +1,205 @@ +.paragraph > .field { + margin-bottom: 1rem; +} + +.paragraph > .field--name-field-title { + margin-bottom: 2rem; + } + +.paragraph--type--node-teaser > .field > .field__items > .field__item { + margin-bottom: 2rem; +} + +.paragraph--type--campaign { + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .paragraph--type--campaign { + margin-bottom: 8rem; + } +} + +.paragraph--type--image, +.paragraph--type--text-and-image, +.paragraph--type--embed, +.paragraph--type--call-to-action, +.paragraph--type--video, +.paragraph--type--node, +.paragraph--type--section.paragraph--view-mode--default, +.paragraph--type--section.paragraph--view-mode--tabs, +.paragraph--type--events, +.paragraph--type--regions, +.paragraph--type--responses, +.paragraph--type--stories, +.paragraph--type--reliefweb-document, +.paragraph--type--subscribe, +.paragraph--type--cbpf, +.paragraph--type--donors, +.paragraph--type--figures, +.paragraph--type--media-centre { + margin-top: 2rem; + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .paragraph--type--image, + .paragraph--type--text-and-image, + .paragraph--type--embed, + .paragraph--type--call-to-action, + .paragraph--type--video, + .paragraph--type--node, + .paragraph--type--section.paragraph--view-mode--default, + .paragraph--type--section.paragraph--view-mode--tabs, + .paragraph--type--events, + .paragraph--type--regions, + .paragraph--type--responses, + .paragraph--type--stories, + .paragraph--type--subscribe, + .paragraph--type--cbpf, + .paragraph--type--donors, + .paragraph--type--figures, + .paragraph--type--media-centre { + margin-top: 6rem; + margin-bottom: 6rem; + } +} + +.paragraph--type--subscribe { + margin-top: 6rem; + margin-bottom: 6rem; +} + +@media screen and (min-width: 768px) { + .paragraph--type--subscribe { + margin-top: 12rem; + margin-bottom: 12rem; + } +} + +.paragraph--type--reliefweb-document { + margin-top: 2rem; + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .paragraph--type--reliefweb-document { + margin-bottom: 6rem; + } +} + +/* Paragraphs in layouts or nested, remove margins */ +.layout__region .paragraph--type--node, +.paragraph--type--section.paragraph--view-mode--tabs .paragraph--type--section, +.layout__region .paragraph--type--reliefweb-document { + margin-top: 0; + margin-bottom: 1rem; +} + +@media screen and (min-width: 768px) { + .layout__region .paragraph--type--node, + .paragraph--type--section.paragraph--view-mode--tabs .paragraph--type--section, + .layout__region .paragraph--type--reliefweb-document { + margin-top: 0; + margin-bottom: 0; + } +} + +/* Layouts vertical rhythm */ +.paragraph--type--layout { + margin-top: 2rem; + margin-bottom: 2rem; +} + +@media screen and (min-width: 768px) { + .paragraph--type--layout { + margin-top: 6rem; + margin-bottom: 6rem; + } +} + +.paragraph--type--layout:first-child { + margin-top: 0; + margin-bottom: 0; +} + +@media screen and (min-width: 768px) { + .paragraph--type--layout:first-child { + margin-top: 0; + margin-bottom: 0; + } +} +/* A layout following another layout, reduce margin */ +.paragraph--type--layout + .paragraph--type--layout { + margin-top:2rem; + margin-bottom: 2rem; +} + +/* Donors followed by Donors */ +@media screen and (min-width: 768px) { + .paragraph--type--donors + .paragraph--type--donors { + margin-top: 0; + } +} + +/* Donors following Figures (in a Section), reduce margin */ +@media screen and (min-width: 768px) { + .paragraph--type--section + .paragraph--type--donors { + margin-top: -2rem; + margin-bottom: 2rem; + } +} + +/* River followed by another river */ +.paragraph--type--reliefweb-river + .paragraph--type--reliefweb-river { + margin-top: 4rem; +} + +@media screen and (min-width: 1024px) { + .paragraph--type--reliefweb-river + .paragraph--type--reliefweb-river { + margin-top: 6rem; + } +} + +/* Full-width paragraphs */ +.paragraph--type--responses.cd-bleed, +.paragraph--type--response-map.cd-bleed { + padding: 2rem 0; + background-color: var(--brand-grey); +} + +.paragraph--type--response-map.cd-bleed + .paragraph--type--responses.cd-bleed { + margin-top: -2rem; +} + +/* CBPF Paragraph type, center align everything so button is centered */ +.paragraph--type--cbpf { + text-align: center; +} + +/* Left align Title and Text fields */ +.paragraph--type--cbpf .field--name-field-title, +.paragraph--type--cbpf .field--name-field-text { + text-align: left; +} + +.paragraph--type--cbpf .cd-button { + margin: 2rem auto 0; +} + +.paragraph--type--image { + text-align: center; +} + +.paragraph--type--text-and-image .field--name-field-text > p:first-child, +.paragraph--type--text .field--name-field-text > p:first-child { + margin-top: 0; +} + +.paragraph--type--node.paragraph--view-mode--teasers article + article { + margin-top: 2rem; +} + +.paragraph--type--layout .cd-teaser { + border-bottom: 0 solid; +} diff --git a/html/themes/custom/common_design_subtheme/components/uno-view-all/README.md b/html/themes/custom/common_design_subtheme/components/uno-view-all/README.md new file mode 100644 index 00000000..ecd583cf --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-view-all/README.md @@ -0,0 +1,5 @@ +UNOCHA View all +=============== + +This component provides styling for the View all link next to the Views header +and the Stories header. diff --git a/html/themes/custom/common_design_subtheme/components/uno-view-all/uno-view-all.css b/html/themes/custom/common_design_subtheme/components/uno-view-all/uno-view-all.css new file mode 100644 index 00000000..3600de13 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-view-all/uno-view-all.css @@ -0,0 +1,53 @@ +.view-display-id-media .view-header, +.view-display-id-response_media .view-header, +.view-display-id-events .view-header, +.view-display-id-country_events .view-header, +.view-display-id-upcoming_events .view-header, +.view-display-id-past_events .view-header, +.view-display-id-response_stories .view-header, +.view-display-id-stories .view-header, +.uno-stories .uno-stories__header, +.uno-media-centre .uno-media-centre__header { + display: flex; + align-items: baseline; +} + +.uno-stories .uno-stories__view_all, +.uno-media-centre .uno-media-centre__view_all, +.view-header .views-display-link { + flex: 1 0 auto; +} + +.uno-stories .uno-stories__view_all a, +.uno-media-centre .uno-media-centre__view_all a, +.view-header .views-display-link { + position: relative; + padding-inline-start: 1rem; +} + +.uno-stories .uno-stories__view_all a::after, +.uno-media-centre .uno-media-centre__view_all a::after, +.view-header .views-display-link::after { + display: inline-block; + overflow: hidden; + width: 12px; + height: 12px; + margin: 0 0 0 6px; + content: ""; + background: var(--rw-icons--common--arrow-right--12--dark-blue); +} + +.uno-stories .uno-stories__view_all a:hover::after, +.uno-stories .uno-stories__view_all a:focus::after, +.uno-media-centre .uno-media-centre__view_all a:hover::after, +.uno-media-centre .uno-media-centre__view_all a:focus::after, +.view-header .views-display-link:hover::after, +.view-header .views-display-link:focus::after { + display: inline-block; + overflow: hidden; + width: 12px; + height: 12px; + margin: 0 0 0 6px; + content: ""; + background-position-x: var(--rw-icons--common--12--blue--x); +} diff --git a/html/themes/custom/common_design_subtheme/components/uno-views/README.md b/html/themes/custom/common_design_subtheme/components/uno-views/README.md new file mode 100644 index 00000000..3d3db0d9 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-views/README.md @@ -0,0 +1,4 @@ +UNOCHA Views +===================== + +This component provides styling for Views elements. diff --git a/html/themes/custom/common_design_subtheme/components/uno-views/uno-views.css b/html/themes/custom/common_design_subtheme/components/uno-views/uno-views.css new file mode 100644 index 00000000..0953579e --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-views/uno-views.css @@ -0,0 +1,85 @@ + + /* Views */ + .more-link { + display: block; + margin-top: 2rem; +} + +/* Match cd-block-title */ +.view-header h2 { + margin: 0 0 2.5rem 0; + letter-spacing: 0.5px; + font-size: var(--cd-font-size--2xbase); + font-weight: 700; + line-height: 1.3; +} + + .view-filters { + margin-bottom: 2rem; + } + +@media screen and (min-width: 768px) { + .cd-filter[data-cd-toggable] { + --dropdown: false; + } +} + +.view-header + .view-filters { + margin-top: 1rem; +} + +.views-exposed-form.cd-form .cd-form--inline, +.views-exposed-form.cd-form .cd-form--inline label, +.views-exposed-form.cd-form .cd-form--inline .cd-form__item { + display: block; +} + +.views-exposed-form.cd-form .cd-form--inline > .cd-form__item { + padding-block-end: 1rem; +} + +.views-exposed-form .cd-form--inline > .cd-form__item select { + width: 100%; +} + +@media (min-width: 575px) { + .views-exposed-form.cd-form .cd-form--inline { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + } + + .views-exposed-form.cd-form .cd-form--inline > .cd-form__item { + flex: 1 0 50%; + max-width: 50%; + padding-inline-end: 1rem; + } + + .views-exposed-form.cd-form .cd-form--inline .form-actions { + flex: 1 0 auto; + padding-inline-end: 1rem; + text-align: right; + } +} + +@media screen and (min-width: 768px) { + .views-exposed-form.cd-form .cd-form--inline > .cd-form__item { + flex: 1 0 20%; + max-width: 20%; + padding-block-end: 0; + } + + .views-exposed-form.cd-form .cd-form--inline .form-actions { + padding-inline-end: 0; + } +} + +.pager { + margin-top: 3rem; +} + +@media screen and (min-width: 768px) { + .pager { + margin-top: 6rem; + } +} diff --git a/html/themes/custom/common_design_subtheme/css/styles.css b/html/themes/custom/common_design_subtheme/css/styles.css index 139d36c9..6eef269a 100644 --- a/html/themes/custom/common_design_subtheme/css/styles.css +++ b/html/themes/custom/common_design_subtheme/css/styles.css @@ -1,14 +1,3 @@ -.paragraph > .field { - margin-bottom: 1rem; -} - -.paragraph > .field--name-field-title { - margin-bottom: 2rem; - } - -.paragraph--type--node-teaser > .field > .field__items > .field__item { - margin-bottom: 2rem; -} .field--name-body + .field--name-field-custom-content { margin-top: 2rem; @@ -39,21 +28,6 @@ margin-bottom: 1rem; } -/* Restrict width and centre horizontally */ -.node--type-story .cd-layout-main-content > .field--label-inline, -.node--type-story .cd-caption, -.node--type-story .field--name-field-theme, -.node--type-story .field--type-text-with-summary, -.node--type-story .field--name-field-text, -.node--type-story .cd-layout-main-content > footer, -.node--type-basic .cd-caption, -.node--type-region .cd-caption, -.node--type-response .cd-caption { - max-width: var(--cd-max-content-width); - margin-right: auto; - margin-left: auto; -} - /* Unset cd-article p auto margins */ .paragraph--type--section .cd-article p, .field--name-body > ul, @@ -76,234 +50,6 @@ max-width: var(--cd-max-content-width); } -/* Basic vertical rhythm, will need adjusting */ - -.node--type-event .field--name-field-event-date, -.node--type-event .field--name-field-event-location, -.node--type-event.node--view-mode-full .field--name-field-event-image, -.node--type-event .uno-event__link, -.node--type-event .field--name-field-response, -.node--type-story .field--name-field-theme { - margin-bottom: 1rem; -} - -.node--type-event.node--view-mode-card .uno-event__link { - margin-bottom: 2rem; -} - -.node--view-mode-full .field--name-field-text, -.node--type-event.node--view-mode-full .uno-event__link { - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .node--view-mode-full .field--name-field-text { - margin-bottom: 6rem; - } -} - -/* When a Text paragraph is in a layout */ -.node--view-mode-full .paragraph .field--name-field-text { - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .node--view-mode-full .paragraph .field--name-field-text { - margin-bottom: 3rem; - } -} - -.node--view-mode-full .layout .paragraph .field--name-field-text { - margin-bottom: 0; -} - -@media screen and (min-width: 768px) { - .node--view-mode-full .layout .paragraph .field--name-field-text { - margin-bottom: 0; - } -} - -.paragraph--type--campaign { - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .paragraph--type--campaign { - margin-bottom: 8rem; - } -} - -.paragraph--type--image, -.paragraph--type--text-and-image, -.paragraph--type--embed, -.paragraph--type--call-to-action, -.paragraph--type--video, -.paragraph--type--node, -.paragraph--type--section.paragraph--view-mode--default, -.paragraph--type--section.paragraph--view-mode--tabs, -.paragraph--type--events, -.paragraph--type--regions, -.paragraph--type--responses, -.paragraph--type--stories, -.paragraph--type--reliefweb-document, -.paragraph--type--subscribe, -.paragraph--type--cbpf, -.paragraph--type--donors, -.paragraph--type--figures, -.paragraph--type--media-centre { - margin-top: 2rem; - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .paragraph--type--image, - .paragraph--type--text-and-image, - .paragraph--type--embed, - .paragraph--type--call-to-action, - .paragraph--type--video, - .paragraph--type--node, - .paragraph--type--section.paragraph--view-mode--default, - .paragraph--type--section.paragraph--view-mode--tabs, - .paragraph--type--events, - .paragraph--type--regions, - .paragraph--type--responses, - .paragraph--type--stories, - .paragraph--type--subscribe, - .paragraph--type--cbpf, - .paragraph--type--donors, - .paragraph--type--figures, - .paragraph--type--media-centre { - margin-top: 6rem; - margin-bottom: 6rem; - } -} - -.paragraph--type--subscribe { - margin-top: 6rem; - margin-bottom: 6rem; -} - -@media screen and (min-width: 768px) { - .paragraph--type--subscribe { - margin-top: 12rem; - margin-bottom: 12rem; - } -} - -.paragraph--type--reliefweb-document { - margin-top: 2rem; - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .paragraph--type--reliefweb-document { - margin-bottom: 6rem; - } -} - -/* Paragraphs in layouts or nested, remove margins */ -.layout__region .paragraph--type--node, -.paragraph--type--section.paragraph--view-mode--tabs .paragraph--type--section, -.layout__region .paragraph--type--reliefweb-document { - margin-top: 0; - margin-bottom: 1rem; -} - -@media screen and (min-width: 768px) { - .layout__region .paragraph--type--node, - .paragraph--type--section.paragraph--view-mode--tabs .paragraph--type--section, - .layout__region .paragraph--type--reliefweb-document { - margin-top: 0; - margin-bottom: 0; - } -} - -/* Layouts vertical rhythm */ -.paragraph--type--layout { - margin-top: 2rem; - margin-bottom: 2rem; -} - -@media screen and (min-width: 768px) { - .paragraph--type--layout { - margin-top: 6rem; - margin-bottom: 6rem; - } -} - -.paragraph--type--layout:first-child { - margin-top: 0; - margin-bottom: 0; -} - -@media screen and (min-width: 768px) { - .paragraph--type--layout:first-child { - margin-top: 0; - margin-bottom: 0; - } -} -/* A layout following another layout, reduce margin */ -.paragraph--type--layout + .paragraph--type--layout { - margin-top:2rem; - margin-bottom: 2rem; -} - -/* Donors followed by Donors */ -@media screen and (min-width: 768px) { - .paragraph--type--donors + .paragraph--type--donors { - margin-top: 0; - } -} - -/* Donors following Figures (in a Section), reduce margin */ -@media screen and (min-width: 768px) { - .paragraph--type--section + .paragraph--type--donors { - margin-top: -2rem; - margin-bottom: 2rem; - } -} - -/* River followed by another river */ -.paragraph--type--reliefweb-river + .paragraph--type--reliefweb-river { - margin-top: 4rem; -} - -@media screen and (min-width: 1024px) { - .paragraph--type--reliefweb-river + .paragraph--type--reliefweb-river { - margin-top: 6rem; - } -} - -/* Full-width paragraphs */ -.paragraph--type--responses.cd-bleed, -.paragraph--type--response-map.cd-bleed { - padding: 2rem 0; - background-color: var(--brand-grey); -} - -.paragraph--type--response-map.cd-bleed + .paragraph--type--responses.cd-bleed { - margin-top: -2rem; -} - -/* CBPF Paragraph type, center align everything so button is centered */ -.paragraph--type--cbpf { - text-align: center; -} - -/* Left align Title and Text fields */ -.paragraph--type--cbpf .field--name-field-title, -.paragraph--type--cbpf .field--name-field-text { - text-align: left; -} - -.paragraph--type--cbpf .cd-button { - margin: 2rem auto 0; -} - -.paragraph--type--image { - text-align: center; -} - /* No top margin on first paragraph type */ .field--name-field-custom-content .paragraph:first-child { margin-top: 0; @@ -313,18 +59,6 @@ margin-bottom: 0; } -.node--view-mode-full .cd-layout-main-content > .field--name-body { - margin-bottom: 6rem; -} -.node--view-mode-full .node--view-mode-teaser .field--name-body { - margin-bottom: 0; -} - -.paragraph--type--text-and-image .field--name-field-text > p:first-child, -.paragraph--type--text .field--name-field-text > p:first-child { - margin-top: 0; -} - /* Video embed aspect ratio is calculated in the oembed-video field template. */ .field--name-field-media-oembed-video { position: relative; @@ -351,211 +85,11 @@ color: var(--cd-black); } - /* Views */ -.more-link { - display: block; - margin-top: 2rem; -} - -.view-display-id-media .view-header, -.view-display-id-response_media .view-header, -.view-display-id-events .view-header, -.view-display-id-country_events .view-header, -.view-display-id-upcoming_events .view-header, -.view-display-id-past_events .view-header, -.view-display-id-response_stories .view-header, -.view-display-id-stories .view-header, -.uno-stories .uno-stories__header, -.uno-media-centre .uno-media-centre__header { - display: flex; - align-items: baseline; -} - -/* Match cd-block-title */ -.view-header h2 { - margin: 0 0 2.5rem 0; - letter-spacing: 0.5px; - font-size: var(--cd-font-size--2xbase); - font-weight: 700; - line-height: 1.3; -} - -.uno-stories .uno-stories__view_all, -.uno-media-centre .uno-media-centre__view_all, -.view-header .views-display-link { - flex: 1 0 auto; -} -.uno-stories .uno-stories__view_all a, -.uno-media-centre .uno-media-centre__view_all a, -.view-header .views-display-link { - position: relative; - padding-inline-start: 1rem; -} - -.uno-stories .uno-stories__view_all a::after, -.uno-media-centre .uno-media-centre__view_all a::after, -.view-header .views-display-link::after { - display: inline-block; - overflow: hidden; - width: 12px; - height: 12px; - margin: 0 0 0 6px; - content: ""; - background: var(--rw-icons--common--arrow-right--12--dark-blue); -} -.uno-stories .uno-stories__view_all a:hover::after, -.uno-stories .uno-stories__view_all a:focus::after, -.uno-media-centre .uno-media-centre__view_all a:hover::after, -.uno-media-centre .uno-media-centre__view_all a:focus::after, -.view-header .views-display-link:hover::after, -.view-header .views-display-link:focus::after { - display: inline-block; - overflow: hidden; - width: 12px; - height: 12px; - margin: 0 0 0 6px; - content: ""; - background-position-x: var(--rw-icons--common--12--blue--x); -} - - .view-filters { - margin-bottom: 2rem; - } - -@media screen and (min-width: 768px) { - .cd-filter[data-cd-toggable] { - --dropdown: false; - } -} - -.view-header + .view-filters { - margin-top: 1rem; -} - -.views-exposed-form.cd-form .cd-form--inline, -.views-exposed-form.cd-form .cd-form--inline label, -.views-exposed-form.cd-form .cd-form--inline .cd-form__item { - display: block; -} - -.views-exposed-form.cd-form .cd-form--inline > .cd-form__item { - padding-block-end: 1rem; -} - -.views-exposed-form .cd-form--inline > .cd-form__item select { - width: 100%; -} - -@media (min-width: 575px) { - .views-exposed-form.cd-form .cd-form--inline { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - } - - .views-exposed-form.cd-form .cd-form--inline > .cd-form__item { - flex: 1 0 50%; - max-width: 50%; - padding-inline-end: 1rem; - } - - .views-exposed-form.cd-form .cd-form--inline .form-actions { - flex: 1 0 auto; - padding-inline-end: 1rem; - text-align: right; - } -} - -@media screen and (min-width: 768px) { - .views-exposed-form.cd-form .cd-form--inline > .cd-form__item { - flex: 1 0 20%; - max-width: 20%; - padding-block-end: 0; - } - - .views-exposed-form.cd-form .cd-form--inline .form-actions { - padding-inline-end: 0; - } -} - -.pager { - margin-top: 3rem; -} - -@media screen and (min-width: 768px) { - .pager { - margin-top: 6rem; - } -} - -/* Story node */ -footer.cd-author { - margin-top: 3rem; - padding: 1rem 0; - border-top: 1px solid var(--brand-grey); -} - /* Generic typography, might need increased specificity */ .field__item > p:first-child { margin-top: 0; } -.paragraph--type--node.paragraph--view-mode--teasers article + article { - margin-top: 2rem; -} - -.paragraph--type--layout .cd-teaser { - border-bottom: 0 solid; -} - -/* CTA link on Response and Region pages */ -.uno-content--custom > a.uno-button { - float: right; - margin-bottom: 0.75rem; - margin-inline-start: 0.75rem; -} - -/* Prevent the floated button overlapping the next field */ -.uno-content--custom > a.uno-button + .field { - clear: both; -} - -@media (min-width: 1200px) { - .uno-content--custom { - position: relative; - } - - .uno-content--custom > a.cd-button { - position: absolute; - top: 0; - right: 0; - } -} - -/* Center Story image within the cd-bleed container */ -.field--name-field-story-image, -.field--name-field-basic-image, -.field--name-field-response-image, -.field--name-field-region-image { - text-align: center; -} - - -/* Hide User Login on mobile for now */ -@media (max-width: 480px) { - .menu--account { - display: none; - } -} - -/* When images are missing, restrict width of alt text */ -.field--name-field-media-image { - max-width: var(--cd-max-body-width); - margin-right: auto; - margin-left: auto; - font-size: 12px; -} - /* WYSIWYG Editor styles */ .read-more { position: relative; @@ -575,7 +109,6 @@ footer.cd-author { specifically for Humanitarian resources on Response pages and might negatively affect other contexts where this layout is used in the future. */ - .layout--twocol-sidebar .cd-layout__content .rw-river-article--with-preview .rw-river-article__content img, .cd-layout__sidebar--wide .rw-river-article--with-preview .rw-river-article__content img { display: none; From 667e6539fb40aa019475a881e11785a7f9d2853d Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 14:41:56 +0200 Subject: [PATCH 12/59] refactor: attach uno-views library to views template override Refs: UNO-678 --- .../common_design_subtheme/templates/views/views-view.html.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/html/themes/custom/common_design_subtheme/templates/views/views-view.html.twig b/html/themes/custom/common_design_subtheme/templates/views/views-view.html.twig index 7ea40b8f..c5709ef0 100644 --- a/html/themes/custom/common_design_subtheme/templates/views/views-view.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/views/views-view.html.twig @@ -41,6 +41,7 @@ %} {{ attach_library('common_design/cd-dropdown') }} {{ attach_library('common_design/cd-filter') }} +{{ attach_library('common_design_subtheme/uno-views') }} {{ title_prefix }} From d84d8c48cf58fb9abcf25e4f00d92e7a66f699fb Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 14:42:36 +0200 Subject: [PATCH 13/59] refactor: cd-table component not needed Refs: UNO-678 --- .../templates/fields/field--paragraph--field-text.html.twig | 2 -- 1 file changed, 2 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig index 89e0bbaa..ec619ff6 100644 --- a/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/fields/field--paragraph--field-text.html.twig @@ -8,8 +8,6 @@ * @see template_preprocess_field() */ #} -{{ attach_library('common_design/cd-table') }} - {% set classes = [ 'field', From c7bfcce8068051ce8997e9a0bddf083b96331959 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 14:43:01 +0200 Subject: [PATCH 14/59] refactor: attach uno-paragraphs to custom content field template override Refs: UNO-678 --- .../fields/field--node--field-custom-content.html.twig | 2 ++ 1 file changed, 2 insertions(+) diff --git a/html/themes/custom/common_design_subtheme/templates/fields/field--node--field-custom-content.html.twig b/html/themes/custom/common_design_subtheme/templates/fields/field--node--field-custom-content.html.twig index e785ca8a..0d6d425c 100644 --- a/html/themes/custom/common_design_subtheme/templates/fields/field--node--field-custom-content.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/fields/field--node--field-custom-content.html.twig @@ -53,6 +53,8 @@ ] %} +{{ attach_library('common_design_subtheme/uno-paragraphs') }} + {% if label_hidden %} {% if multiple %} From 78a1afe4e53d5e154eb5002033f4d33f5c4b95d8 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 14:44:10 +0200 Subject: [PATCH 15/59] style: readme format Refs: UNO-678 --- .../components/uno-breadcrumb/README.md | 2 +- .../components/uno-text-image/README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md index 9745f35d..f292a431 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md +++ b/html/themes/custom/common_design_subtheme/components/uno-breadcrumb/README.md @@ -1,4 +1,4 @@ UNOCHA Breadcrumbs -============= +================== This component provides styling for Breadcrumbs. diff --git a/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md b/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md index 4ee4beca..59135793 100644 --- a/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md +++ b/html/themes/custom/common_design_subtheme/components/uno-text-image/README.md @@ -1,7 +1,7 @@ UNOCHA Text and Image -============= +===================== This component provides styling for the Text and Image paragraph type. There are 3 alignment options. Default displays the image full width. -Left and Right alignment displays the image aligned at 50% width. +Left and Right alignment displays the image aligned, and spanning 50% width. From f26ebcbe23666689dcb1694ea586bcb0fc3af751 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 8 Aug 2023 17:26:57 +0200 Subject: [PATCH 16/59] chore: remove sticky and content-list classes to reflect recent changes to styles, and fix footer padding Refs: UNO-757 --- .../custom/common_design_claro/css/styles.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/html/themes/custom/common_design_claro/css/styles.css b/html/themes/custom/common_design_claro/css/styles.css index d596eadf..e326459d 100644 --- a/html/themes/custom/common_design_claro/css/styles.css +++ b/html/themes/custom/common_design_claro/css/styles.css @@ -176,29 +176,31 @@ form .paragraph--view-mode--preview.paragraph--type--news-and-stories .uno-stori flex-wrap: wrap; gap: var(--uno-card-list-gap-size); } -form .paragraph--view-mode--preview.paragraph--type--content-list .uno-stories__header { +form .paragraph--view-mode--preview.paragraph--type--stories .uno-stories__header { margin-bottom: 1rem; } -form .paragraph--view-mode--preview.paragraph--type--content-list .uno-stories__view_all { +form .paragraph--view-mode--preview.paragraph--type--stories .uno-stories__view_all { display: none; } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card .node__content { +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story.node--view-mode-card .node__content { min-width: 220px; } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card:first-child .uno-card__image { +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story.node--view-mode-card:first-child .uno-card__image { max-width: 220px; } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story.node--sticky.node--view-mode-card:first-child .cd-card__container { +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story.node--view-mode-card:first-child .cd-card__container { display: block; } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-card__container { +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story .cd-card__container { padding: 0; } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-card__footer { +form .paragraph--view-mode--preview.paragraph--type--news-and-stories article.node--type-story .cd-card__footer, +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story .cd-card__footer { padding: 0; font-size: var(--font-size-h5); } -form .paragraph--view-mode--preview.paragraph--type--content-list article.node--type-story .cd-read-more { +form .paragraph--view-mode--preview.paragraph--type--news-and-stories article.node--type-story .cd-read-more, +form .paragraph--view-mode--preview.paragraph--type--stories article.node--type-story .cd-read-more { display: none; } From f34ca2ffc3fb37c604ec45bcea3d319be04dcf2b Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 9 Aug 2023 08:31:47 +0200 Subject: [PATCH 17/59] chore: hide view all for media centre views list on editor form Refs: UNO-757 --- html/themes/custom/common_design_claro/css/styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/html/themes/custom/common_design_claro/css/styles.css b/html/themes/custom/common_design_claro/css/styles.css index e326459d..786740df 100644 --- a/html/themes/custom/common_design_claro/css/styles.css +++ b/html/themes/custom/common_design_claro/css/styles.css @@ -293,3 +293,6 @@ form .paragraph--view-mode--preview.paragraph--type--media-centre article.node-- order: -1; margin-right: 1rem; } +form .paragraph--view-mode--preview.paragraph--type--media-centre .uno-media-centre__view_all { + display: none; +} From 68410ab412da26bd62327ae9282b098a96094169 Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 9 Aug 2023 13:13:29 +0200 Subject: [PATCH 18/59] chore: update template includes to use correct files Refs: UNO-678 --- .../templates/paragraphs/paragraph--figures--preview.html.twig | 2 +- .../templates/paragraphs/paragraph--figures.html.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures--preview.html.twig b/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures--preview.html.twig index 900dd9f9..3ca7c57f 100644 --- a/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures--preview.html.twig +++ b/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures--preview.html.twig @@ -1 +1 @@ -{% include '@common_design_subtheme/paragraphs/paragraph--figures--preview.html.twig' %} +{% include '@common_design_subtheme/paragraphs/paragraph--figures.html.twig' %} diff --git a/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures.html.twig b/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures.html.twig index 9d1b3dc1..3ca7c57f 100644 --- a/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures.html.twig +++ b/html/themes/custom/common_design_claro/templates/paragraphs/paragraph--figures.html.twig @@ -1 +1 @@ -{% include '@common_design_subtheme/paragraphs/paragraph--events.html.twig' %} +{% include '@common_design_subtheme/paragraphs/paragraph--figures.html.twig' %} From cf45d5e636126d68b5e10ea252dea691b7434123 Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 9 Aug 2023 13:50:53 +0200 Subject: [PATCH 19/59] chore: uno-typography instead of cd-typography and do not extend, define library Refs: UNO-678 --- .../common_design_subtheme.info.yml | 3 +- .../common_design_subtheme.libraries.yml | 13 +++--- .../components/cd-typography/README.md | 22 --------- .../cd-typography/cd-typography.css | 37 --------------- .../components/uno-typography/README.md | 6 +++ .../uno-typography/uno-typography.css | 45 +++++++++++++++++++ 6 files changed, 59 insertions(+), 67 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-typography/README.md delete mode 100644 html/themes/custom/common_design_subtheme/components/cd-typography/cd-typography.css create mode 100644 html/themes/custom/common_design_subtheme/components/uno-typography/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-typography/uno-typography.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.info.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.info.yml index 424ca4fc..460e4c9d 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.info.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.info.yml @@ -62,8 +62,7 @@ libraries-extend: - common_design_subtheme/cd-tabs common_design/cd-teaser: - common_design_subtheme/cd-teaser - common_design/cd-typography: - - common_design_subtheme/cd-typography + ### # Override libraries to replace specific base-theme components. Now, when the # base-theme component would have been used, instead ONLY yours will apply. diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 462ed702..2904367d 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -11,11 +11,12 @@ global-styling: dependencies: - common_design_subtheme/uno-card-list - common_design_subtheme/cd-article - - common_design_subtheme/cd-typography + - common_design_subtheme/uno-typography - common_design_subtheme/uno-node - common_design_subtheme/cd - common_design/cd-read-more - common_design/cd-block-title + - common_design_subtheme/rw-icons ### # Define Drupal libraries for your custom components. @@ -98,11 +99,6 @@ cd-teaser: component: components/cd-teaser/cd-teaser.css: {} -cd-typography: - css: - component: - components/cd-typography/cd-typography.css: {} - rw-brand: css: theme: @@ -248,6 +244,11 @@ uno-text-image: theme: components/uno-text-image/uno-text-image.css: {} +uno-typography: + css: + component: + components/uno-typography/uno-typography.css: {} + uno-view-all: css: theme: diff --git a/html/themes/custom/common_design_subtheme/components/cd-typography/README.md b/html/themes/custom/common_design_subtheme/components/cd-typography/README.md deleted file mode 100644 index 22ecac2b..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-typography/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Typography - -## Purpose and Usage -Establishes the basic typographic rules for HTML elements used in content -creation. The markup provides a good sample of various HTML elements and how -they are styled. - -## Caveats -@TODO Unsure if this should exist. Maybe it's better to have each element (eg. -blockquote) as its own component? Or include element styles in CD typography? - -@TODO The rules for the dl assume a single definition per term. They don't work -well for dt followed by several dd which is a legitimate use case (ex: list of -themes for an article). Use classes instead of generic dl rule with variants -like cd-definition-list--inline-single - -### Variants - -``` -none - -``` diff --git a/html/themes/custom/common_design_subtheme/components/cd-typography/cd-typography.css b/html/themes/custom/common_design_subtheme/components/cd-typography/cd-typography.css deleted file mode 100644 index bc2d415d..00000000 --- a/html/themes/custom/common_design_subtheme/components/cd-typography/cd-typography.css +++ /dev/null @@ -1,37 +0,0 @@ -/** - * CD Typography - */ -hr { - margin: 3.5rem auto; - border-top: 3px solid var(--brand-grey); -} - -blockquote { - margin: 3rem 0; - padding: 1rem 2rem; - border-inline-start: 3px solid var(--brand-grey); -} - -blockquote p:last-child { - margin-bottom: 0; -} - -p.title { - margin: 6rem 0; - text-align: center; - font-size: var(--cd-font-size--2xmedium); -} - -p.headline { - color: var(--brand-primary); - font-size: var(--cd-font-size--2xmedium); - font-weight: bold; - line-height: 1.2; -} - -@media screen and (min-width: 1024px) { - p.headline { - font-size: 50px; - line-height: 1.2; - } -} diff --git a/html/themes/custom/common_design_subtheme/components/uno-typography/README.md b/html/themes/custom/common_design_subtheme/components/uno-typography/README.md new file mode 100644 index 00000000..2facdcc9 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-typography/README.md @@ -0,0 +1,6 @@ + +UNOCHA Typography +================= + +This component provides styling for Typography and Editor styles available via +the WYSIWYG. diff --git a/html/themes/custom/common_design_subtheme/components/uno-typography/uno-typography.css b/html/themes/custom/common_design_subtheme/components/uno-typography/uno-typography.css new file mode 100644 index 00000000..c18e39a7 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-typography/uno-typography.css @@ -0,0 +1,45 @@ +/* WYSIWYG Editor styles + These also exist in common_design_claro styles.css + with some adjustments for best display on Content Editor form */ + .read-more { + position: relative; + } + + .read-more::after { + display: inline-block; + overflow: hidden; + width: 8px; + height: 8px; + margin: 0 0 0 6px; + content: ""; + background: var(--rw-icons--common--arrow-right--8--dark-blue); + } + + blockquote { + margin: 3rem 0; + padding: 1rem 2rem; + border-inline-start: 3px solid var(--brand-grey); + } + + blockquote p:last-child { + margin-bottom: 0; + } + + p.title { + margin: 6rem 0; + text-align: center; + font-size: var(--cd-font-size--2xmedium); + } + + p.headline { + color: var(--brand-primary); + font-size: var(--cd-font-size--2xmedium); + font-weight: bold; + line-height: 1.2; + } + @media screen and (min-width: 1024px) { + p.headline { + font-size: 50px; + line-height: 1.2; + } + } From 2ef1d8855a7a017c6cb24cdd014c7ee03574f851 Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 9 Aug 2023 13:52:17 +0200 Subject: [PATCH 20/59] refactor: video component, define library, attach to field template Refs: UNO-678 --- .../common_design_subtheme.libraries.yml | 5 +++++ .../components/uno-video/README.md | 5 +++++ .../components/uno-video/uno-video.css | 11 +++++++++++ .../field--media--field-media-oembed-video.html.twig | 2 ++ 4 files changed, 23 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/components/uno-video/README.md create mode 100644 html/themes/custom/common_design_subtheme/components/uno-video/uno-video.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 2904367d..33bcd2b5 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -249,6 +249,11 @@ uno-typography: component: components/uno-typography/uno-typography.css: {} +uno-video: + css: + theme: + components/uno-video/uno-video.css: {} + uno-view-all: css: theme: diff --git a/html/themes/custom/common_design_subtheme/components/uno-video/README.md b/html/themes/custom/common_design_subtheme/components/uno-video/README.md new file mode 100644 index 00000000..c995b6d8 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/uno-video/README.md @@ -0,0 +1,5 @@ +UNOCHA Video +============ + +This component provides styling for the Video paragraph type which embeds +Youtube or an MP4 from Canto using the