Skip to content

Commit

Permalink
account-settings: style according to new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@vellip
vellip committed Jan 13, 2025
1 parent 165ff35 commit 4b0f630
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 105 deletions.
6 changes: 6 additions & 0 deletions changelog/8682.md
View file
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion meinberlin/apps/account/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
110 changes: 55 additions & 55 deletions meinberlin/apps/account/templates/meinberlin_account/account_dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,67 @@
{% load i18n socialaccount %}

{% block title %}
{% translate "User Dashboard" %}
—
{{ block.super }}
{% translate "User Dashboard" %}
—
{{ block.super }}
{% endblock title %}

{% block breadcrumbs %}
<div id="content-header">
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
<ol>
<li>
<a href="{% url 'wagtail_serve' '' %}">{% translate 'meinBerlin Homepage' %}</a>
</li>
<li class="active" aria-current="page">{% translate 'Account Settings' %}</li>
</ol>
</nav>
</div>
<div id="content-header">
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
<ol>
<li>
<a href="{% url 'wagtail_serve' '' %}">{% translate 'meinBerlin Homepage' %}</a>
</li>
<li class="active" aria-current="page">{% translate 'Account Settings' %}</li>
</ol>
</nav>
</div>
{% endblock breadcrumbs %}

{% block content %}
<div id="layout-grid__area--maincontent">
<div id="layout-grid__area--maincontent">
<h1>{% translate "Account & Security" %}</h1>

