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

Iterate further on the welcome page

Browse Source
This commit is contained in:
Jonas Schäfer
2021-01-28 18:25:10 +01:00
parent 46c7b3be11
commit af61705482
3 changed files with 112 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
snikket_web/scss/app.scss
View File

@@ -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;
}
}
}
}

1
snikket_web/templates/app.html
View File

@@ -5,5 +5,4 @@
{% endblock %}
{% block topbar_right %}
{{- super() -}}
<nav class="usermenu">{{ user_info.display_name }}{% call avatar(user_info.address, user_info.avatar_hash ) %}{% endcall %}</nav>
{%- endblock %}

24
snikket_web/templates/user_home.html
View File

@@ -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 %}
<h1>{% trans %}Welcome!{% endtrans %}</h1>
<p>{% trans user_name=user_info.display_name %}Welcome home, {{ user_name }}.{% endtrans %}</p>
<nav class="welcome">
<ul>
<li>
<li class="wide">
<h2>{% trans %}Your profile{% endtrans %}</h2>
<div class="profile-card">
<div class="picture" aria-label="Your profile picture">{% call avatar(user_info.address, user_info.avatar_hash ) %}{% endcall %}</div>
<div class="details">
<div class="display-name">{{ user_info.display_name | default(user_info.username) }}</div>
<div class="address">
<input value="{{ user_info.address }}">
{% call clipboard_button(user_info.address) %}{% trans %}Copy address{% endtrans %}{% endcall %}
</div>
</div>
</div>
{#- -#}
<p>{% trans %}Change your display name, set a profile picture and control visibility of your personal data to others.{% endtrans %}</p>
{# <p>{% trans %}Change your display name, set a profile picture and control visibility of your personal data to others.{% endtrans %}</p> #}
{#- -#}
{# <img aria-hidden="true" src="{{ url_for("static", filename="img/illus-profile.svg") }}"> #}
{#- -#}
<div><a class="button primary" href="{{ url_for(".profile") }}">{% trans %}Settings{% endtrans %}</a></div>
<div>{% call standard_button("edit", url_for(".profile"), class="primary") %}{% trans %}Edit profile{% endtrans %}{% endcall %}</div>
{#- -#}
</li>
<li>
{#- -#}
<p>{% trans %}If need be, you can change your password here.{% endtrans %}</p>
{#- -#}
<div><a class="button primary" href="{{ url_for(".profile") }}">{% trans %}Change password{% endtrans %}</a></div>
<div><a class="button primary" href="{{ url_for(".change_pw") }}">{% trans %}Change password{% endtrans %}</a></div>
{#- -#}
</li>
{% if user_info.is_admin %}