From 06a0c9f87f1e6e2e0d5d9037e1b5b5e7a1b60f3e Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Thu, 4 Apr 2024 17:51:35 +0200 Subject: [PATCH 1/2] [#2272] Added unique grid, fixed ellipsis for file-list --- .../templates/components/File/File.html | 6 +-- .../templates/components/File/FileTable.html | 2 +- .../templates/components/Form/FileInput.html | 2 +- .../js/components/form/FileInput.js | 4 +- .../scss/components/Cases/CaseDetail.scss | 47 ++++++++++++++++++- .../scss/components/Cases/Cases.scss | 4 -- .../scss/components/File/File.scss | 25 ++++++---- .../scss/components/File/FileList.scss | 4 ++ .../scss/components/Form/FileInput.scss | 8 ++-- .../scss/components/Grid/Grid.scss | 6 ++- .../scss/components/Typography/H2.scss | 18 +++---- .../scss/components/UserFeed/UserFeed.scss | 6 ++- .../cms/plugins/userfeed/userfeed.html | 10 ++-- .../templates/pages/cases/status_inner.html | 9 +++- .../templates/pages/cases/status_outer.html | 2 +- .../templates/pages/cases/statuses.html | 4 +- 16 files changed, 109 insertions(+), 48 deletions(-) diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html index 8f522efdb9..597d3af8a9 100644 --- a/src/open_inwoner/components/templates/components/File/File.html +++ b/src/open_inwoner/components/templates/components/File/File.html @@ -11,7 +11,7 @@ {% endif %}

-

+

{% if recently_added %} {% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% trans "Nieuw" %} {% endif %} @@ -37,7 +37,7 @@ {% if show_download %}

- {% button icon="file_download" text=_("Download") href=url icon_outlined=True transparent=True %} + {% button icon="download" text=_("Download") href=url icon_outlined=True transparent=True %}
{% endif %}
@@ -50,7 +50,7 @@ {% enddropdown %} {% elif show_download %} {% trans "Download" as download %} - {% link href=url text=download secondary=True download=True hide_text=True icon="file_download" icon_outlined=True icon_position="before" %} + {% 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 %}
diff --git a/src/open_inwoner/components/templates/components/File/FileTable.html b/src/open_inwoner/components/templates/components/File/FileTable.html index 8de8e8a14a..26b03a4616 100644 --- a/src/open_inwoner/components/templates/components/File/FileTable.html +++ b/src/open_inwoner/components/templates/components/File/FileTable.html @@ -13,7 +13,7 @@ {{ file.name }} {{ file.owner.get_full_name }} {{ file.created_on }} - {% link icon="download" text=_("Download bestand") hide_text=True href=download_url|default:file.file.url download=True %} + {% link icon="file_download" text=_("Download bestand") icon_outlined=True hide_text=True href=download_url|default:file.file.url download=True %} {% endfor %} diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index 5b281b0796..90e27dd7df 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -2,7 +2,7 @@
{% render_card direction="vertical" %} - {% icon icon="upload" icon_position="before" outlined=True %} + {% icon icon="upload" icon_position="before" outlined=True extra_classes="icon--large" %}
diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss index f5334edc86..c27fada556 100644 --- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss +++ b/src/open_inwoner/scss/components/Cases/CaseDetail.scss @@ -1,4 +1,40 @@ -.cases__detail { +.case-detail { + box-sizing: border-box; + + &__documents { + .heading-2__indicator { + display: flex; + flex-direction: row; + + // breaking-text fix + @media (min-width: 315px) { + display: grid; + grid-template-columns: 232px 10px; + } + + @media (min-width: 440px) { + display: flex; + flex-direction: row; + } + + @media (min-width: 768px) { + display: grid; + grid-template-columns: 232px 10px; + } + + @media (min-width: 840px) { + display: flex; + flex-direction: row; + } + } + + .h2.indicator { + display: inline; + font-size: var(--font-size-heading-2); + margin-bottom: var(--spacing-extra-large); + } + } + .documents-upload__h3 { margin: var(--spacing-extra-large) 0; } @@ -95,4 +131,13 @@ #cases-contact-form-content > h2 { margin-top: var(--spacing-extra-large); } + + .contactmomenten { + margin: 0; + } + + .textarea { + height: var(--header-height); + width: 100%; + } } diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss index 29d3efbe6f..7bc0e68438 100644 --- a/src/open_inwoner/scss/components/Cases/Cases.scss +++ b/src/open_inwoner/scss/components/Cases/Cases.scss @@ -16,8 +16,4 @@ padding-top: var(--spacing-medium); padding-bottom: var(--spacing-extra-large); } - - &__detail { - box-sizing: border-box; - } } diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss index eb722614a3..fa82793639 100644 --- a/src/open_inwoner/scss/components/File/File.scss +++ b/src/open_inwoner/scss/components/File/File.scss @@ -31,8 +31,18 @@ &__data { display: flex; flex-direction: column; + adding: var(--spacing-large); + font-family: var(--font-family-body); + line-height: var(--spacing-extra-large); + padding: var(--spacing-large); + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; - > * { + .file__name { + margin: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -45,19 +55,15 @@ box-sizing: border-box; } + .file__download { + margin-left: auto; + } + &__file .link:hover { color: var(--font-color-body); text-decoration: none; } - &__file .file__data { - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: var(--spacing-extra-large); - } - &__file .link__text { display: none; @@ -75,6 +81,7 @@ } &__file + .file__data { + background-color: greenyellow; margin-top: var(--spacing-small); } diff --git a/src/open_inwoner/scss/components/File/FileList.scss b/src/open_inwoner/scss/components/File/FileList.scss index 2c3c7bfe76..fceec6c682 100644 --- a/src/open_inwoner/scss/components/File/FileList.scss +++ b/src/open_inwoner/scss/components/File/FileList.scss @@ -18,6 +18,10 @@ margin-bottom: 0; } } + + &__heading { + display: flex; + } } /// diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss index 1f56d64258..ac8eb8bf5c 100644 --- a/src/open_inwoner/scss/components/Form/FileInput.scss +++ b/src/open_inwoner/scss/components/Form/FileInput.scss @@ -16,6 +16,10 @@ pointer-events: none; } + .icon--large[class*='icon'] { + font-size: 40px; + } + .card__body { box-sizing: border-box; padding: var(--row-height); @@ -83,10 +87,6 @@ & .file-list { margin-bottom: var(--spacing-large) !important; - &__list-item { - } - margin-bottom: var(--spacing-large); - // upload-error styles .file__file.error { border-color: var(--color-red-notification); diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss index 6ac6c6d84d..30842f4a45 100644 --- a/src/open_inwoner/scss/components/Grid/Grid.scss +++ b/src/open_inwoner/scss/components/Grid/Grid.scss @@ -10,7 +10,11 @@ } &__main { - display: grid; + display: block; + + @media (min-width: 768px) { + display: grid; + } /// Home grid diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss index 3115bc9292..674ca368fd 100644 --- a/src/open_inwoner/scss/components/Typography/H2.scss +++ b/src/open_inwoner/scss/components/Typography/H2.scss @@ -37,23 +37,17 @@ &.indicator { display: inline-block; + justify-content: flex-start; overflow: visible; position: relative; - - &:after { - content: ''; - background-color: var(--color-red-notification); - border-radius: 100px; - display: inline-block; - height: 8px; - position: absolute; - right: -12px; - top: 6px; - width: 8px; - } } } +.heading-2__indicator { + display: flex; + flex-direction: row; +} + /// /// Contextual. /// diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss index 71549576f4..451ddfc30e 100644 --- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss +++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss @@ -26,10 +26,14 @@ &:after { content: ' '; position: absolute; - border-right: 1px solid var(--color-red-notification); + border-right: none; right: -4px; top: 2px; height: 16px; + + @media (min-width: 768px) { + border-right: 1px solid var(--color-red-notification); + } } &:first-child { diff --git a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html index 453a1af3b1..96032dfb9e 100644 --- a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html +++ b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html @@ -2,9 +2,13 @@ {% if userfeed %}
-

- {{ instance.title }} -

+
+

+ {{ instance.title }} +

+ {% if userfeed.action_required %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %} +
+
    {% for line in userfeed.summary %} diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html index 76d63c29b6..75c7f6064e 100644 --- a/src/open_inwoner/templates/pages/cases/status_inner.html +++ b/src/open_inwoner/templates/pages/cases/status_inner.html @@ -60,8 +60,13 @@

    {% trans "Document toevoegen" %}

    {# Documents #} {% if case.documents %} -

    {% trans 'Eerder toegevoegde documenten' %}

    - {% case_document_list case.documents %} +
    +
    +

    {% trans 'Eerder toegevoegde documenten' %}

    + {% if case.new_docs %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %} +
    + {% case_document_list case.documents %} +
    {% endif %} {# Questions/contactmomenten #} diff --git a/src/open_inwoner/templates/pages/cases/status_outer.html b/src/open_inwoner/templates/pages/cases/status_outer.html index 6482f690cf..5be6efd3ed 100644 --- a/src/open_inwoner/templates/pages/cases/status_outer.html +++ b/src/open_inwoner/templates/pages/cases/status_outer.html @@ -6,7 +6,7 @@ {% endblock notifications %} {% block content %} -
    +