Improve/add error messages to look better visually

- Have not tested everywhere, but should work okayish

static/styles.css

@@ -124,12 +124,12 @@ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after
 }
 
 form {
-  margin: 0 auto;
+  margin: 1em auto;
   width: fit-content;
 }
 form.login-form {
   border: 1px solid darkblue;
-  padding: 10px;
+  padding: 0.7em;
 }
 form .field {
   padding: 4px;
@@ -262,6 +262,7 @@ form button {
 }
 .post-box .post-author {
   margin-top: 1em;
+  margin-bottom: 0.5em;
   font-size: 0.8em;
   border-bottom: 1px solid grey;
   padding-bottom: 0.8em;
@@ -312,4 +313,14 @@ form button {
   margin: 1em;
 }
 
+span.error-message {
+  margin: 0.5em;
+  border: 1px solid red;
+  padding: 0.3em;
+}
+span.error-message.center-message {
+  margin: 0 auto;
+  display: table;
+}
+
 /*# sourceMappingURL=styles.css.map */

static/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AASJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAMR;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AASJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA","file":"styles.css"}

static/styles.scss

@@ -59,6 +59,7 @@ body, html {
   #img-logo {
     height: 100%;
     box-sizing: border-box;
+
     img {
       max-width: 100%;
       max-height: 80px;
@@ -145,12 +146,12 @@ nav, footer {
 }
 
 form {
-  margin: 0 auto;
+  margin: 1em auto;
   width: fit-content;
 
   &.login-form {
     border: 1px solid darkblue;
-    padding: 10px
+    padding: 0.7em;
   }
 
   .field {
@@ -308,6 +309,7 @@ form {
 
   .post-author {
     margin-top: 1em;
+    margin-bottom: 0.5em;
     font-size: 0.8em;
     border-bottom: 1px solid grey;
     padding-bottom: 0.8em;
@@ -350,6 +352,7 @@ form {
 
 .new-users, .statistics {
   margin-top: 0 !important;
+
   > div {
     border: 1px solid grey;
     padding: 0.2em;
@@ -366,3 +369,14 @@ form {
   min-height: 235px;
   margin: 1em;
 }
+
+span.error-message {
+  margin: 0.5em;
+  border: 1px solid red;
+  padding: 0.3em;
+
+  &.center-message {
+    margin: 0 auto;
+    display: table;
+  }
+}

templates/pages/auth/login.html

@@ -1,35 +1,35 @@
 {% extends 'layouts/index.html' %}
 {% block content %}
-        {% with messages = get_flashed_messages() %}
-            {% if messages %}
-                <div class="notification is-danger">
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <span class="error-message">
                     {{ messages[0] }}
-                </div>
-            {% endif %}
-        {% endwith %}
-        <form method="POST" action="{{ url_for('auth.login_post') }}" class="login-form">
-            <div class="field">
-                <div class="control">
-                    Username
-                    <input class="input is-large" type="text" name="username" placeholder="Username" autofocus="true">
-                </div>
+            </span>
+        {% endif %}
+    {% endwith %}
+    <form method="POST" action="{{ url_for('auth.login_post') }}" class="login-form">
+        <div class="field">
+            <div class="control">
+                Username
+                <input class="input is-large" type="text" name="username" placeholder="Username" autofocus="true">
             </div>
+        </div>
 
-            <div class="field">
-                <div class="control">
-                    Password
-                    <input class="input is-large" type="password" name="password" placeholder="Password">
-                </div>
+        <div class="field">
+            <div class="control">
+                Password
+                <input class="input is-large" type="password" name="password" placeholder="Password">
             </div>
-            <div class="field">
-                <label class="checkbox">
-                    <input type="checkbox">
-                    Remember me
-                </label>
-            </div>
-            <button class="button">Login</button>
-        </form>
-        <p class="form-subtext">
-            Don't have a login? <a href="{{ url_for('main.signup') }}">Sign-up</a> instead!
-        </p>
+        </div>
+        <div class="field">
+            <label class="checkbox">
+                <input type="checkbox">
+                Remember me
+            </label>
+        </div>
+        <button class="button">Login</button>
+    </form>
+    <p class="form-subtext">
+        Don't have a login? <a href="{{ url_for('main.signup') }}">Sign-up</a> instead!
+    </p>
 {% endblock content %}

templates/pages/auth/signup.html

@@ -1,38 +1,39 @@
 {% extends 'layouts/index.html' %}
 
 {% block content %}
-        {% with messages = get_flashed_messages() %}
-            {% if messages %}
-                <div class="notification is-danger">
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <span class="error-message">
                     {{ messages[0] }}. Go to <a href="{{ url_for('main.login') }}">login page</a>.
-                </div>
-            {% endif %}
-        {% endwith %}
-        <form method="POST" action="{{ url_for('auth.signup_post') }}" class="login-form">
-            <div class="field">
-                <div class="control">
-                    Username
-                    <input class="input is-large" type="text" name="username" placeholder="Username" autofocus>
-                </div>
-            </div>
+                </span>
+        {% endif %}
+    {% endwith %}
 
-            <div class="field">
-                <div class="control">
-                    Name
-                    <input class="input is-large" type="text" name="name" placeholder="Name" autofocus>
-                </div>
+    <form method="POST" action="{{ url_for('auth.signup_post') }}" class="login-form">
+        <div class="field">
+            <div class="control">
+                Username
+                <input class="input is-large" type="text" name="username" placeholder="Username" autofocus>
             </div>
+        </div>
 
-            <div class="field">
-                <div class="control">
-                    Password
-                    <input class="input is-large" type="password" name="password" placeholder="Password">
-                </div>
+        <div class="field">
+            <div class="control">
+                Name
+                <input class="input is-large" type="text" name="name" placeholder="Name" autofocus>
             </div>
-            <button>Sign Up</button>
-        </form>
+        </div>
 
-        <p class="form-subtext">
-            Already have a login? <a href="{{ url_for('main.login') }}">Login</a> instead!
-        </p>
+        <div class="field">
+            <div class="control">
+                Password
+                <input class="input is-large" type="password" name="password" placeholder="Password">
+            </div>
+        </div>
+        <button>Sign Up</button>
+    </form>
+
+    <p class="form-subtext">
+        Already have a login? <a href="{{ url_for('main.login') }}">Login</a> instead!
+    </p>
 {% endblock content %}

templates/pages/feed.html

@@ -2,20 +2,20 @@
 
 {% block content %}
     {% if current_user.is_authenticated %}
+        {% with messages = get_flashed_messages() %}
+            {% if messages or true %}
+                <span class="error-message center-message">
+                    {{ messages[0] }}
+                </span>
+            {% endif %}
+        {% endwith %}
+
         <form method="POST" action="{{ url_for('forms.new_post') }}" class="profile-form">
             <label>
                 <textarea type="text" name="text" placeholder="Write a post between 15 and 1000 characters. Express yourself."></textarea>
             </label>
             <button class="button">Create Post</button>
         </form>
-
-        {% with messages = get_flashed_messages() %}
-            {% if messages %}
-                <div class="notification is-danger">
-                    {{ messages[0] }}
-                </div>
-            {% endif %}
-        {% endwith %}
     {% endif %}
 
     {% for post, author in posts_and_authors %}

templates/pages/post.html

@@ -9,6 +9,14 @@
         </div>
         <div class="post-comments">
             {% if current_user.is_authenticated %}
+                {% with messages = get_flashed_messages() %}
+                    {% if messages %}
+                        <span class="error-message">
+                    {{ messages[0] }}
+                </span>
+                    {% endif %}
+                {% endwith %}
+
                 <div class="post-comment add-comment">
                     <form method="POST" action="{{ url_for('forms.add_comment', post_id=post.id) }}">
                         <label>

templates/pages/user_edit.html

@@ -15,9 +15,9 @@
     </form>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
-            <div class="notification is-danger">
+            <span class="error-message">
                 {{ messages[0] }}
-            </div>
+            </span>
         {% endif %}
     {% endwith %}
 {% endblock %}