notifications page cleanup

fedireads/static/format.css

@@ -97,6 +97,16 @@ h2 {
     width: 1rem;
 }
 
+.notification {
+    margin-bottom: 1em;
+    padding: 1em 0;
+    background-color: #EEE;
+}
+.notification.unread {
+    background-color: #DDD;
+}
+
+
 button .icon {
     font-size: 1.1rem;
     vertical-align: sub;
@@ -194,7 +204,7 @@ ul.menu a {
     margin-bottom: 0.5em;
 }
 .follow-requests .row > *:first-child {
-    width: 15em;
+    width: 20em;
 }
 
 .login form {
@@ -291,6 +301,7 @@ button.warning {
 .time-ago {
     float: right;
     display: block;
+    text-align: right;
 }
 
 .book-preview {
@@ -550,10 +561,6 @@ th, td {
     margin-left: 3em;
 }
 
-.unread {
-    background-color: #DDD;
-}
-
 a .icon {
     color: black;
     text-decoration: none;

fedireads/templates/notifications.html

@@ -1,41 +1,43 @@
 {% extends 'layout.html' %}
 {% load humanize %}l
 {% block content %}
-<div id="content">
+<div class="content-container">
-    <div>
+    <h2>Notifications</h2>
-        <h2>Notifications</h2>
-        <form name="clear" action="/clear-notifications" method="POST">
-            {% csrf_token %}
-            <button type="submit">Delete notifications</button>
-        </form>
-        {% for notification in notifications %}
-        <div class="notification{% if notification.id in unread %} unread{% endif %}">
-            <p>
-            {% if notification.notification_type == 'FAVORITE' %}
-                {% include 'snippets/username.html' with user=notification.related_user %}
-                favorited your
-                <a href="{{ notification.related_status.absolute_id}}">status</a>
 
-            {% elif notification.notification_type == 'REPLY' %}
+    <form name="clear" action="/clear-notifications" method="POST">
-                {% include 'snippets/username.html' with user=notification.related_user %}
+        {% csrf_token %}
-                <a href="{{ notification.related_status.absolute_id}}">replied</a>
+        <button type="submit" class="secondary">Delete notifications</button>
-                to your
+    </form>
-                <a href="{{ notification.related_status.reply_parent.absolute_id}}">status</a>
+</div>
 
-            {% elif notification.notification_type == 'FOLLOW' %}
+<div class="content-container">
-                {% include 'snippets/username.html' with user=notification.related_user %}
+    {% for notification in notifications %}
-                followed you
+    <div class="notification{% if notification.id in unread %} unread{% endif %}">
+        <small class="time-ago">{{ notification.created_date | naturaltime }}</small>
+        {% include 'snippets/username.html' with user=notification.related_user %}
+        {% if notification.notification_type == 'FAVORITE' %}
+            favorited your
+            <a href="{{ notification.related_status.absolute_id}}">status</a>
 
-            {% elif notification.notification_type == 'FOLLOW_REQUEST' %}
+        {% elif notification.notification_type == 'REPLY' %}
-                {% include 'snippets/username.html' with user=notification.related_user %}
+            <a href="{{ notification.related_status.absolute_id}}">replied</a>
-                sent you a follow request
+            to your
+            <a href="{{ notification.related_status.reply_parent.absolute_id}}">status</a>
+
+        {% elif notification.notification_type == 'FOLLOW' %}
+            followed you
+
+        {% elif notification.notification_type == 'FOLLOW_REQUEST' %}
+            sent you a follow request
+            <div class="row shrink">
                 {% include 'snippets/follow_request_buttons.html' with user=notification.related_user %}
-            {% endif %}
+            </div>
-            <small>{{ notification.created_date | naturaltime }}</small>
+        {% endif %}
-            </p>
-        </div>
-        {% endfor %}
     </div>
+    {% endfor %}
+    {% if not notifications %}
+    <p>You're all caught up!</p>
+    {% endif %}
 </div>
 
 {% endblock %}