From 1523e3f22942ea780eb9ab3b7d59defae17dfcec Mon Sep 17 00:00:00 2001 From: Jason McBrayer 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 @@ {% block title %} - {% if own_acct %} - brutaldon ('{{ own_acct.username }}') - {% else %} - brutaldon - {% endif %} + {% if own_acct %} + brutaldon ('{{ own_acct.username }}') + {% else %} + brutaldon + {% endif %} {% endblock %} - - {% if not preferences %} - - - - {% else %} - - - {% if not preferences.theme.is_brutalist %} - - + {% if not preferences %} + + + + {% else %} + + + {% if not preferences.theme.is_brutalist %} + + + href="{% static 'css/photobox.css' %}"> @@ -97,7 +100,16 @@ ic-on-success="afterPage('{{ own_acct.username }}', 'Notifications');" ic-indicator="#page-load-indicator"> -   Notifications + {% if notifications and not preferences.theme.is_brutalist %} + +   Notifications + + {% elif notifications %} +   Notifications ({{ notifications }}) + {% else %} +   Notifications + {% endif %}