From 674573f2fef43c63adaacbfd3c39bf20d98f5c38 Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Tue, 28 May 2024 20:42:25 +0200 Subject: [PATCH] [#2480] Added use of --small modifier, corrected hierarchy in messagecenter --- package-lock.json | 14 +++++++------- package.json | 2 +- .../accounts/templates/accounts/inbox.html | 4 ++-- .../templates/components/File/File.html | 2 +- .../templates/components/Form/FileInput.html | 2 +- .../templates/components/List/ListItem.html | 2 +- .../templates/components/Messages/Message.html | 2 +- .../templates/components/Messages/Messages.html | 6 +++--- src/open_inwoner/components/tests/test_list.py | 4 ++-- src/open_inwoner/js/components/form/FileInput.js | 4 ++-- .../scss/components/Product/product-detail.scss | 2 +- .../components/Profile/_personal-overview.scss | 6 ++++++ .../components/Questionnaire/Questionnaire.scss | 10 ++++++++++ .../scss/components/Typography/P.scss | 16 +++++++++------- .../scss/components/UserFeed/UserFeed.scss | 6 ++++-- src/open_inwoner/scss/views/App.scss | 2 +- .../templates/pages/cases/document_form.html | 2 +- .../templates/pages/cases/list_inner.html | 2 +- .../templates/pages/product/detail.html | 2 +- 19 files changed, 55 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41c23043af..d5d2bed807 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "@emotion/styled": "^11.3.0", "@fortawesome/fontawesome-free": "^6.4.2", "@joeattardi/emoji-button": "^4.6.4", - "@open-inwoner/design-tokens": "^0.0.5-alpha.4", + "@open-inwoner/design-tokens": "^0.0.5-alpha.5", "@tarekraafat/autocomplete.js": "^10.2.6", "bem.js": "^1.0.10", "emojibase-data": "^7.0.1", @@ -4140,9 +4140,9 @@ } }, "node_modules/@open-inwoner/design-tokens": { - "version": "0.0.5-alpha.4", - "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz", - "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ==" + "version": "0.0.5-alpha.5", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.5.tgz", + "integrity": "sha512-oPTrpY/OA0oOMjgKauqEAzXJuggbb1+m3LvHFzLYZhiLPfqgJV+B6KcOT+gD2sHsiP74e8A8EgiC0rZBa16l1A==" }, "node_modules/@popperjs/core": { "version": "2.11.5", @@ -22718,9 +22718,9 @@ } }, "@open-inwoner/design-tokens": { - "version": "0.0.5-alpha.4", - "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz", - "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ==" + "version": "0.0.5-alpha.5", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.5.tgz", + "integrity": "sha512-oPTrpY/OA0oOMjgKauqEAzXJuggbb1+m3LvHFzLYZhiLPfqgJV+B6KcOT+gD2sHsiP74e8A8EgiC0rZBa16l1A==" }, "@popperjs/core": { "version": "2.11.5", diff --git a/package.json b/package.json index 1be6de799c..77847bb5e2 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@emotion/styled": "^11.3.0", "@fortawesome/fontawesome-free": "^6.4.2", "@joeattardi/emoji-button": "^4.6.4", - "@open-inwoner/design-tokens": "^0.0.5-alpha.4", + "@open-inwoner/design-tokens": "^0.0.5-alpha.5", "@tarekraafat/autocomplete.js": "^10.2.6", "bem.js": "^1.0.10", "emojibase-data": "^7.0.1", diff --git a/src/open_inwoner/accounts/templates/accounts/inbox.html b/src/open_inwoner/accounts/templates/accounts/inbox.html index cb6a05e827..e8bf7ee2d2 100644 --- a/src/open_inwoner/accounts/templates/accounts/inbox.html +++ b/src/open_inwoner/accounts/templates/accounts/inbox.html @@ -22,9 +22,9 @@

{% trans 'Mijn berichten' %}

{% for conv in conversations.page_obj %} {% with conv_thread_url=conv.thread_url|qs_page:conversations.page_obj.number %} {% if other_user.uuid == conv.other_user_uuid %} - {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url active=True %} + {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url active=True strong=True %} {% else %} - {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url %} + {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url strong=True %} {% endif %} {% endwith %} {% endfor %} diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html index 74eebb98a0..7a03c59646 100644 --- a/src/open_inwoner/components/templates/components/File/File.html +++ b/src/open_inwoner/components/templates/components/File/File.html @@ -52,7 +52,7 @@ {% trans "Download" as download %} {% link href=url text=download primary=True download=True hide_text=True extra_classes="file__download" icon="download" icon_outlined=True icon_position="before" %} {% endif %} - {% if description %}

{{ description }}

{% endif %} + {% if description %}

{{ description }}

{% endif %} diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index f527861e20..3760fb5278 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -13,7 +13,7 @@ {% endrender_card %} - {% if field.help_text %}

{{ field.help_text }}

{% endif %} + {% if field.help_text %}

{{ field.help_text }}

{% endif %} {% if field.errors %}{% errors errors=field.errors %}{% endif %}
diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html index ab415d3aa5..4f62ebf2f5 100644 --- a/src/open_inwoner/components/templates/components/List/ListItem.html +++ b/src/open_inwoner/components/templates/components/List/ListItem.html @@ -3,7 +3,7 @@ {% if href %}{% endif %} {% if caption %}

{{ caption }}

{% endif %} {% if strong %} -

{{ text }}

+

{{ text }}

{% else %}

{{ text }}

{% endif %} diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html index 1b29f14964..34003b3b07 100644 --- a/src/open_inwoner/components/templates/components/Messages/Message.html +++ b/src/open_inwoner/components/templates/components/Messages/Message.html @@ -12,6 +12,6 @@
-

{{ message.created_on|time }}

+

{{ message.created_on|time }}

diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html index 14e1ab745e..8df2113ee0 100644 --- a/src/open_inwoner/components/templates/components/Messages/Messages.html +++ b/src/open_inwoner/components/templates/components/Messages/Messages.html @@ -2,7 +2,7 @@
-

{{ subject }}

+

{{ subject }}

{{ status }}

@@ -17,7 +17,7 @@

{{ subject }}

{% for day in days %}
  • -

    {{ day.text }}

    +

    {{ day.text }}

      @@ -68,7 +68,7 @@

      {{ subject }}

      {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %} {% endrender_form %} {% else %} -

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      +

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      {% endif %}
    • diff --git a/src/open_inwoner/components/tests/test_list.py b/src/open_inwoner/components/tests/test_list.py index 302860f9d3..096a5a5671 100644 --- a/src/open_inwoner/components/tests/test_list.py +++ b/src/open_inwoner/components/tests/test_list.py @@ -21,11 +21,11 @@ def test_render(self): self.assertRender({"text": "Lorem ipsum"}) def test_text(self): - self.assertTextContent("h4", "Lorem ipsum", {"text": "Lorem ipsum"}) + self.assertTextContent("p", "Lorem ipsum", {"text": "Lorem ipsum"}) def test_description(self): self.assertTextContent( - "p", "Dolor sit", {"text": "Lorem ipsum", "description": "Dolor sit"} + "p", "Lorem ipsum", {"text": "Lorem ipsum", "description": "Dolor sit"} ) def test_href(self): diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index f4b0ce9d25..688ece6d37 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/src/open_inwoner/js/components/form/FileInput.js @@ -308,13 +308,13 @@ export class FileInput extends Component { ${ typeError && sizeError ? ` -

    +

    Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}

    ` : typeError || sizeError ? ` -

    +

    ${ typeError diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss index 4acd9e3fb5..6391c6ce5b 100644 --- a/src/open_inwoner/scss/components/Product/product-detail.scss +++ b/src/open_inwoner/scss/components/Product/product-detail.scss @@ -43,7 +43,7 @@ } .utrecht-paragraph--oip-summary { - margin-bottom: var(--gutter-width); + margin-bottom: var(--gutter-width) !important; } /// Legacy style diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss index 2841a845ca..368fb2c828 100644 --- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss +++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss @@ -63,6 +63,12 @@ } &.profile-section__newsletters { + .form { + gap: var(--spacing-large); + } + .checkbox__p.newsletter-remarks { + line-height: var(--font-line-height-body); + } .button { padding: var(--spacing-medium) var(--spacing-giant); } diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss index c1d03cd3f4..dc17354774 100644 --- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss +++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss @@ -1,10 +1,20 @@ .questionnaire { &__fieldset { border: 0 solid transparent; + legend { padding: 0; } + + *[class^='utrecht-heading'] + .utrecht-paragraph--oip-compact { + margin-top: 0; + } + + .utrecht-paragraph + .form { + margin-top: 0; + } } + &__list { list-style: none; margin: 0; diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss index d33427c607..fcbba2e43a 100644 --- a/src/open_inwoner/scss/components/Typography/P.scss +++ b/src/open_inwoner/scss/components/Typography/P.scss @@ -7,11 +7,7 @@ // Takes style values from our own design-tokens NPM package margin: 0; - &-small { - font-size: var(--oip-utrecht-paragraph-small-font-size); - line-height: var(--oip-utrecht-paragraph-small-line-height); - } - + // Extensions of the utrecht-paragraph component with OIP-specific styles. &-muted { color: var(--oip-utrecht-paragraph-muted-color); } @@ -21,8 +17,8 @@ } &-compact { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: var(--oip-utrecht-paragraph-compact-margin-top); + margin-bottom: var(--oip-utrecht-paragraph-compact-margin-bottom); } &:empty { @@ -62,11 +58,14 @@ .content { text-decoration: underline; } + &:hover { text-decoration: none; } + .material-icons { text-decoration: none; + &:hover { text-decoration: none; } @@ -120,11 +119,14 @@ .content { text-decoration: underline; } + &:hover { text-decoration: none; } + .material-icons { text-decoration: none; + &:hover { text-decoration: none; } diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss index a30e7fbc29..9d566734aa 100644 --- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss +++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss @@ -14,7 +14,7 @@ background-color: var(--color-white); color: var(--color-red-notification); display: block; - line-height: var(--font-line-height-body); + line-height: var(--utrecht-document-line-height); position: relative; & * { @@ -71,6 +71,7 @@ } } + /// Cards in userfeed .card { justify-content: flex-start; @@ -101,6 +102,7 @@ font-family: var(--font-family-body); font-size: var(--font-size-body-small); font-weight: normal; + line-height: var(--utrecht-document-line-height); overflow-wrap: break-word; word-break: normal; padding: var(--font-size-body-small) var(--card-spacing) 0 @@ -113,7 +115,7 @@ color: var(--utrecht-heading-color); font-family: var(--utrecht-heading-font-family); font-size: var(--font-size-body); - line-height: var(--font-line-height-body); + line-height: var(--utrecht-document-line-height); margin: 0; padding: var(--spacing-medium) var(--row-height-big) var(--card-spacing) var(--card-spacing); diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index ca17b98f4d..9e715264f8 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -36,7 +36,7 @@ --color-green: #d5e7d4; --color-green-dark: #248641; --color-red: #e50026; - --color-red-notification: #d94100; + --color-red-notification: var(--oip-color-red-notification); --color-white: #fff; --color-yellow: #f8d62d; --color-yellow-dark: #cca000; diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html index 349b51ca8d..eee49080de 100644 --- a/src/open_inwoner/templates/pages/cases/document_form.html +++ b/src/open_inwoner/templates/pages/cases/document_form.html @@ -8,6 +8,6 @@ {% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %} {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}

    {% endrender_form %} diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 34f5a403ed..13fe550553 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -1,7 +1,7 @@ {% load link_tags button_tags i18n grid_tags icon_tags list_tags pagination_tags utils %}

    {{ page_title }} ({{ paginator.count }})

    -

    {{ title_text }}

    +

    {{ title_text }}

    {% render_grid %} diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html index 0fc0a285d1..1844d2e921 100644 --- a/src/open_inwoner/templates/pages/product/detail.html +++ b/src/open_inwoner/templates/pages/product/detail.html @@ -33,7 +33,7 @@

    {% endif %}

    {% include "components/Tag/Tag.html" with tags=object.tags.all only %} -

    {{ object.summary }}

    +

    {{ object.summary }}

    {# Collapsable content #}