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

Add support for a flash message sidebar

Browse Source
This commit is contained in:
Jonas Schäfer
2021-02-06 12:00:45 +01:00
parent 8b66c5a063
commit 9876e42fb7
4 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
snikket_web/scss/_theme.scss
View File

@@ -252,3 +252,4 @@ $h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 10
$h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%]; $h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%];
$small-screen-threshold: 40rem; $small-screen-threshold: 40rem;
$medium-screen-threshold: 60rem; $medium-screen-threshold: 60rem;
$large-screen-threshold: 80rem;

28
snikket_web/scss/app.scss
View File

@@ -33,13 +33,35 @@ body {
main { main {
padding: $w-l1; padding: $w-l1;
margin-left: auto;
max-width: 60rem;
margin-right: auto;
} }
#mwrap { #mwrap {
flex: 1; flex: 1;
display: flex;
flex-direction: row-reverse;
> .filler, > .flashbox {
flex: 1 1 1rem;
}
> main {
flex: 0 1 60rem;
}
}
@media screen and (max-width: $large-screen-threshold) {
#mwrap {
display: block;
> main {
margin-left: auto;
margin-right: auto;
}
}
}
.flashbox > div.box > :first-child {
margin-top: 0;
} }
/* top bar */ /* top bar */

4
snikket_web/templates/login.html
View File

@@ -9,7 +9,7 @@
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="mwrap"><main><div class="form layout-expanded"> <div id="mwrap"><div class="filler"></div><main><div class="form layout-expanded">
<h1 class="form-title">{{ config["SITE_NAME"] }}</h1> <h1 class="form-title">{{ config["SITE_NAME"] }}</h1>
<p class="form-desc">{{ _("Enter your Snikket address and password to manage your account.") }}</p> <p class="form-desc">{{ _("Enter your Snikket address and password to manage your account.") }}</p>
<form method="POST" action="{{ url_for('.login') }}" name="login" id="login-form" onsubmit="return domainCheck();" data-addressid="{{ form.address.id }}" data-domain="{{ config["SNIKKET_DOMAIN"] }}"> <form method="POST" action="{{ url_for('.login') }}" name="login" id="login-form" onsubmit="return domainCheck();" data-addressid="{{ form.address.id }}" data-domain="{{ config["SNIKKET_DOMAIN"] }}">
@@ -51,6 +51,6 @@ var domainCheck = function() {
return true; return true;
}; };
</script> </script>
</div></main></div> </div></main><div class="filler"></div></div>
{%- include "_footer.html" -%} {%- include "_footer.html" -%}
{% endblock %} {% endblock %}

21
snikket_web/templates/unauth.html
View File

@@ -7,6 +7,25 @@
<div class="filler"></div> <div class="filler"></div>
{% block topbar_right %}{% endblock %} {% block topbar_right %}{% endblock %}
</div> </div>
<div id="mwrap"><main>{% block content %}{% endblock %}</main></div> <div id="mwrap">
{#- -#}
<div class="flashbox">
{%- for category, message in get_flashed_messages(True) -%}
<div class="box {{ category }} el-5" role="alert">
{% if category == "success" %}
<header>{% trans %}Operation successful{% endtrans %}</header>
{% elif category == "alert" %}
<header>{% trans %}Error{% endtrans %}</header>
{% endif %}
<p>{{ message }}</p>
</div>
{%- endfor -%}
</div>
{#- -#}
<main>{% block content %}{% endblock %}</main>
{#- -#}
<div class="filler"></div>
{#- -#}
</div>
{%- include "_footer.html" -%} {%- include "_footer.html" -%}
{% endblock %} {% endblock %}