diff --git a/src/open_inwoner/components/templates/components/Card/RenderCard.html b/src/open_inwoner/components/templates/components/Card/RenderCard.html index f1d9b9bc7b..e1f54d06ea 100644 --- a/src/open_inwoner/components/templates/components/Card/RenderCard.html +++ b/src/open_inwoner/components/templates/components/Card/RenderCard.html @@ -10,7 +10,7 @@ {% endif %} -
+
{% if title %}

{{ title }} diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index b469e7f43c..dc4434387b 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -4,6 +4,8 @@ --card-size-border: var(--border-width-thin); --card-size-dog-ear: var(--gutter-width); --card-spacing: var(--spacing-large); + --card-spacing-vertical: var(--spacing-giant); + --card-spacing-horizontal: var(--spacing-extra-large); background-color: var(--card-color-background); border: var(--card-size-border) solid var(--card-color-border); @@ -98,8 +100,26 @@ object-fit: contain; } + &__caption { + color: var(--color-gray-dark-900); + margin: 0; + } + + &__text--small { + font-size: var(--font-size-body-small); + } + + &__text--dark { + color: var(--font-color-body); + padding-left: var(--spacing-medium); + } + &__body { - padding: var(--card-spacing); + padding: var(--card-spacing-vertical) var(--card-spacing-horizontal); + + &--compact { + padding: var(--card-spacing); + } &--tabled { display: flex; @@ -223,6 +243,14 @@ font-size: var(--font-size-heading-card); } + &__heading { + color: var(--color-black); + font-family: var(--font-family-heading); + font-size: var(--font-size-heading-card); + line-height: var(--font-line-height-body-medium); + margin: 0; + } + &--product { padding: 20px; align-items: end; @@ -255,7 +283,7 @@ span.button:last-child { bottom: 0; right: 0; - padding-bottom: var(--card-spacing); + padding-bottom: var(--card-spacing-vertical); position: absolute; } @@ -283,7 +311,7 @@ &--stretch .list + .link:first-of-type:last-of-type, &--stretch .profile-card__button { - bottom: var(--card-spacing); + bottom: var(--card-spacing-vertical); position: static; @media (min-width: 768px) { diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss index bd6a787ade..37528115e6 100644 --- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss +++ b/src/open_inwoner/scss/components/Cases/CaseDetail.scss @@ -39,7 +39,7 @@ @extend .button--disabled; background-color: var(--color-gray); border-color: var(--color-gray); - color: var(--color-gray-90); + color: var(--color-gray-dark-900); cursor: default; font-weight: bold; justify-content: center; @@ -52,7 +52,7 @@ @extend .button--disabled; background-color: var(--color-gray); border-color: var(--color-gray); - color: var(--color-gray-90); + color: var(--color-gray-dark-900); cursor: default; font-weight: bold; justify-content: center; diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss index 3e3ee2c441..7f8ebde4b7 100644 --- a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss +++ b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss @@ -49,7 +49,7 @@ } &__item-label { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } .h4 { diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss index b1062ea71b..48be1a8528 100644 --- a/src/open_inwoner/scss/components/Form/FileInput.scss +++ b/src/open_inwoner/scss/components/Form/FileInput.scss @@ -88,7 +88,7 @@ border-color: var(--color-red-notification); .p { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } [class*='icon'] { diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss index 4e5a34ea77..ab7959d343 100644 --- a/src/open_inwoner/scss/components/List/_ListItem.scss +++ b/src/open_inwoner/scss/components/List/_ListItem.scss @@ -21,7 +21,8 @@ } & &__caption { - color: var(--color-gray-lighter); + color: var(--color-gray-dark-900); + font-size: var(--font-size-body-small); margin-top: 0; } diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss index c145424a8a..7fdd096563 100644 --- a/src/open_inwoner/scss/components/Status/_StatusList.scss +++ b/src/open_inwoner/scss/components/Status/_StatusList.scss @@ -51,7 +51,7 @@ } .link-future { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); } .p-date { diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss index c1ea145f7a..1c1213f299 100644 --- a/src/open_inwoner/scss/components/Table/Tabled.scss +++ b/src/open_inwoner/scss/components/Table/Tabled.scss @@ -3,7 +3,7 @@ flex-direction: column; &__key { - color: var(--color-gray-90); + color: var(--color-gray-dark-900); @media (max-width: 500px) { min-width: 150px; } diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss index 7c36e463f7..72a6f8da0b 100644 --- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss +++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss @@ -71,7 +71,8 @@ .card__body { background-color: #fff; - padding-right: var(--row-height); + border-radius: var(--border-radius); + padding: var(--card-spacing); .tabled__value { color: var(--color-gray-dark); @@ -81,7 +82,7 @@ } span.button:last-child { - bottom: 20px; + bottom: var(--spacing-medium); } } } diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index c4f4b23af4..9e734fc18e 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -25,8 +25,8 @@ --color-black: #000; --color-blue: #1261a3; --color-gray: #d2d2d2; - --color-gray-90: #676767; - --color-gray-dark: #4b4b4b; + --color-gray-dark: rgba(75, 75, 75, 1); + --color-gray-dark-900: rgba(75, 75, 75, 0.9); --color-gray-lighter: #7a7a7a; --color-gray-light: #d2d2d2; --color-gray-lightest: #f3f3f3; diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 6d453b9647..492303c639 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -16,38 +16,42 @@

{{ page_title }} ({{ paginator.count }}
{% if case.case_type == "OpenSubmission" %} - -

{{ case.naam }}

+
+

{{ case.naam }}

{% render_list %} +
  • + {% with end_date=case.eind_datum_geldigheid|default:"Geen" %} +

    {% trans "Aanvraag verloopt op:" %}{{ end_date|date }}

    + {% endwith %} +
  • {% list_item text="Openstaande aanvraag" caption=_("Status") compact=True strong=False %} - {% list_item text=case.datum_laatste_wijziging caption=_("Laatste wijziging") compact=True strong=False %} - {% with end_date=case.eind_datum_geldigheid|default:"Geen" %} - {% list_item text=end_date caption=_("Verloopt op") compact=True strong=False%} - {% endwith %}
    {% endrender_list %} - - {% trans "Bekijk aanvraag" %} + + {% trans "Voltooi aanvraag" %} {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
    {% else %} -

    {{ case.description }}

    +

    {{ case.description }}

    {% render_list %} +
  • +

    {% trans "Aanvraag ingediend op:" %}{{ case.start_date }}

    +
  • {% if case.current_status %} {% list_item case.current_status caption=_("Status") compact=True strong=False %} {% else %} {% list_item "No status" caption=_("Status") compact=True strong=False %} {% endif%} - {% list_item case.start_date caption=_("Ontvangstdatum") compact=True strong=False %} {% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
    {% endrender_list %} - + + {{ case.statustype_config.case_link_text|default:"Bekijk aanvraag" }} {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html index ba5d89ea08..7ea7bb4ed7 100644 --- a/src/open_inwoner/templates/pages/profile/me.html +++ b/src/open_inwoner/templates/pages/profile/me.html @@ -2,7 +2,7 @@ {% load i18n l10n link_tags file_tags card_tags grid_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %} {% block sidebar_content %} - {% anchor_menu anchors desktop=True %} + {% anchor_menu anchors=anchors desktop=True %} {% endblock sidebar_content %} {% block content %} @@ -83,7 +83,7 @@

    {% trans "Persoonlijke gegevens" %} {# Notifications #}
    -

    {% trans "Voorkeuren voor meldingen" %} +

    {% trans "Voorkeuren voor meldingen" %}
    {% button href="profile:notifications" text=_("Bewerk") icon="edit" transparent=True icon_outlined=True %}