notification badges, navbar + admin navbar

assets/css/common/measurements.css

@@ -1,3 +1,4 @@
+$min-widescreen-width: 1500px;
 $min-desktop-width: 1280px;
 $max-phone-width: 700px;
 $narrow-layout-width: 960px;
@@ -22,7 +23,7 @@ $font-family-heading: $font-family-base;
 
   /* Navbar */
   --navbar-size: 4rem;
-  --navbar-secondary-size: 2.5rem;
+  --navbar-secondary-size: 2.25rem;
   --navbar-input-size: 2rem;
   --navbar-input-width: 18vw;
   --navbar-input-max-width: 22rem;
@@ -76,11 +77,14 @@ $font-family-heading: $font-family-base;
   --badge-normal-size: 2rem;
 
   /* Counter badges (the "red notification badge") */
-  --number-badge-size: 0.6rem;
+  --number-badge-size: 0.8rem;
   --number-badge-padding: 0.1rem;
   --number-badge-border: 2px;
-  --number-badge-lower-offset: 0.7rem;
-  --number-badge-upper-offset: 0.7rem;
+  --number-badge-vote-vertical-offset: 0.7rem;
+  --number-badge-header-vertical-offset: 1.2rem;
+  --number-badge-header-horizontal-offset: 0.6rem;
+  --number-badge-admin-vertical-offset: 0.6rem;
+  --number-badge-admin-horizontal-offset: 0.6rem;
 
   /* Fonts */
   --font-family: $font-family-base;
@@ -91,6 +95,7 @@ $font-family-heading: $font-family-base;
   --font-micro-size: 10px;
   --font-header-size: 16px;
   --font-icon-size: 2rem;
+  --font-small-icon-size: 0.9rem;
   --font-h1-size: 1.75rem;
   --font-h2-size: 1.5rem;
   --font-h3-size: 1.35rem;

assets/css/common/mixins.css

