diff --git a/app/javascript/src/javascripts/themes.js b/app/javascript/src/javascripts/themes.js index 83d7f9da6..8ee283cfc 100644 --- a/app/javascript/src/javascripts/themes.js +++ b/app/javascript/src/javascripts/themes.js @@ -3,7 +3,7 @@ import LStorage from "./utility/storage"; const Theme = {}; -Theme.Values = ["Main", "Extra", "StickyHeader", "Palette", "Navbar", "Gestures"]; +Theme.Values = ["Main", "Extra", "StickyHeader", "ForumNotif", "Palette", "Navbar", "Gestures"]; for (const one of Theme.Values) { Object.defineProperty(Theme, one, { diff --git a/app/javascript/src/javascripts/utility/storage.js b/app/javascript/src/javascripts/utility/storage.js index f796134d4..1f1c45d7a 100644 --- a/app/javascript/src/javascripts/utility/storage.js +++ b/app/javascript/src/javascripts/utility/storage.js @@ -65,6 +65,9 @@ LStorage.Theme = { /** @returns {boolean} True if the sticky header is enabled */ StickyHeader: ["theme-sheader", false], + + /** @returns {boolean} True if the forum notification dot is enabled */ + ForumNotif: ["theme-forumnotif", false], }; StorageUtils.bootstrapMany(LStorage.Theme); diff --git a/app/javascript/src/styles/common/navigation.scss b/app/javascript/src/styles/common/navigation.scss index 3a732f95d..b42b0d4d9 100644 --- a/app/javascript/src/styles/common/navigation.scss +++ b/app/javascript/src/styles/common/navigation.scss @@ -104,22 +104,6 @@ nav.navigation { } &.current a { background-color: themed("color-foreground"); } - &.forum-updated { - position: relative; - - &::after { - content: ""; - width: 6px; - height: 6px; - border-radius: 3px; - - background: var(--palette-text-red); - - position: absolute; - right: 0.2em; - top: 1em; - } - } } } @@ -255,6 +239,28 @@ body[data-th-sheader="true"] nav.navigation { } +// Forum notification +body[data-th-forumnotif="true"] nav.navigation .nav-primary li.forum-updated { + position: relative; + + &::after { + content: ""; + width: 6px; + height: 6px; + border-radius: 3px; + + background: var(--palette-text-red); + + position: absolute; + right: 0.2em; + top: 1em; + + @include window-larger-than(800px) { + top: 0.2em; + } + } +} + // Mobile toggle html.nav-toggled { @@ -333,10 +339,6 @@ nav.navigation, html.nav-toggled nav.navigation { padding: 0 0.75em; i { display: none; } } - - &.forum-updated::after { - top: 0.2em; - } } } diff --git a/app/views/layouts/_theme_include.html.erb b/app/views/layouts/_theme_include.html.erb index 21657ba33..cf3791804 100644 --- a/app/views/layouts/_theme_include.html.erb +++ b/app/views/layouts/_theme_include.html.erb @@ -4,12 +4,14 @@ var theme = localStorage.getItem('theme') || 'hexagon'; var extra = localStorage.getItem('theme-extra') || 'hexagon'; var sheader = localStorage.getItem('theme-sheader') || false; + var forumnotif = localStorage.getItem('theme-forumnotif') || false; var palette = localStorage.getItem('theme-palette') || 'default'; var nav = localStorage.getItem('theme-nav') || 'top'; var b = document.body; b.setAttribute('data-th-main', theme); b.setAttribute('data-th-extra', extra); b.setAttribute('data-th-sheader', sheader); + b.setAttribute('data-th-forumnotif', forumnotif); b.setAttribute('data-th-palette', palette); b.setAttribute('data-th-nav', nav); } catch(e) {} diff --git a/app/views/static/theme.html.erb b/app/views/static/theme.html.erb index ac8a268ec..eeb601027 100644 --- a/app/views/static/theme.html.erb +++ b/app/views/static/theme.html.erb @@ -43,6 +43,12 @@ + + +