Redesigned notifications page for Cranefly

static/cranefly/css/cranefly.css

@@ -5599,7 +5599,8 @@ a.badge:focus {
   border-radius: 0px;
   margin-bottom: 4px;
   padding: 6.666666666666667px 10px;
-  color: #6f6f6f;
+  color: #888888;
+  font-weight: bold;
 }
 .header-primary .header-tabs li a:hover,
 .header-primary .header-tabs li a:active {
@@ -5615,8 +5616,7 @@ a.badge:focus {
   background: none;
   border-bottom: 4px solid #cf402e;
   margin-bottom: 0px;
-  color: #cf402e;
-  font-weight: bold;
+  color: #333333;
 }
 html,
 body {
@@ -6726,6 +6726,36 @@ a.btn-link:focus {
 .watched-threads .table .thread-forum a:hover {
   color: #333333;
 }
+.user-alerts td {
+  vertical-align: middle;
+}
+.user-alerts td.alert-icon .label {
+  background-color: #555555;
+  border: 1px solid #2f2f2f;
+  border-radius: 3px;
+  padding: 4px;
+  padding-top: 3px;
+}
+.user-alerts td.alert-icon .label i {
+  background-image: url("../img/glyphicons-halflings-white.png");
+}
+.user-alerts td.alert-icon .label.label-warning {
+  background-color: #cf402e;
+  border: 1px solid #902d20;
+}
+.user-alerts td.alert-message {
+  color: #555555;
+  font-size: 16.8px;
+}
+.user-alerts td.alert-message a:link,
+.user-alerts td.alert-message a:visited {
+  color: #333333;
+  font-weight: bold;
+}
+.user-alerts td.alert-date {
+  color: #999999;
+  text-align: right;
+}
 .index-rank-team ul li {
   background-color: #cf402e;
   border-color: #ae3627;

static/cranefly/css/cranefly.less

@@ -82,6 +82,7 @@
 @import "cranefly/forummap.less";
 @import "cranefly/popularthreads.less";
 @import "cranefly/watchedthreads.less";
+@import "cranefly/alerts.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/alerts.less

@@ -0,0 +1,42 @@
+// User Alerts
+// -------------------------
+
+.user-alerts {
+  td {
+    vertical-align: middle;
+
+    &.alert-icon {
+      .label {
+        background-color: @gray;
+        border: 1px solid darken(@gray, 15%);
+        border-radius: @baseBorderRadius;
+        padding: 4px;
+        padding-top: 3px;
+
+        i {
+          background-image: url("@{iconWhiteSpritePath}");
+        }
+
+        &.label-warning {
+          background-color: @red;
+          border: 1px solid darken(@red, 15%);
+        }
+      }
+    }
+
+    &.alert-message {
+      color: @gray;
+      font-size: @baseFontSize * 1.2;
+
+      a:link, a:visited {
+        color: @textColor;
+        font-weight: bold;
+      }
+    }
+
+    &.alert-date {
+      color: @grayLight;
+      text-align: right;
+    }
+  }
+}

static/cranefly/css/cranefly/header.less

@@ -28,7 +28,8 @@
           margin-bottom: 4px;
           padding: (@baseLineHeight / 3) (@baseLineHeight / 2);
 
-          color: lighten(@gray, 10%);
+          color: lighten(@gray, 20%);
+          font-weight: bold;
         }
 
         &:hover, &:active {
@@ -46,8 +47,7 @@
           border-bottom: 4px solid @red;
           margin-bottom: 0px;
 
-          color: @red;
-          font-weight: bold;
+          color: @textColor;
         }
       }
     }

templates/cranefly/alerts.html

@@ -8,23 +8,33 @@
 {{ macros.page_title(title=get_title()) }}
 {%- endif %}{% endblock %}
 
-{% block content %}
-<div class="page-header">
-  <h1>{% if user.alerts %}{{ get_title() }} <small>{% trans %}Your Notifications{% endtrans %}</small>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <h1>{% if user.alerts %}{{ get_title() }} <small>{% trans %}Your Notifications{% endtrans %}</small>
       {%- else -%}
       {% trans %}Your Notifications{% endtrans %}{% endif %}</h1>
+  </div>
 </div>
-{% if alerts %}
-<div class="alerts-list">
-{% if alerts.today %}{{ alerts_list(_("Today Notifications"), alerts.today) }}{% endif %}
-{% if alerts.yesterday %}{{ alerts_list(_("Yesterday Notifications"), alerts.yesterday) }}{% endif %}
-{% if alerts.week %}{{ alerts_list(_("This Week Notifications"), alerts.week) }}{% endif %}
-{% if alerts.month %}{{ alerts_list(_("This Month Notifications"), alerts.month) }}{% endif %}
-{% if alerts.older %}{{ alerts_list(_("Older Notifications"), alerts.older) }}{% endif %}
+
+<div class="container container-primary">
+  {% if alerts %}
+  <div class="user-alerts">
+    {% if alerts.today %}{{ alerts_list(_("Today Notifications"), alerts.today) }}{% endif %}
+    {% if alerts.yesterday %}{{ alerts_list(_("Yesterday Notifications"), alerts.yesterday) }}{% endif %}
+    {% if alerts.week %}{{ alerts_list(_("This Week"), alerts.week) }}{% endif %}
+    {% if alerts.month %}{{ alerts_list(_("This Month"), alerts.month) }}{% endif %}
+    {% if alerts.older %}{{ alerts_list(_("Older Notifications"), alerts.older) }}{% endif %}
+  </div>
+  {% else %}
+  <p class="lead">{% trans %}Looks like you don't have any notifications... yet.{% endtrans %}</p>
+  {% endif %}
 </div>
-{% else %}
-<p class="lead">{% trans %}Looks like you don't have any notifications... yet.{% endtrans %}</p>
-{% endif %}
 {% endblock %}
 
 {% macro get_title() -%}
@@ -43,15 +53,16 @@ You have {{ count }} new alerts
   <table class="table table-striped">
     <thead>
       <tr>
-        <th>{{ title }}</th>
-        <th class="span3">{% trans %}Date{% endtrans %}</th>
+        <th style="width: 1%;">&nbsp;</th>
+        <th colspan="2">{{ title }}</th>
       </tr>
     </thead>
     <tbody>
       {% for alert in alerts %}
       <tr>
-        <td>{% if alert.new %}<span class="label label-warning">{% trans %}New{% endtrans %}</span> {% endif %}{{ (_(alert.message) % alert.vars())|safe }}</td>
-        <td class="muted">{{ alert.date|reltimesince }}</td>
+        <td class="alert-icon"><span class="label {% if alert.new %} label-warning{% endif %} tooltip-top" title="{% if alert.new %}{% trans %}New notification{% endtrans %}{% else %}{% trans %}Old notification{% endtrans %}{% endif %}"><i class="icon-fire"></i></label></td>
+        <td class="alert-message">{{ (_(alert.message) % alert.vars())|safe }}</td>
+        <td class="alert-date">{{ alert.date|reltimesince }}</td>
       </tr>
       {% endfor %}
     </tbody>