From 4b0f63020480d3da8385bf69499c055073172575 Mon Sep 17 00:00:00 2001 From: Philipp Veller Date: Mon, 13 Jan 2025 09:19:47 +0100 Subject: [PATCH] account-settings: style according to new design --- changelog/8682.md | 6 + meinberlin/apps/account/forms.py | 2 +- .../meinberlin_account/account_dashboard.html | 110 +++++++++--------- .../templates/meinberlin_account/profile.html | 8 +- .../_actionable-list.scss | 44 +++++++ .../scss/components_user_facing/_pill.scss | 6 + meinberlin/assets/scss/style_user_facing.scss | 1 + meinberlin/templates/account/email.html | 93 ++++++++------- .../templates/account/password_change.html | 4 +- 9 files changed, 169 insertions(+), 105 deletions(-) create mode 100644 changelog/8682.md create mode 100644 meinberlin/assets/scss/components_user_facing/_actionable-list.scss diff --git a/changelog/8682.md b/changelog/8682.md new file mode 100644 index 0000000000..0ef2a65809 --- /dev/null +++ b/changelog/8682.md @@ -0,0 +1,6 @@ +### Added +- Style for new account setting forms +- added a new scss component `actionable-list` where we have a list of items that the user can take an (or multiple) actions on + +### Removed +- Fields for notifications and newsletter from profile form diff --git a/meinberlin/apps/account/forms.py b/meinberlin/apps/account/forms.py index 7475116d4e..925a2b66cb 100644 --- a/meinberlin/apps/account/forms.py +++ b/meinberlin/apps/account/forms.py @@ -6,7 +6,7 @@ class ProfileForm(forms.ModelForm): class Meta: model = User - fields = ["username", "get_notifications", "get_newsletters"] + fields = ["username"] def clean_username(self): username = self.cleaned_data["username"] diff --git a/meinberlin/apps/account/templates/meinberlin_account/account_dashboard.html b/meinberlin/apps/account/templates/meinberlin_account/account_dashboard.html index af825a2294..c81df917b2 100644 --- a/meinberlin/apps/account/templates/meinberlin_account/account_dashboard.html +++ b/meinberlin/apps/account/templates/meinberlin_account/account_dashboard.html @@ -2,67 +2,67 @@ {% load i18n socialaccount %} {% block title %} - {% translate "User Dashboard" %} - — - {{ block.super }} + {% translate "User Dashboard" %} + — + {{ block.super }} {% endblock title %} {% block breadcrumbs %} -
- -
+
+ +
{% endblock breadcrumbs %} {% block content %} -
+
+

{% translate "Account & Security" %}

- +

+ {% translate "Manage your username, your password and your e-mail addresses." %} +

- {% block dashboard_content %}{% endblock dashboard_content %} -
+ + + {% block dashboard_content %}{% endblock dashboard_content %} +
{% endblock content %} diff --git a/meinberlin/apps/account/templates/meinberlin_account/profile.html b/meinberlin/apps/account/templates/meinberlin_account/profile.html index d36b7fdb87..62629da1bf 100644 --- a/meinberlin/apps/account/templates/meinberlin_account/profile.html +++ b/meinberlin/apps/account/templates/meinberlin_account/profile.html @@ -4,17 +4,11 @@ {% block title %}{% translate 'Your user profile' %} — {{ block.super }}{% endblock title %} {% block dashboard_content %} -

{% translate 'Your profile' %}

-
{% csrf_token %} {% include 'meinberlin_contrib/includes/form_field.html' with field=form.username %} - {% include 'meinberlin_contrib/includes/form_checkbox_field.html' with field=form.get_notifications %} - - {% include 'meinberlin_contrib/includes/form_checkbox_field.html' with field=form.get_newsletters %} - - {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Save changes' %} + {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Change' %}
{{ form.media }} {% endblock dashboard_content %} diff --git a/meinberlin/assets/scss/components_user_facing/_actionable-list.scss b/meinberlin/assets/scss/components_user_facing/_actionable-list.scss new file mode 100644 index 0000000000..af9a38e4b8 --- /dev/null +++ b/meinberlin/assets/scss/components_user_facing/_actionable-list.scss @@ -0,0 +1,44 @@ +.actionable-list { + list-style: none; + padding: 0; + margin: 0 0 2.5em; +} + +.actionable-list__item { + padding: 1.5em 0; + border-top: 1px solid $gray-lighter; + + &:last-child { + border-bottom: 1px solid $gray-lighter; + } +} + +.actionable-list__item__wrapper { + margin-bottom: 0; + + @media screen and (min-width: $breakpoint-tablet) { + display: flex; + } +} + +.actionable-list__item__body { + display: flex; +} + +.actionable-list__item__actions { + margin-left: auto; + text-align: right; + margin-top: 1.5em; + + @media screen and (min-width: $breakpoint-tablet) { + margin-top: 0; + } +} + +.actionable-list__item__actions__bottom { + margin-top: 1em; +} + +.actionable-list__item__details { + margin-left: .75em; +} diff --git a/meinberlin/assets/scss/components_user_facing/_pill.scss b/meinberlin/assets/scss/components_user_facing/_pill.scss index f413f36199..1daf45ad12 100644 --- a/meinberlin/assets/scss/components_user_facing/_pill.scss +++ b/meinberlin/assets/scss/components_user_facing/_pill.scss @@ -27,6 +27,12 @@ background-color: $white; color: $text-base; } + + &--ghost { + background-color: transparent; + color: $text-base; + border: 1px solid currentcolor; + } } .pill__list { diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss index ae7a15a026..dc8cd6f4e9 100644 --- a/meinberlin/assets/scss/style_user_facing.scss +++ b/meinberlin/assets/scss/style_user_facing.scss @@ -21,6 +21,7 @@ @import "styles_user_facing/utility"; @import "components_user_facing/accordion-list"; +@import "components_user_facing/actionable-list"; @import "components_user_facing/alert"; @import "components_user_facing/button"; @import "components_user_facing/card"; diff --git a/meinberlin/templates/account/email.html b/meinberlin/templates/account/email.html index 7c3b0b0e4a..b5af005ea7 100644 --- a/meinberlin/templates/account/email.html +++ b/meinberlin/templates/account/email.html @@ -5,58 +5,71 @@ {% block title %}{% translate 'Email Addresses' %} — {{ block.super }}{% endblock title %} {% block dashboard_content %} -

{% translate 'Email Addresses' %}

+

{% translate 'Manage your Email Addresses' %}

-
- {% csrf_token %} +
-
+ {% csrf_token %} {% if form.non_field_errors %} - {% endif %}
- - {% if form.email.errors %} -
    - {% for error in form.email.errors %} -
  • {{ error|escape }}
    • - {% endfor %} -
- {% endif %} - {{ form.email|add_class:"form-control"|add_error_attr:"aria-invalid:true" }} + + {% if form.email.errors %} +
    + {% for error in form.email.errors %} +
  • {{ error|escape }}
    • + {% endfor %} +
+ {% endif %} + {{ form.email|add_class:"form-control"|add_error_attr:"aria-invalid:true" }}
- {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Add Email' %} -
+ {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Add' %} + {% endblock dashboard_content %} diff --git a/meinberlin/templates/account/password_change.html b/meinberlin/templates/account/password_change.html index 188dcb1dbb..1cc280e974 100644 --- a/meinberlin/templates/account/password_change.html +++ b/meinberlin/templates/account/password_change.html @@ -43,7 +43,7 @@

{% translate 'Change your password' %}

- + {% if form.password2.errors %}
- {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Reset' %} + {% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Change' %} {% endblock dashboard_content %}