From af61705482ff2cca770bbe9584d1be5242ceaa1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Sch=C3=A4fer?= Date: Thu, 28 Jan 2021 18:25:10 +0100 Subject: [PATCH] Iterate further on the welcome page --- snikket_web/scss/app.scss | 137 ++++++++++++++++++--------- snikket_web/templates/app.html | 1 - snikket_web/templates/user_home.html | 24 ++++- 3 files changed, 112 insertions(+), 50 deletions(-) diff --git a/snikket_web/scss/app.scss b/snikket_web/scss/app.scss index b15b34d..4cc13dc 100644 --- a/snikket_web/scss/app.scss +++ b/snikket_web/scss/app.scss @@ -846,6 +846,98 @@ ul.inline { } +/* welcome screen specials */ + +nav.welcome { + > ul { + display: flex; + flex-wrap: wrap; + list-style-type: none; + justify-content: center; + padding: 0; + + > li { + @extend .el-3; + background-color: white; + + flex: 1 0 $w-l7; + margin: $w-s1; + padding: $w-s1 $w-l1; + text-align: center; + max-width: $w-l8; + + display: flex; + flex-direction: column; + justify-content: space-between; + + &.wide { + flex: 1 0 auto; + text-align: left; + display: block; + } + + .button { + display: block; + margin: $w-l1 0; + } + + 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; + } + } + } +} + +div.profile-card { + display: flex; + flex-direction: row; + margin: $w-l1 0; + + > div.picture { + flex: 0 0 auto; + } + + > div.details { + flex: 1 0 auto; + display: flex; + flex-direction: column; + + > .display-name { + font-size: nth($h-small-sizes, 5); + line-height: 1.5 / (nth($h-small-sizes, 5) / 100%); + } + + > .address { + display: flex; + flex-direction: row; + + > input { + flex: 1 1 auto; + background-color: transparent; + border: none; + padding: 0; + margin: 0; + min-width: 0; + width: 0; + } + + > .button { + flex: 0 0 auto; + margin: 0; + } + } + } +} + + /* linearisation / responsive stuff */ @media screen and (max-width: $medium-screen-threshold) { @@ -1155,48 +1247,3 @@ 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 { - @extend .el-3; - background-color: white; - - flex: 1 0 $w-l7; - margin: $w-s1; - padding: $w-s1 $w-l1; - text-align: center; - max-width: $w-l8; - - display: flex; - flex-direction: column; - justify-content: space-between; - - .button { - display: block; - margin: $w-l1 0; - } - - 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/app.html b/snikket_web/templates/app.html index e830f61..432bd17 100644 --- a/snikket_web/templates/app.html +++ b/snikket_web/templates/app.html @@ -5,5 +5,4 @@ {% endblock %} {% block topbar_right %} {{- super() -}} - {%- endblock %} diff --git a/snikket_web/templates/user_home.html b/snikket_web/templates/user_home.html index b45d736..ffe011e 100644 --- a/snikket_web/templates/user_home.html +++ b/snikket_web/templates/user_home.html @@ -1,23 +1,39 @@ {% extends "app.html" %} +{% from "library.j2" import clipboard_button, standard_button %} +{% block head_lead %} +{{ super() }} +{% include "copy-snippet.html" %} +{% endblock %} {% block content %}

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

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