Fancy messages

lostplaces/lostplaces_app/static/icons/information.svg

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

lostplaces/lostplaces_app/static/icons/message.svg

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

lostplaces/lostplaces_app/static/icons/success.svg

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

lostplaces/lostplaces_app/static/main.css

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

lostplaces/lostplaces_app/templates/global.html

@@ -54,11 +54,21 @@
             </section>
             <section class="LP-Main__Content">
 				{% if messages %}
-				<ul class="messages">
+				<div class="LP-MessageList">
+					<ul class="LP-MessageList__List">
 						{% for message in messages %}
-					<li {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+						<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 %}

lostplaces/templates/403.html

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