@@ -1,3 +1,9 @@
+@define-mixin if-widescreen {
+  @media (min-width: calc($min-widescreen-width + 1px)) {
+    @mixin-content;
+  }
+}
+
 @define-mixin if-desktop {
   @media (min-width: calc($min-desktop-width + 1px)) {
     @mixin-content;

assets/css/elements/mobile.css

@@ -1,3 +1,7 @@
+.hidden--narrow-screen {
+  display: none;
+}
+
 /* Phones. */
 @mixin if-phone {
   .hidden--phone {
@@ -25,3 +29,14 @@
     display: none !important;
   }
 }
+
+/* Widescreens are larger than 1500px */
+@mixin if-widescreen {
+  .hidden--widescreen {
+    display: none !important;
+  }
+
+  .hidden--narrow-screen {
+    display: inherit;
+  }
+}

assets/css/views/admin.css

@@ -1,12 +1,37 @@
+nav.header__staff {
+  display: flex;
+  line-height: var(--navbar-secondary-size);
+  border-radius: var(--border-radius-outer);
+}
+
 .header__counter__admin {
-  position: absolute;
+  display: inline-flex;
+  flex-flow: column;
   background: var(--danger-color);
-  border: 1px solid var(--danger-border-color);
-  border-radius: var(--border-radius-inner);
+  border-radius: 100%;
   min-width: var(--number-badge-size);
   line-height: var(--number-badge-size);
   font-size: var(--number-badge-size);
+  font-weight: bold;
   padding: var(--number-badge-padding);
-  top: var(--number-badge-lower-offset);
-  left: 0.25rem;
+  text-align: center;
+}
+
+.header--secondary__admin-links {
+  display: flex;
+  gap: var(--padding-large);
+  padding: 0 var(--padding-normal);
+  background: var(--danger-dark-color);
+  border-radius: var(--border-radius-outer);
+}
+
+@mixin if-mobile {
+  .header--secondary__admin-links {
+    justify-content: center;
+    flex: 1 0 auto;
+  }
+
+  nav.header__staff {
+    flex: 1 0 auto;
+  }
 }

assets/css/views/header.css

@@ -9,6 +9,7 @@ header {
 
 .header__link {
   @mixin animated-transition;
+  position: relative;
   color: var(--text-color) !important;
 }
 
@@ -42,6 +43,29 @@ header {
   border: 0;
 }
 
+.header__counter {
+  position: absolute;
+  background: var(--danger-color);
+  border-radius: 100%;
+  min-width: var(--number-badge-size);
+  line-height: var(--number-badge-size);
+  font-size: var(--number-badge-size);
+  font-weight: bold;
+  padding: var(--number-badge-padding);
+  text-align: center;
+  top: var(--number-badge-header-vertical-offset);
+  left: var(--number-badge-header-horizontal-offset);
+}
+
+/* Old style counter */
+.header__counter--simple {
+  display: inline-flex;
+  padding: 0 var(--padding-small);
+  line-height: inherit;
+  text-align: center;
+  background: var(--primary-muted-color);
+}
+
 .header__input {
   @mixin animated-transition;
   height: var(--navbar-input-size);
@@ -72,9 +96,18 @@ header {
   padding: 0 var(--padding-normal);
 }
 
+.nav-container {
+  display: flex;
+  gap: var(--padding-normal);
+  padding: 0 var(--padding-normal);
+  flex-wrap: wrap;
+}
+
 nav.header__secondary {
   display: flex;
+  flex: 1 0 auto;
   line-height: var(--navbar-secondary-size);
+  border-radius: var(--border-radius-outer);
   padding: 0 var(--padding-large);
   font-size: var(--font-header-size);
   gap: var(--padding-large);
@@ -82,6 +115,16 @@ nav.header__secondary {
   background: var(--primary-color);
 }
 
+nav.header__secondary .fa,
+nav.header__staff .fa {
+  display: inline-flex;
+  text-align: center;
+  font-size: var(--font-small-icon-size);
+  width: var(--font-small-icon-size);
+  height: var(--font-small-icon-size);
+  margin-right: var(--padding-tiny);
+}
+
 nav.header__secondary .header__link {
   color: var(--text-light-color) !important;
 }

assets/css/views/interaction.css

@@ -27,7 +27,7 @@
   padding: var(--number-badge-padding);
   line-height: var(--number-badge-size);
   min-width: var(--number-badge-size);
-  top: var(--number-badge-lower-offset);
+  top: var(--number-badge-vote-vertical-offset);
 }
 
 .interaction--comment:hover > .comments-count {

assets/js/notifications.js

@@ -5,6 +5,7 @@
 import { fetchJson, handleError } from './utils/requests';
 import { $ } from './utils/dom';
 import { delegate } from './utils/events';
+import { assertNotNull } from './utils/assert';
 import store from './utils/store';
 
 const NOTIFICATION_INTERVAL = 600000,
@@ -39,7 +40,7 @@ function getNewNotifications() {
 }
 
 function updateNotificationTicker(notificationCount) {
-  const ticker = $('.js-notification-ticker');
+  const ticker = assertNotNull($('.js-notification-ticker'));
   const parsedNotificationCount = Number(notificationCount);
 
   ticker.dataset.notificationCount = parsedNotificationCount;

assets/js/tags.ts

@@ -60,7 +60,7 @@ function createTagDropdown(tag: HTMLSpanElement) {
     const act = event.target.dataset.tagAction;
 
     if (act && actions[act]) {
-      actions[act]()
+      actions[act]();
     }
   }) as EventListener);
 }

lib/philomena_web/templates/layout/_header.html.slime

@@ -30,7 +30,7 @@ header
   = if @current_user do
     a.header__link href="/notifications" title="Notifications"
       i.fas.fa-bell>
-      /span.js-notification-ticker.fa__text.header__counter data-notification-count=@notification_count = @notification_count
+      span.js-notification-ticker.fa__text.header__counter data-notification-count=@notification_count = @notification_count
 
     a.header__link href="/conversations" title="Conversations"
       = if @conversation_count > 0 do
@@ -125,7 +125,11 @@ header
       | Register
     a.header__link href=~p"/sessions/new"
       | Login
-nav.header__secondary
-  = render PhilomenaWeb.LayoutView, "_header_navigation.html", assigns
+
+.nav-container
+  nav.header__secondary
+    = render PhilomenaWeb.LayoutView, "_header_navigation.html", assigns
+
   = if !is_nil(@current_user) and @current_user.role != "user" do
-    /= render PhilomenaWeb.LayoutView, "_header_staff_links.html", assigns
+    nav.header__staff
+      = render PhilomenaWeb.LayoutView, "_header_navigation_staff.html", assigns

lib/philomena_web/templates/layout/_header_navigation.html.slime

@@ -45,7 +45,7 @@ a.header__link href="/tags"
 a.header__link href="/channels"
   i.fa.fa-stream>
   ' Live
-  span.header__counter
+  span.header__counter--simple
     = @conn.assigns.live_channels
 
 a.header__link href="/galleries"

lib/philomena_web/templates/layout/_header_navigation_staff.html.slime

@@ -1,8 +1,8 @@
-.flex.flex--centered.header--secondary__admin-links.stretched-mobile-links.js-staff-action
+.header--secondary__admin-links.js-staff-action
   = if manages_users?(@conn) do
     .dropdown.hidden--mobile
       a.header__link title="Admin"
-        ' A
+        i.fa.fa-bars>
         i.fa.fa-caret-down
 
       .dropdown__content.js-burger-links
@@ -64,38 +64,56 @@
 
   = if @pending_approval_count do
     = link to: ~p"/admin/approvals", class: "header__link", title: "Approval Queue" do
-      ' Q
+      i.fa.fa-stamp>
+      span
+        | A
+        span.hidden--narrow-screen> pprovals
       span.header__counter__admin
         = @pending_approval_count
 
   = if @duplicate_report_count do
     = link to: ~p"/duplicate_reports", class: "header__link", title: "Duplicates" do
-      ' D
+      i.fa.fa-copy>
+      span
+        | D
+        span.hidden--narrow-screen> upes
       span.header__counter__admin
         = @duplicate_report_count
 
   = if @report_count do
     = link to: ~p"/admin/reports", class: "header__link", title: "Reports" do
-      ' R
+      i.fa.fa-flag>
+      span
+        | R
+        span.hidden--narrow-screen> eports
       span.header__counter__admin
         = @report_count
 
   = if @artist_link_count do
     = link to: ~p"/admin/artist_links", class: "header__link", title: "Artist Links" do
-      ' L
+      i.fa.fa-link>
+      span
+        | L
+        span.hidden--narrow-screen> inks
       span.header__counter__admin
         = @artist_link_count
 
   = if @dnp_entry_count do
     = link to: ~p"/admin/dnp_entries", class: "header__link", title: "DNP Requests" do
-      ' S
+      i.fa.fa-circle-minus>
+      span
+        span.hidden--narrow-screen> DNPs
+        span.hidden--widescreen> S
       span.header__counter__admin
         = @dnp_entry_count
 
   = if manages_bans?(@conn) do
     .dropdown.hidden--mobile
       a.header__link title="Bans"
-        ' B
+        i.fa.fa-gavel>
+      span
+        | B
+        span.hidden--narrow-screen> ans
         i.fa.fa-caret-down
 
       .dropdown__content.dropdown__content--right.js-burger-links