From f68db94d917b732a6897c197b47ffd3718a76f15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Sch=C3=A4fer?= Date: Thu, 28 Jan 2021 17:24:24 +0100 Subject: [PATCH] Redo the welcome navigation 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. --- snikket_web/scss/_theme.scss | 1 + snikket_web/scss/app.scss | 67 +++++++++++++++------------ snikket_web/templates/admin_home.html | 52 ++++++++++++++------- snikket_web/templates/user_home.html | 55 ++++++++++++++-------- 4 files changed, 108 insertions(+), 67 deletions(-) diff --git a/snikket_web/scss/_theme.scss b/snikket_web/scss/_theme.scss index 62a2de0..f3a9028 100644 --- a/snikket_web/scss/_theme.scss +++ b/snikket_web/scss/_theme.scss @@ -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; diff --git a/snikket_web/scss/app.scss b/snikket_web/scss/app.scss index ecca1d2..c726b48 100644 --- a/snikket_web/scss/app.scss +++ b/snikket_web/scss/app.scss @@ -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; + } + } + } +} diff --git a/snikket_web/templates/admin_home.html b/snikket_web/templates/admin_home.html index cff47f7..4f49081 100644 --- a/snikket_web/templates/admin_home.html +++ b/snikket_web/templates/admin_home.html @@ -2,22 +2,38 @@ {% block content %}

{% trans %}Welcome to the administration dashboard!{% endtrans %}

{% trans user_name=user_info.display_name %}At your service, {{ user_name }}.{% endtrans %}

-
- -

{% trans %}Manage users{% endtrans %}

-

{% trans %}Modify administrative user information or delete users.{% endtrans %}

- - -

{% trans %}Manage circles{% endtrans %}

-

{% trans %}Create and manage social circles represented on your service.{% endtrans %}

- - -

{% trans %}Manage invitations{% endtrans %}

-

{% trans %}Create, revoke or view invitations.{% endtrans %}

- - -

{% trans %}Back to the main view{% endtrans %}

-

{% trans %}Go back to your user’s web portal page.{% endtrans %}

- -
+ {% endblock %} diff --git a/snikket_web/templates/user_home.html b/snikket_web/templates/user_home.html index 64be7df..32b7ae7 100644 --- a/snikket_web/templates/user_home.html +++ b/snikket_web/templates/user_home.html @@ -2,23 +2,40 @@ {% block content %}

{% trans %}Welcome!{% endtrans %}

{% trans user_name=user_info.display_name %}Welcome home, {{ user_name }}.{% endtrans %}

-
- -

{% trans %}Update profile{% endtrans %}

-

{% trans %}Change display name, set avatar and configure visibility of your personal data to others.{% endtrans %}

- - -

{% trans %}Change password{% endtrans %}

- - {% if user_info.is_admin %} - -

{% trans %}Admin dashboard{% endtrans %}

-

{% trans %}Manage users and invitations of this Snikket service.{% endtrans %}

- - {% endif %} - -

{% trans %}Log out{% endtrans %}

-

{% trans %}Exit the Snikket Web Portal, without logging out your other devices.{% endtrans %}

- -
+ {% endblock %}