Better alerts in admin

misago/admin/views/index.py

@@ -1,6 +1,8 @@
+from django.contrib import messages
 from misago.admin.views import render
 
 
 def admin_index(request):
+    messages.success(request, 'Hello bro, I hope ya liking Miasgo!')
     namespace = request.resolver_match.namespace
     return render(request, 'misago/admin/index.html', {'namespace': namespace})

misago/static/misago/admin/css/misago/alerts.less

@@ -3,37 +3,17 @@
 // --------------------------------------------------
 
 
-.misago-alert-close(@text, @bg) {
-  background-color: @bg;
-  box-shadow: 0px 0px 0px 2px fadeOut(@text, 25%);
-  .opacity(1);
-
-  color: fadeOut(@text, 10%);
-
-  &:hover {
-    background-color: @text;
-    box-shadow: 0px 0px 0px 2px @text;
-
-    color: darken(@bg, 35%);
-  }
-
-  &:active, &:focus {
-    background-color: darken(@bg, 15%);
-    outline: none;
-
-    color: @text;
-  }
-}
-
-
 .misago-alerts {
   text-align: center;
 
   .alert {
     border: none;
-    display: inline-block;
-    margin-left: auto;
-    margin-right: auto;
+    border-bottom: 6px solid fadeOut(#000, 85%);
+    border-radius: 0;
+    margin-bottom: 0px;
+    padding: @line-height-computed 0px;
+
+    font-size: @font-size-large;
 
     .alert-icon {
       margin: -@alert-padding 0px;
@@ -41,52 +21,7 @@
       position: relative;
       top: @font-size-large / 4;
 
-      font-size: @font-size-large * 1.5;
-    }
-
-    .close {
-      border-radius: @border-radius-small;
-      float: none;
-      margin-left: @alert-padding;
-      padding: 6px 8px;
-
-      font-size: @font-size-small;
-      text-shadow: none;
-    }
-
-    &.alert-success {
-      .close {
-        .misago-alert-close(@alert-success-text, @alert-success-bg);
-      }
-    }
-
-    &.alert-info {
-      .close {
-        .misago-alert-close(@alert-info-text, @alert-info-bg);
-      }
-    }
-
-    &.alert-warning {
-      .close {
-        .misago-alert-close(@alert-warning-text, @alert-warning-bg);
-      }
-    }
-
-    &.alert-danger {
-      .close {
-        .misago-alert-close(@alert-danger-text, @alert-danger-bg);
-      }
-    }
-  }
-
-  &.alerts-fixed {
-    position: fixed;
-    top: @line-height-computed * 2;
-    width: 100%;
-    z-index: @zindex-modal + 1;
-
-    .alert {
-      box-shadow: 0px 0px 0px 6px fadeOut(#000, 85%);
+      font-size: @font-size-large * 1.8;
     }
   }
 }

misago/static/misago/admin/css/style.css

@@ -5786,105 +5786,18 @@ body {
 }
 .misago-alerts .alert {
   border: none;
-  display: inline-block;
-  margin-left: auto;
-  margin-right: auto;
+  border-bottom: 6px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0;
+  margin-bottom: 0px;
+  padding: 20px 0px;
+  font-size: 18px;
 }
 .misago-alerts .alert .alert-icon {
   margin: -12px 0px;
   margin-right: 6px;
   position: relative;
   top: 4.5px;
-  font-size: 27px;
-}
-.misago-alerts .alert .close {
-  border-radius: 3px;
-  float: none;
-  margin-left: 12px;
-  padding: 6px 8px;
-  font-size: 12px;
-  text-shadow: none;
-}
-.misago-alerts .alert.alert-success .close {
-  background-color: #27ae60;
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.75);
-  opacity: 1;
-  filter: alpha(opacity=100);
-  color: rgba(255, 255, 255, 0.9);
-}
-.misago-alerts .alert.alert-success .close:hover {
-  background-color: #ffffff;
-  box-shadow: 0px 0px 0px 2px #ffffff;
-  color: #061c10;
-}
-.misago-alerts .alert.alert-success .close:active,
-.misago-alerts .alert.alert-success .close:focus {
-  background-color: #19703e;
-  outline: none;
-  color: #ffffff;
-}
-.misago-alerts .alert.alert-info .close {
-  background-color: #2980b9;
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.75);
-  opacity: 1;
-  filter: alpha(opacity=100);
-  color: rgba(255, 255, 255, 0.9);
-}
-.misago-alerts .alert.alert-info .close:hover {
-  background-color: #ffffff;
-  box-shadow: 0px 0px 0px 2px #ffffff;
-  color: #091b27;
-}
-.misago-alerts .alert.alert-info .close:active,
-.misago-alerts .alert.alert-info .close:focus {
-  background-color: #1b557a;
-  outline: none;
-  color: #ffffff;
-}
-.misago-alerts .alert.alert-warning .close {
-  background-color: #e67e22;
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.75);
-  opacity: 1;
-  filter: alpha(opacity=100);
-  color: rgba(255, 255, 255, 0.9);
-}
-.misago-alerts .alert.alert-warning .close:hover {
-  background-color: #ffffff;
-  box-shadow: 0px 0px 0px 2px #ffffff;
-  color: #4d2909;
-}
-.misago-alerts .alert.alert-warning .close:active,
-.misago-alerts .alert.alert-warning .close:focus {
-  background-color: #a85913;
-  outline: none;
-  color: #ffffff;
-}
-.misago-alerts .alert.alert-danger .close {
-  background-color: #c0392b;
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.75);
-  opacity: 1;
-  filter: alpha(opacity=100);
-  color: rgba(255, 255, 255, 0.9);
-}
-.misago-alerts .alert.alert-danger .close:hover {
-  background-color: #ffffff;
-  box-shadow: 0px 0px 0px 2px #ffffff;
-  color: #2e0e0a;
-}
-.misago-alerts .alert.alert-danger .close:active,
-.misago-alerts .alert.alert-danger .close:focus {
-  background-color: #81261d;
-  outline: none;
-  color: #ffffff;
-}
-.misago-alerts.alerts-fixed {
-  position: fixed;
-  top: 40px;
-  width: 100%;
-  z-index: 1051;
-}
-.misago-alerts.alerts-fixed .alert {
-  box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.15);
+  font-size: 32.4px;
 }
 .btn.btn-default {
   background: #ededed;
@@ -6353,6 +6266,7 @@ body {
   margin: 0px;
   font-size: 14px;
 }
+/* Big displays */
 @media (min-width: 768px) {
   .login-form .error-message {
     margin: 20px;

misago/templates/misago/admin/base.html

@@ -3,8 +3,8 @@
 
 
 {% block body %}
-{% include "misago/admin/messages.html" %}
 {% include "misago/admin/navbar.html" %}
+{% include "misago/admin/messages.html" %}
 
 {% block content %}{% endblock %}
 

misago/templates/misago/admin/index.html

@@ -6,6 +6,15 @@
 
 
 {% block content %}
+<div class="page-header">
+  <div class="container">
+    <h1>
+      <span class="fa fa-home">
+      {% trans "Administration Home" %}
+    </h1>
+  </div>
+</div>
+
 <div class="container">
   <h3>Admin Placeholder View</h3>
   <p class="lead">Requested namespace: <strong>{{ namespace }}</strong></p>

misago/templates/misago/admin/messages.html

@@ -1,14 +1,14 @@
 {% load i18n %}
 {% if messages %}
-<div class="misago-alerts alerts-fixed">
+<div class="misago-alerts">
   {% for message in messages %}
   <div>
     {% if 'info' in message.tags %}
     <p class="alert alert-info">
-      <span class="alert-icon fa fa-check-circle"></span>
+      <span class="alert-icon fa fa-info-circle"></span>
     {% elif 'success' in message.tags %}
     <p class="alert alert-success">
-      <span class="alert-icon fa fa-question-circle"></span>
+      <span class="alert-icon fa fa-check-circle"></span>
     {% elif 'warning' in message.tags %}
     <p class="alert alert-warning">
       <span class="alert-icon fa fa-exclamation-triangle"></span>
@@ -17,7 +17,6 @@
       <span class="alert-icon fa fa-times-circle"></span>
     {% endif %}
       {{ message }}
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">{% trans "Ok!" %}</button>
     </p>
   </div>
   {% endfor %}

misago/templates/misago/messages.html

@@ -5,10 +5,10 @@
   <div>
     {% if 'info' in message.tags %}
     <p class="alert alert-info">
-      <span class="alert-icon fa fa-check-circle"></span>
+      <span class="alert-icon fa fa-info-circle"></span>
     {% elif 'success' in message.tags %}
     <p class="alert alert-success">
-      <span class="alert-icon fa fa-question-circle"></span>
+      <span class="alert-icon fa fa-check-circle"></span>
     {% elif 'warning' in message.tags %}
     <p class="alert alert-warning">
       <span class="alert-icon fa fa-exclamation-triangle"></span>

uiframework/misago/admin/css/misago/alerts.less

@@ -3,37 +3,16 @@
 // --------------------------------------------------
 
 
-.misago-alert-close(@text, @bg) {
-  background-color: @bg;
-  box-shadow: 0px 0px 0px 2px fadeOut(@text, 25%);
-  .opacity(1);
-
-  color: fadeOut(@text, 10%);
-
-  &:hover {
-    background-color: @text;
-    box-shadow: 0px 0px 0px 2px @text;
-
-    color: darken(@bg, 35%);
-  }
-
-  &:active, &:focus {
-    background-color: darken(@bg, 15%);
-    outline: none;
-
-    color: @text;
-  }
-}
-
-
 .misago-alerts {
   text-align: center;
 
   .alert {
     border: none;
-    display: inline-block;
-    margin-left: auto;
-    margin-right: auto;
+    border-bottom: 6px solid fadeOut(#000, 85%);
+    border-radius: 0;
+    margin-bottom: 0px;
+
+    font-size: @font-size-large;
 
     .alert-icon {
       margin: -@alert-padding 0px;
@@ -41,52 +20,7 @@
       position: relative;
       top: @font-size-large / 4;
 
-      font-size: @font-size-large * 1.5;
-    }
-
-    .close {
-      border-radius: @border-radius-small;
-      float: none;
-      margin-left: @alert-padding;
-      padding: 6px 8px;
-
-      font-size: @font-size-small;
-      text-shadow: none;
-    }
-
-    &.alert-success {
-      .close {
-        .misago-alert-close(@alert-success-text, @alert-success-bg);
-      }
-    }
-
-    &.alert-info {
-      .close {
-        .misago-alert-close(@alert-info-text, @alert-info-bg);
-      }
-    }
-
-    &.alert-warning {
-      .close {
-        .misago-alert-close(@alert-warning-text, @alert-warning-bg);
-      }
-    }
-
-    &.alert-danger {
-      .close {
-        .misago-alert-close(@alert-danger-text, @alert-danger-bg);
-      }
-    }
-  }
-
-  &.alerts-fixed {
-    position: fixed;
-    top: @line-height-computed * 2;
-    width: 100%;
-    z-index: @zindex-modal + 1;
-
-    .alert {
-      box-shadow: 0px 0px 0px 6px fadeOut(#000, 85%);
+      font-size: @font-size-large * 1.8;
     }
   }
 }