Home Explore Help
Sign In
221V
/
Misago
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Nicely affixed alerts in frontend

Rafał Pitoń 11 years ago
parent
4e77f30327
commit
b0910beb81
7 changed files with 98 additions and 60 deletions
Split View Show Diff Stats
  1. 2 0
      misago/conf/defaults.py
  2. 49 38
      misago/static/misago/css/misago/alerts.less
  3. 23 0
      misago/static/misago/js/misago-alerts.js
  4. 0 0
      misago/static/misago/js/misago-tooltips.js
  5. 1 1
      misago/templates/misago/base.html
  6. 22 20
      misago/templates/misago/messages.html
  7. 1 1
      misago/templates/misago/navbar.html

+ 2 - 0
misago/conf/defaults.py
View File 

@@ -54,6 +54,8 @@ PIPELINE_JS = {
 
         'source_filenames': (
 
             'misago/js/jquery.js',
 
             'misago/js/bootstrap.js',
 
+            'misago/js/misago-tooltips.js',
 
+            'misago/js/misago-alerts.js',
 
         ),
 
         'output_filename': 'misago.js',
 
     },

+ 49 - 38
misago/static/misago/css/misago/alerts.less
View File 

@@ -28,55 +28,66 @@
 
 
 
 .misago-alerts {
 
-  text-align: center;
 
-
 
-  .alert {
 
-    border: none;
 
-    border-bottom: 6px solid fadeOut(#000, 85%);
 
-    border-radius: 0;
 
-    margin-bottom: 0px;
 
-    padding: (@line-height-computed * 0.8) 0px;
 
-
 
-    .alert-icon {
 
-      margin: -@alert-padding 0px;
 
-      margin-right: @alert-padding / 2;
 
-      position: relative;
 
-      top: @font-size-large / 4;
 
-
 
-      font-size: @font-size-base * 1.8;
 
-    }
 
+  margin-top: @line-height-computed * -1;
 
+  margin-bottom: @line-height-computed;
 
+
 
+  .alerts-list {
 
+    width: 100%;
 
 
-    .close {
 
-      border-radius: @border-radius-small;
 
-      float: none;
 
-      margin-left: @alert-padding;
 
-      padding: 6px 8px;
 
+    text-align: center;
 
 
-      font-size: @font-size-small;
 
-      text-shadow: none;
 
+    &.affix {
 
+      top: 0;
 
     }
 
 
-    &.alert-success {
 
-      .close {
 
-        .misago-alert-close(@alert-success-text, @alert-success-bg);
 
+    .alert {
 
+      border: none;
 
+      border-bottom: 6px solid fadeOut(#000, 85%);
 
+      border-radius: 0;
 
+      margin-bottom: 0px;
 
+      padding: (@line-height-computed * 0.8) 0px;
 
+
 
+      .alert-icon {
 
+        margin: -@alert-padding 0px;
 
+        margin-right: @alert-padding / 2;
 
+        position: relative;
 
+        top: @font-size-large / 4;
 
+
 
+        font-size: @font-size-base * 1.8;
 
       }
 
-    }
 
 
-    &.alert-info {
 
       .close {
 
-        .misago-alert-close(@alert-info-text, @alert-info-bg);
 
+        border-radius: @border-radius-small;
 
+        float: none;
 
+        margin-left: @alert-padding;
 
+        padding: 6px 8px;
 
+
 
+        font-size: @font-size-small;
 
+        text-shadow: none;
 
       }
 
-    }
 
 
-    &.alert-warning {
 
-      .close {
 
-        .misago-alert-close(@alert-warning-text, @alert-warning-bg);
 
+      &.alert-success {
 
+        .close {
 
+          .misago-alert-close(@alert-success-text, @alert-success-bg);
 
+        }
 
       }
 
-    }
 
 
-    &.alert-danger {
 
-      .close {
 
-        .misago-alert-close(@alert-danger-text, @alert-danger-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);
 
+        }
 
       }
 
     }
 
   }

+ 23 - 0
misago/static/misago/js/misago-alerts.js
View File 

@@ -0,0 +1,23 @@
 
+// Alerts interactivity
 
+$(function() {
 
+  var $alerts = $('.misago-alerts');
 
+  var $alerts_list = $('.misago-alerts .alerts-list');
 
+
 
+  // Store and freeze alerts list height for affix
 
+  var $height = $alerts.height();
 
+  $alerts.height($height);
 
+
 
+  // Affix alerts
 
+  $('.misago-alerts .alerts-list').affix({
 
+      offset: {
 
+        top: $alerts.offset().top
 
+      }
 
+    });
 
+
 
+  // Slide up alert
 
+  $alerts.find('.close').click(function() {
 
+    var $alert = $(this).parent().parent();
 
+    $alerts.animate({height: $height - $alert.height()}, {queue: false});
 
+    $alert.slideUp();
 
+  });
 
+});

+ 0 - 0
misago/static/misago/js/misago.js → misago/static/misago/js/misago-tooltips.js
View File


+ 1 - 1
misago/templates/misago/base.html
View File 

@@ -21,9 +21,9 @@
 
   </head>
 
   <body>
 
 
-    {% include "misago/messages.html" %}
 
     {% include "misago/navbar.html" %}
 
     {% include "misago/jumbotron.html" %}
 
+    {% include "misago/messages.html" %}
 
 
     {% block content %}{% endblock %}

+ 22 - 20
misago/templates/misago/messages.html
View File 

@@ -1,25 +1,27 @@
 
 {% load i18n %}
 
 {% if messages %}
 
-<div class="misago-alerts alerts-fixed">
 
-  {% for message in messages %}
 
-  <div>
 
-    {% if 'info' in message.tags %}
 
-    <p class="alert alert-info">
 
-      <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-check-circle"></span>
 
-    {% elif 'warning' in message.tags %}
 
-    <p class="alert alert-warning">
 
-      <span class="alert-icon fa fa-exclamation-triangle"></span>
 
-    {% elif 'error' in message.tags %}
 
-    <p class="alert alert-danger">
 
-      <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 class="misago-alerts">
 
+  <div class="alerts-list">
 
+    {% for message in messages %}
 
+    <div class="alert-div">
 
+      {% if 'info' in message.tags %}
 
+      <p class="alert alert-info">
 
+        <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-check-circle"></span>
 
+      {% elif 'warning' in message.tags %}
 
+      <p class="alert alert-warning">
 
+        <span class="alert-icon fa fa-exclamation-triangle"></span>
 
+      {% elif 'error' in message.tags %}
 
+      <p class="alert alert-danger">
 
+        <span class="alert-icon fa fa-times-circle"></span>
 
+      {% endif %}
 
+        {{ message }}
 
+        <button type="button" class="close">{% trans "Ok!" %}</button>
 
+      </p>
 
+    </div>
 
+    {% endfor %}
 
   </div>
 
-  {% endfor %}
 
 </div>
 
 {% endif %}

+ 1 - 1
misago/templates/misago/navbar.html
View File 

@@ -1,5 +1,5 @@
 
 {% load i18n misago_avatars %}
 
-<nav class="navbar navbar-default navbar-static-top" role="navigation">
 
+<nav id="main-navbar" class="navbar navbar-default navbar-static-top" role="navigation">
 
   <div class="container">
 
     <!-- Brand and toggle get grouped for better mobile display -->
 
     <div class="navbar-header">