From 4e6665e2d6f79dc42da2258d02c86b22c74e3820 Mon Sep 17 00:00:00 2001 From: "Luna D." Date: Tue, 11 Jun 2024 01:01:02 +0200 Subject: [PATCH] notification badges, navbar + admin navbar --- assets/css/common/measurements.css | 13 ++++-- assets/css/common/mixins.css | 6 +++ assets/css/elements/mobile.css | 15 +++++++ assets/css/views/admin.css | 35 ++++++++++++--- assets/css/views/header.css | 43 +++++++++++++++++++ assets/css/views/interaction.css | 2 +- assets/js/notifications.js | 3 +- assets/js/tags.ts | 2 +- .../templates/layout/_header.html.slime | 12 ++++-- .../layout/_header_navigation.html.slime | 2 +- ...me => _header_navigation_staff.html.slime} | 34 +++++++++++---- 11 files changed, 142 insertions(+), 25 deletions(-) rename lib/philomena_web/templates/layout/{_header_staff_links.html.slime => _header_navigation_staff.html.slime} (85%) diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css index 3ef1035e..81a7119c 100644 --- a/assets/css/common/measurements.css +++ b/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; diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css index 880dcccd..ec72599c 100644 --- a/assets/css/common/mixins.css +++ b/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; diff --git a/assets/css/elements/mobile.css b/assets/css/elements/mobile.css index 19c6a569..e89fbe05 100644 --- a/assets/css/elements/mobile.css +++ b/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; + } +} diff --git a/assets/css/views/admin.css b/assets/css/views/admin.css index 47668457..25d18237 100644 --- a/assets/css/views/admin.css +++ b/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; + } } diff --git a/assets/css/views/header.css b/assets/css/views/header.css index b681c4f2..96dc8cc7 100644 --- a/assets/css/views/header.css +++ b/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; } diff --git a/assets/css/views/interaction.css b/assets/css/views/interaction.css index aa4daeee..e3eeae10 100644 --- a/assets/css/views/interaction.css +++ b/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 { diff --git a/assets/js/notifications.js b/assets/js/notifications.js index 04d48f91..02167858 100644 --- a/assets/js/notifications.js +++ b/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; diff --git a/assets/js/tags.ts b/assets/js/tags.ts index eaed02f7..c7be4c88 100644 --- a/assets/js/tags.ts +++ b/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); } diff --git a/lib/philomena_web/templates/layout/_header.html.slime b/lib/philomena_web/templates/layout/_header.html.slime index 4aa57010..c08590e5 100644 --- a/lib/philomena_web/templates/layout/_header.html.slime +++ b/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 diff --git a/lib/philomena_web/templates/layout/_header_navigation.html.slime b/lib/philomena_web/templates/layout/_header_navigation.html.slime index dff5426a..84913433 100644 --- a/lib/philomena_web/templates/layout/_header_navigation.html.slime +++ b/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" diff --git a/lib/philomena_web/templates/layout/_header_staff_links.html.slime b/lib/philomena_web/templates/layout/_header_navigation_staff.html.slime similarity index 85% rename from lib/philomena_web/templates/layout/_header_staff_links.html.slime rename to lib/philomena_web/templates/layout/_header_navigation_staff.html.slime index 8543fa07..7b930042 100644 --- a/lib/philomena_web/templates/layout/_header_staff_links.html.slime +++ b/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