davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Redo the welcome navigation

Browse Source 
Tester feedback suggested that it looks really content-heavy,
more like blogpost previews or something like that. We now move
to a clear, recognizable "action button with description" style
using the already prominent primary colour.
This commit is contained in:
Jonas Schäfer
2021-01-28 17:24:24 +01:00
parent 16da296f79
commit f68db94d91
4 changed files with 108 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
snikket_web/scss/_theme.scss
View File

@@ -171,6 +171,7 @@ $w-l4: 4rem;
$w-l5: 6rem;
$w-l6: 8rem;
$w-l7: 12rem;
$w-l8: 16rem;
$font-sans: "Noto Sans", sans-serif;
$font-serif: serif;

67
snikket_web/scss/app.scss
View File

@@ -770,36 +770,6 @@ body#login {
}
/* welcome screen specials */
div.welcome-cards {
display: flex;
flex-wrap: wrap;
& > .card {
flex: 1 0 $w-l7;
margin: $w-s1;
@extend .el-2;
padding: $w-s1 $w-l1;
background: white;
}
& > a.card {
text-decoration: none;
color: inherit;
& > h2 {
color: $primary-200;
text-decoration: underline;
}
}
& > .card:hover, & > .card:active, & > .card:focus, & > .card:focus-within {
@extend .el-3;
}
}
/* admin area specials */
#topbar > div.admin-note {
@@ -1185,3 +1155,40 @@ pre.guru-meditation {
.with-tooltip:hover:before, .with-tooltip:hover:after {
display: block;
}
/* welcome screen specials */
nav.welcome {
> ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
justify-content: center;
padding: 0;
> li {
flex: 1 0 $w-l7;
margin: $w-s1;
padding: $w-s1 $w-l1;
text-align: center;
max-width: $w-l8;
.button {
display: block;
}
img {
display: block;
margin: $w-l1 $w-0;
--margin: $w-0 * 2;
width: calc(100% - var(--margin));
}
p {
margin-left: $w-0;
margin-right: $w-0;
}
}
}
}

52
snikket_web/templates/admin_home.html
View File

@@ -2,22 +2,38 @@
{% block content %}
<h1>{% trans %}Welcome to the administration dashboard!{% endtrans %}</h1>
<p>{% trans user_name=user_info.display_name %}At your service, {{ user_name }}.{% endtrans %}</p>
<div class="welcome-cards">
<a class="card" href="{{ url_for('.users') }}">
<h2>{% trans %}Manage users{% endtrans %}</h2>
<p>{% trans %}Modify administrative user information or delete users.{% endtrans %}</p>
</a>
<a class="card" href="{{ url_for('.circles') }}">
<h2>{% trans %}Manage circles{% endtrans %}</h2>
<p>{% trans %}Create and manage social circles represented on your service.{% endtrans %}</p>
</a>
<a class="card" href="{{ url_for('.invitations') }}">
<h2>{% trans %}Manage invitations{% endtrans %}</h2>
<p>{% trans %}Create, revoke or view invitations.{% endtrans %}</p>
</a>
<a class="card" href="{{ url_for('user.index') }}">
<h2>{% trans %}Back to the main view{% endtrans %}</h2>
<p>{% trans %}Go back to your user’s web portal page.{% endtrans %}</p>
</a>
</div>
<nav class="welcome">
<ul>
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for(".users") }}">{% trans %}Users{% endtrans %}</a></div>
{#- -#}
{# <img aria-hidden="true" src="{{ url_for("static", filename="img/illus-profile.svg") }}"> #}
{#- -#}
<p>{% trans %}Create password reset links or delete users.{% endtrans %}</p>
{#- -#}
</li>
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for(".circles") }}">{% trans %}Circles{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}Create and manage social circles represented on your service.{% endtrans %}</p>
{#- -#}
</li>
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for(".invitations") }}">{% trans %}Invitations{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}Create, revoke or copy invitations.{% endtrans %}</p>
{#- -#}
</li>
<li>
{#- -#}
<div><a class="button secondary" href="{{ url_for("user.index") }}">{% trans %}Exit Admin Panel{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}Go back to your user’s web portal page.{% endtrans %}</p>
{#- -#}
</li>
</ul>
</nav>
{% endblock %}

55
snikket_web/templates/user_home.html
View File

@@ -2,23 +2,40 @@
{% block content %}
<h1>{% trans %}Welcome!{% endtrans %}</h1>
<p>{% trans user_name=user_info.display_name %}Welcome home, {{ user_name }}.{% endtrans %}</p>
<div class="welcome-cards">
<a class="card" href="{{ url_for('.profile') }}">
<h2>{% trans %}Update profile{% endtrans %}</h2>
<p>{% trans %}Change display name, set avatar and configure visibility of your personal data to others.{% endtrans %}</p>
</a>
<a class="card" href="{{ url_for('.change_pw') }}">
<h2>{% trans %}Change password{% endtrans %}</h2>
</a>
{% if user_info.is_admin %}
<a class="card" href="{{ url_for('admin.index') }}">
<h2>{% trans %}Admin dashboard{% endtrans %}</h2>
<p>{% trans %}Manage users and invitations of this Snikket service.{% endtrans %}</p>
</a>
{% endif %}
<a class="card" href="{{ url_for('.logout') }}">
<h2>{% trans %}Log out{% endtrans %}</h2>
<p>{% trans %}Exit the Snikket Web Portal, without logging out your other devices.{% endtrans %}</p>
</a>
</div>
<nav class="welcome">
<ul>
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for(".profile") }}">{% trans %}Settings{% endtrans %}</a></div>
{#- -#}
{# <img aria-hidden="true" src="{{ url_for("static", filename="img/illus-profile.svg") }}"> #}
{#- -#}
<p>{% trans %}Change your display name, set a profile picture and control visibility of your personal data to others.{% endtrans %}</p>
{#- -#}
</li>
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for(".profile") }}">{% trans %}Change password{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}If need be, you can change your password here.{% endtrans %}</p>
{#- -#}
</li>
{% if user_info.is_admin %}
<li>
{#- -#}
<div><a class="button primary" href="{{ url_for("admin.index") }}">{% trans %}Admin panel{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}Manage users, invitations and circles of your Snikket service.{% endtrans %}</p>
{#- -#}
</li>
{% endif %}
<li>
{#- -#}
<div><a class="button secondary" href="{{ url_for(".logout") }}">{% trans %}Log out{% endtrans %}</a></div>
{#- -#}
<p>{% trans %}Exit the Snikket Web Portal, without logging out your other devices.{% endtrans %}</p>
{#- -#}
</li>
</ul>
</nav>
{% endblock %}