<nav class="dashboard-nav" aria-label="{% translate 'User Dashboard navigation' %}">
<div class="dashboard-nav__dropdown">
<div class="dashboard-nav__item">
{{ request.user.username }}
</div>
</div>
{% with request.resolver_match.url_name as url_name %}
<ul class="dashboard-nav__pages">
<li class="dashboard-nav__page">
<a href="{% url 'account_profile' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_profile" %}is-active{% endif %}">
{% translate 'Profile' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_actions' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_actions" %}is-active{% endif %}">
{% translate 'Activities' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_change_password' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_change_password" %}is-active{% endif %}">
{% translate 'Change password' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_email' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_email" %}is-active{% endif %}">
{% translate 'Email addresses' %}
</a>
</li>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<li class="dashboard-nav__page">
<a href="{% url 'socialaccount_connections' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " socialaccount_connections" %}is-active{% endif %}">
{% translate 'Account Connections' %}
</a>
</li>
{% endif %}
</ul>
{% endwith %}
</nav>
<p>
{% translate "Manage your username, your password and your e-mail addresses." %}
</p>

{% block dashboard_content %}{% endblock dashboard_content %}
</div>
<nav class="dashboard-nav" aria-label="{% translate 'User Dashboard navigation' %}">
{% with request.resolver_match.url_name as url_name %}
<ul class="dashboard-nav__pages">
<li class="dashboard-nav__page">
<a href="{% url 'account_profile' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_profile" %}is-active{% endif %}">
{% translate 'Profile' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_actions' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_actions" %}is-active{% endif %}">
{% translate 'Activities' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_change_password' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_change_password" %}is-active{% endif %}">
{% translate 'Change password' %}
</a>
</li>
<li class="dashboard-nav__page">
<a href="{% url 'account_email' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " account_email" %}is-active{% endif %}">
{% translate 'Email addresses' %}
</a>
</li>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<li class="dashboard-nav__page">
<a href="{% url 'socialaccount_connections' %}" class="dashboard-nav__item dashboard-nav__item--interactive {% if request.resolver_match.url_name == " socialaccount_connections" %}is-active{% endif %}">
{% translate 'Account Connections' %}
</a>
</li>
{% endif %}
</ul>
{% endwith %}
</nav>

{% block dashboard_content %}{% endblock dashboard_content %}
</div>
{% endblock content %}
8 changes: 1 addition & 7 deletions meinberlin/apps/account/templates/meinberlin_account/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,11 @@

{% block title %}{% translate 'Your user profile' %} — {{ block.super }}{% endblock title %}
{% block dashboard_content %}
<h1>{% translate 'Your profile' %}</h1>

<form enctype="multipart/form-data" action="{{ request.path }}" method="post">
{% 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>
{{ form.media }}
{% endblock dashboard_content %}
44 changes: 44 additions & 0 deletions meinberlin/assets/scss/components_user_facing/_actionable-list.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 6 additions & 0 deletions meinberlin/assets/scss/components_user_facing/_pill.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@
background-color: $white;
color: $text-base;
}

&--ghost {
background-color: transparent;
color: $text-base;
border: 1px solid currentcolor;
}
}

.pill__list {
Expand Down
1 change: 1 addition & 0 deletions meinberlin/assets/scss/style_user_facing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
93 changes: 53 additions & 40 deletions meinberlin/templates/account/email.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,58 +5,71 @@
{% block title %}{% translate 'Email Addresses' %} — {{ block.super }}{% endblock title %}

{% block dashboard_content %}
<h1 class="u-first-heading">{% translate 'Email Addresses' %}</h1>
<h4>{% translate 'Manage your Email Addresses' %}</h4>

<form class="multiform" action="{% url 'account_email' %}?next={{ request.path|urlencode }}" method="post">
{% csrf_token %}
<ul class="actionable-list">
{% for emailaddress in user.emailaddress_set.all %}
<div class="form-check">
<label class="form-check__label">
<input type="radio" name="email"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked" {% endif %}
value="{{ emailaddress.email }}">
<li class="actionable-list__item">
<form class="actionable-list__item__wrapper" action="{% url 'account_email' %}?next={{ request.path|urlencode }}" method="post">
{% csrf_token %}
<div class="actionable-list__item__body">
<input type="hidden" name="email" value="{{ emailaddress.email }}"/>
{{ emailaddress.email }}
{% if emailaddress.primary %}
<span class="label">{% translate "Primary" %}</span>
{% endif %}
{% if emailaddress.verified %}
<span class="label">{% translate "Verified" %}</span>
{% else %}
<span class="label">{% translate "Unverified" %}</span>
{% endif %}
</label>
</div>
{% endfor %}
<div class="actionable-list__item__details">
<ul class="pill__list">
{% if emailaddress.primary %}
<li class="pill pill--ghost">{% translate "Primary" %}</li>
{% endif %}
{% if emailaddress.verified %}
<li class="pill">{% translate "Verified" %}</li>
{% else %}
<li class="pill">{% translate "Unverified" %}</li>
{% endif %}
</ul>
</div>
</div>

<div class="u-spacer-bottom">
<button class="btn btn--primary" type="submit" name="action_primary">{% translate 'Make Primary' %}</button>
<button class="btn btn--secondary" type="submit" name="action_send">{% translate 'Re-send Verification' %}</button>
<button class="btn btn--secondary" type="submit" name="action_remove" >{% translate 'Remove' %}</button>
</div>
</form>
<div class="actionable-list__item__actions">
<button type="submit" name="action_send"><i class="fas fa-envelope" aria-hidden="true"></i> {% translate 'Re-send Verification' %}</button>
<button type="submit" name="action_remove"><i class="far fa-trash-can" aria-hidden="true"></i> {% translate 'Remove' %}</button>
<div class="actionable-list__item__actions__bottom">
<button
class="button button--light button--fullwidth-palm"
type="submit"
name="action_primary"
{% if emailaddress.primary %}disabled{% endif %}
>
{% translate 'Make Primary' %}
</button>
</div>
</div>
</form>
</li>
{% endfor %}
</ul>

<form class="multiform" method="post" action="{% url 'account_email' %}">
<form class="multiform" method="post" action="{% url 'account_email' %}">
{% csrf_token %}
{% if form.non_field_errors %}
<ul class="errorlist" aria-live="assertive" aria-atomic="true">
<ul class="errorlist" aria-live="assertive" aria-atomic="true">
{% for error in form.non_field_errors %}
<li>{{ error|escape }}</li>
<li>{{ error|escape }}</li>
{% endfor %}
</ul>
</ul>
{% endif %}

<div class="form-group">
<label class="control-label" for="{{ form.email.id_for_label }}">{% translate "Add another Email" %}</label>
{% if form.email.errors %}
<ul class="errorlist" aria-live="assertive" aria-atomic="true">
{% for error in form.email.errors %}
<li>{{ error|escape }}</li>
{% endfor %}
</ul>
{% endif %}
{{ form.email|add_class:"form-control"|add_error_attr:"aria-invalid:true" }}
<label class="control-label" for="{{ form.email.id_for_label }}">{% translate "Add another Email" %}</label>
{% if form.email.errors %}
<ul class="errorlist" aria-live="assertive" aria-atomic="true">
{% for error in form.email.errors %}
<li>{{ error|escape }}</li>
{% endfor %}
</ul>
{% endif %}
{{ form.email|add_class:"form-control"|add_error_attr:"aria-invalid:true" }}
</div>

{% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Add Email' %}
</form>
{% include 'meinberlin_contrib/includes/form_submit_flex_end.html' with button_text='Add' %}
</form>
{% endblock dashboard_content %}
4 changes: 2 additions & 2 deletions meinberlin/templates/account/password_change.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h1 class="u-first-heading">{% translate 'Change your password' %}</h1>
</div>

<div class="form-group">
<label for="{{ form.password2.id_for_label }}">{% translate "New Password (again)" %}</label>
<label for="{{ form.password2.id_for_label }}">{% translate "New Password (repeat)" %}</label>
{% if form.password2.errors %}
<ul class="errorlist" aria-live="assertive" aria-atomic="true">
{% for error in form.password2.errors %}
Expand All @@ -54,6 +54,6 @@ <h1 class="u-first-heading">{% translate 'Change your password' %}</h1>
{{ form.password2|add_error_attr:"aria-invalid:true" }}
</div>

{% 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' %}
</form>
{% endblock dashboard_content %}

0 comments on commit 4b0f630

Please sign in to comment.