Fancy messages
This commit is contained in:
parent
1130ee70d9
commit
4ebc8f93f7
BIN
lostplaces/lostplaces_app/static/icons/debug.png
Normal file
BIN
lostplaces/lostplaces_app/static/icons/debug.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
BIN
lostplaces/lostplaces_app/static/icons/error.png
Normal file
BIN
lostplaces/lostplaces_app/static/icons/error.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
1
lostplaces/lostplaces_app/static/icons/information.svg
Normal file
1
lostplaces/lostplaces_app/static/icons/information.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>
|
After Width: | Height: | Size: 641 B |
1
lostplaces/lostplaces_app/static/icons/message.svg
Normal file
1
lostplaces/lostplaces_app/static/icons/message.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>
|
After Width: | Height: | Size: 914 B |
3
lostplaces/lostplaces_app/static/icons/success.svg
Normal file
3
lostplaces/lostplaces_app/static/icons/success.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{display:none;}
|
||||
</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1 s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27 c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707 S16.997,8.208,16.801,8.403z"/></g></svg>
|
After Width: | Height: | Size: 714 B |
@ -205,6 +205,39 @@ body {
|
||||
font-size: 1em;
|
||||
display: inline; }
|
||||
|
||||
.LP-Message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
border-radius: 3px;
|
||||
font-weight: bold; }
|
||||
.LP-Message--error .LP-Message__Icon {
|
||||
background-color: #02979e;
|
||||
background-image: url("icons/error.png"); }
|
||||
.LP-Message--warning .LP-Message__Icon {
|
||||
background-color: #0047e7;
|
||||
background-image: url("icons/error.png"); }
|
||||
.LP-Message--info .LP-Message__Icon {
|
||||
background-color: #522719;
|
||||
background-image: url("icons/information.svg"); }
|
||||
.LP-Message--success .LP-Message__Icon {
|
||||
background-color: #6937ff;
|
||||
background-image: url("icons/success.svg"); }
|
||||
.LP-Message--debug .LP-Message__Icon {
|
||||
background-color: #046a2f;
|
||||
background-image: url("icons/debug.png"); }
|
||||
.LP-Message .LP-Message__Icon {
|
||||
background-size: 40px 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
filter: invert(1); }
|
||||
.LP-Message .LP-Message__Text {
|
||||
padding: 0 15px; }
|
||||
|
||||
.LP-Content {
|
||||
padding: 35px; }
|
||||
|
||||
@ -349,6 +382,18 @@ body {
|
||||
.LP-Menu .LP-Menu__List {
|
||||
justify-content: space-between; } }
|
||||
|
||||
.LP-MessageList {
|
||||
padding: 25px; }
|
||||
.LP-MessageList .LP-MessageList__List {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; }
|
||||
.LP-MessageList .LP-MessageList__Item {
|
||||
margin: 5px 0; }
|
||||
|
||||
.LP-Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -54,11 +54,21 @@
|
||||
</section>
|
||||
<section class="LP-Main__Content">
|
||||
{% if messages %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
<li {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="LP-MessageList">
|
||||
<ul class="LP-MessageList__List">
|
||||
{% for message in messages %}
|
||||
<li class="LP-MessageList__Item">
|
||||
<div class="LP-Message {% if message.tags %}LP-Message--{{ message.tags }}{% endif %}">
|
||||
<div class="LP-Message__Icon">
|
||||
</div>
|
||||
<div class="LP-Message__Text">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block maincontent %}
|
||||
{% endblock maincontent %}
|
||||
|
@ -1,12 +1,11 @@
|
||||
{% extends 'global.html'%}
|
||||
|
||||
{% block title %}Forbidden{% endblock %}
|
||||
|
||||
{% block additional_head %}
|
||||
{% if request.META.HTTP_REFERER %}
|
||||
<p class="LP-Headline"><a href="{{ request.META.HTTP_REFERER }}" class="LP-Link">Go Back</a></p>
|
||||
<meta http-equiv="refresh" content="5;url={{ request.META.HTTP_REFERER }}" />
|
||||
{% endif %}
|
||||
|
||||
{% endblock additional_head %}
|
||||
|
||||
{% block maincontent %}
|
||||
|
Loading…
Reference in New Issue
Block a user