From 1523e3f22942ea780eb9ab3b7d59defae17dfcec Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Fri, 7 Sep 2018 21:08:56 -0400
Subject: [PATCH] Add template bits for notification badges

---
 brutaldon/static/css/bulma-badge.min.css |  1 +
 brutaldon/templates/base.html            | 54 +++++++++++++++---------
 package.json                             |  1 +
 yarn.lock                                |  4 ++
 4 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 brutaldon/static/css/bulma-badge.min.css

diff --git a/brutaldon/static/css/bulma-badge.min.css b/brutaldon/static/css/bulma-badge.min.css
new file mode 100644
index 0000000..da93902
--- /dev/null
+++ b/brutaldon/static/css/bulma-badge.min.css
@@ -0,0 +1 @@
+@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.badge{position:relative;white-space:nowrap;position:relative}.badge[data-badge]::after{position:absolute;left:100%;margin:0;background:#00d1b2;background-clip:padding-box;border-radius:1rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block}.badge:not([data-badge=""])::after{padding:.3rem .5rem;text-align:center;white-space:nowrap}.badge[data-badge=""]::after{display:inline-block;vertical-align:inherit}.badge.is-badge-white:not([data-badge])::after,.badge.is-badge-white[data-badge]::after{background:#fff;color:#0a0a0a}.badge.is-badge-black:not([data-badge])::after,.badge.is-badge-black[data-badge]::after{background:#0a0a0a;color:#fff}.badge.is-badge-light:not([data-badge])::after,.badge.is-badge-light[data-badge]::after{background:#f5f5f5;color:#363636}.badge.is-badge-dark:not([data-badge])::after,.badge.is-badge-dark[data-badge]::after{background:#363636;color:#f5f5f5}.badge.is-badge-primary:not([data-badge])::after,.badge.is-badge-primary[data-badge]::after{background:#00d1b2;color:#fff}.badge.is-badge-link:not([data-badge])::after,.badge.is-badge-link[data-badge]::after{background:#3273dc;color:#fff}.badge.is-badge-info:not([data-badge])::after,.badge.is-badge-info[data-badge]::after{background:#209cee;color:#fff}.badge.is-badge-success:not([data-badge])::after,.badge.is-badge-success[data-badge]::after{background:#23d160;color:#fff}.badge.is-badge-warning:not([data-badge])::after,.badge.is-badge-warning[data-badge]::after{background:#ffdd57;color:rgba(0,0,0,.7)}.badge.is-badge-danger:not([data-badge])::after,.badge.is-badge-danger[data-badge]::after{background:#ff3860;color:#fff}.badge.is-badge-outlined[data-badge]::after{background-color:#fff;box-shadow:none;border:.1rem solid #00d1b2;color:#00d1b2}.badge.is-badge-outlined.is-badge-white[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #fff;color:#fff}.badge.is-badge-outlined.is-badge-black[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #0a0a0a;color:#0a0a0a}.badge.is-badge-outlined.is-badge-light[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #f5f5f5;color:#f5f5f5}.badge.is-badge-outlined.is-badge-dark[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #363636;color:#363636}.badge.is-badge-outlined.is-badge-primary[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #00d1b2;color:#00d1b2}.badge.is-badge-outlined.is-badge-link[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #3273dc;color:#3273dc}.badge.is-badge-outlined.is-badge-info[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #209cee;color:#209cee}.badge.is-badge-outlined.is-badge-success[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #23d160;color:#23d160}.badge.is-badge-outlined.is-badge-warning[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #ffdd57;color:#ffdd57}.badge.is-badge-outlined.is-badge-danger[data-badge]::after{background:#fff;box-shadow:none;border:.1rem solid #ff3860;color:#ff3860}.badge[data-badge]::after{top:calc(0px - (1rem / 2));left:calc(100% - (1rem / 2));min-height:1rem;min-width:1rem}.badge:not([data-badge=""])::after{font-size:.75rem;line-height:.5rem}.badge[data-badge=""]::after{width:1rem}.badge.is-badge-left::after{left:calc(0px - (1rem / 2))}.badge.is-badge-bottom::after{top:calc(100% - (1rem / 2))}.badge.is-badge-bottom-left::after{left:calc(0px - (1rem / 2));top:calc(100% - (1rem / 2))}.badge.is-badge-small[data-badge]::after{top:calc(0px - (.75rem / 2));left:calc(100% - (.75rem / 2));min-height:.75rem;min-width:.75rem}.badge.is-badge-small:not([data-badge=""])::after{font-size:.5625rem;line-height:.375rem}.badge.is-badge-small[data-badge=""]::after{width:.75rem}.badge.is-badge-small.is-badge-left::after{left:calc(0px - (.75rem / 2))}.badge.is-badge-small.is-badge-bottom::after{top:calc(100% - (.75rem / 2))}.badge.is-badge-small.is-badge-bottom-left::after{left:calc(0px - (.75rem / 2));top:calc(100% - (.75rem / 2))}.badge.is-badge-medium[data-badge]::after{top:calc(0px - (1.25rem / 2));left:calc(100% - (1.25rem / 2));min-height:1.25rem;min-width:1.25rem}.badge.is-badge-medium:not([data-badge=""])::after{font-size:.9375rem;line-height:.625rem}.badge.is-badge-medium[data-badge=""]::after{width:1.25rem}.badge.is-badge-medium.is-badge-left::after{left:calc(0px - (1.25rem / 2))}.badge.is-badge-medium.is-badge-bottom::after{top:calc(100% - (1.25rem / 2))}.badge.is-badge-medium.is-badge-bottom-left::after{left:calc(0px - (1.25rem / 2));top:calc(100% - (1.25rem / 2))}.badge.is-badge-large[data-badge]::after{top:calc(0px - (1.5rem / 2));left:calc(100% - (1.5rem / 2));min-height:1.5rem;min-width:1.5rem}.badge.is-badge-large:not([data-badge=""])::after{font-size:1.125rem;line-height:.75rem}.badge.is-badge-large[data-badge=""]::after{width:1.5rem}.badge.is-badge-large.is-badge-left::after{left:calc(0px - (1.5rem / 2))}.badge.is-badge-large.is-badge-bottom::after{top:calc(100% - (1.5rem / 2))}.badge.is-badge-large.is-badge-bottom-left::after{left:calc(0px - (1.5rem / 2));top:calc(100% - (1.5rem / 2))}
\ No newline at end of file
diff --git a/brutaldon/templates/base.html b/brutaldon/templates/base.html
index 9c8fd40..3a23ece 100644
--- a/brutaldon/templates/base.html
+++ b/brutaldon/templates/base.html
@@ -7,27 +7,30 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>
             {% block title %}
-                {% if own_acct %}
-                    brutaldon ('{{ own_acct.username }}')
-                {% else %}
-                    brutaldon
-                {% endif %}
+            {% if own_acct %}
+            brutaldon ('{{ own_acct.username }}')
+            {% else %}
+            brutaldon
+            {% endif %}
             {% endblock %}</title>
-            <link rel="manifest" href="{% static 'manifest.webmanifest' %}">
-            {% if not preferences %}
-                <link rel="stylesheet"
-                      href="{% static 'css/bulma.min.css' %}">
-                <link rel="stylesheet"
-                      href="{% static 'css/fork-awesome.min.css' %}">
-                <link rel="stylesheet" href="{% static "css/brutaldon.css" %}">
-            {% else  %}
-                <link rel="stylesheet"
-                      href="{% static preferences.theme.main_css %}">
-                <link rel="stylesheet" href="{% static preferences.theme.tweaks_css %}">
-                {% if not preferences.theme.is_brutalist %}
-                    <link rel="stylesheet"
-                          href="{% static 'css/fork-awesome.min.css' %}">
-                    <link rel="stylesheet"
+        <link rel="manifest" href="{% static 'manifest.webmanifest' %}">
+        {% if not preferences %}
+        <link rel="stylesheet"
+              href="{% static 'css/bulma.min.css' %}">
+        <link rel="stylesheet"
+              href="{% static 'css/fork-awesome.min.css' %}">
+        <link rel="stylesheet" href="{% static "css/brutaldon.css" %}">
+        {% else  %}
+        <link rel="stylesheet"
+              href="{% static preferences.theme.main_css %}">
+        <link rel="stylesheet" href="{% static preferences.theme.tweaks_css %}">
+        {% if not preferences.theme.is_brutalist %}
+        <link rel="stylesheet"
+              href="{% static 'css/fork-awesome.min.css' %}">
+        <link rel="stylesheet"
+              href="{% static 'css/bulma-badge.min.css' %}">
+        <link rel="stylesheet"
+              href="{% static 'css/bulma-badge.min.css' %}">
                           href="{% static 'css/photobox.css' %}">
                     <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
                     <script type="text/javascript" src="{% static 'js/intercooler.js' %}"></script>
@@ -97,7 +100,16 @@
                                    ic-on-success="afterPage('{{ own_acct.username }}', 'Notifications');"
                                    ic-indicator="#page-load-indicator">
                                     <span class="fa fa-bell-o"></span>
-                                    <span >&nbsp; Notifications</span>
+                                    {% if notifications and not preferences.theme.is_brutalist %}
+                                        <span class="badge"
+                                              data-badge="{{ notifications }}">
+                                            &nbsp; Notifications
+                                        </span>
+                                    {% elif notifications %}
+                                        <span >&nbsp; Notifications ({{ notifications }})</span>
+                                    {% else %}
+                                        <span >&nbsp; Notifications</span>
+                                    {% endif %}
                                 </a>
                                 <a class="navbar-item" href="{% url "local" %}"
                                    ic-get-from="{% url "local" %}"
diff --git a/package.json b/package.json
index e4707fd..c46a85b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "bulma": "^0.7.1",
+    "bulma-extensions": "^2.2.2",
     "bulmaswatch": "^0.6.2",
     "fork-awesome": "^1.1.0",
     "intercooler": "^1.2.1",
diff --git a/yarn.lock b/yarn.lock
index d607024..ee49552 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+bulma-extensions@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/bulma-extensions/-/bulma-extensions-2.2.2.tgz#d46f11d1242a3fdc60a983afaea0b5e6c137362d"
+
 bulma@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.1.tgz#73c2e3b2930c90cc272029cbd19918b493fca486"