From ed92ab798b9ce2a24c2883ab56834fc905ba7aa8 Mon Sep 17 00:00:00 2001 From: clayton Date: Mon, 13 Jun 2022 22:09:50 -0700 Subject: [PATCH 1/4] Pin important wiki notices to the top of the page --- resources/assets/less/bem/wiki-notice.less | 13 ++++++++++ resources/views/wiki/_notice.blade.php | 30 ++++++++++++---------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/resources/assets/less/bem/wiki-notice.less b/resources/assets/less/bem/wiki-notice.less index baa94f120ae..72dfab74676 100644 --- a/resources/assets/less/bem/wiki-notice.less +++ b/resources/assets/less/bem/wiki-notice.less @@ -25,4 +25,17 @@ margin: 0; } } + + &__pinned-container { + background-color: hsl(var(--hsl-b5)); + position: sticky; + --navbar-height: @navbar-height; + // 1px overlap with navbar to prevent possible gap in some cases. + // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=1261852 + top: calc(var(--navbar-height) - 1px); + + @media @desktop { + --navbar-height: @nav2-height--pinned; + } + } } diff --git a/resources/views/wiki/_notice.blade.php b/resources/views/wiki/_notice.blade.php index f7ba57e4028..0140a688650 100644 --- a/resources/views/wiki/_notice.blade.php +++ b/resources/views/wiki/_notice.blade.php @@ -8,21 +8,23 @@ @endif -@if ($page->isLegalTranslation()) -
- {!! osu_trans('wiki.show.translation.legal', [ - 'default' => ''.e(osu_trans('wiki.show.translation.default')).'', - ]) !!} -
-@endif +
+ @if ($page->isLegalTranslation()) +
+ {!! osu_trans('wiki.show.translation.legal', [ + 'default' => ''.e(osu_trans('wiki.show.translation.default')).'', + ]) !!} +
+ @endif -@if ($page->isOutdatedTranslation()) -
- {!! osu_trans('wiki.show.translation.outdated', [ - 'default' => ''.e(osu_trans('wiki.show.translation.default')).'', - ]) !!} -
-@endif + @if ($page->isOutdatedTranslation()) +
+ {!! osu_trans('wiki.show.translation.outdated', [ + 'default' => ''.e(osu_trans('wiki.show.translation.default')).'', + ]) !!} +
+ @endif +
@if ($page->isOutdated())
From 638fb90cb3abdb69170eca67e530b0d4a674b655 Mon Sep 17 00:00:00 2001 From: clayton Date: Mon, 13 Jun 2022 22:16:35 -0700 Subject: [PATCH 2/4] Factor out offset sticky thing to function --- resources/assets/less/bem/page-extra-tabs.less | 10 +--------- resources/assets/less/bem/wiki-notice.less | 10 +--------- resources/assets/less/functions.less | 12 ++++++++++++ 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/resources/assets/less/bem/page-extra-tabs.less b/resources/assets/less/bem/page-extra-tabs.less index 83aff777333..6748d0aa08c 100644 --- a/resources/assets/less/bem/page-extra-tabs.less +++ b/resources/assets/less/bem/page-extra-tabs.less @@ -2,14 +2,6 @@ // See the LICENCE file in the repository root for full licence text. .page-extra-tabs { - position: sticky; - --navbar-height: @navbar-height; - // 1px overlap with navbar to prevent possible gap in some cases. - // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=1261852 - top: calc(var(--navbar-height) - 1px); + .sticky-below-navbar(); z-index: @z-index--page-extra-tabs; - - @media @desktop { - --navbar-height: @nav2-height--pinned; - } } diff --git a/resources/assets/less/bem/wiki-notice.less b/resources/assets/less/bem/wiki-notice.less index 72dfab74676..35ab1a6acfc 100644 --- a/resources/assets/less/bem/wiki-notice.less +++ b/resources/assets/less/bem/wiki-notice.less @@ -27,15 +27,7 @@ } &__pinned-container { + .sticky-below-navbar(); background-color: hsl(var(--hsl-b5)); - position: sticky; - --navbar-height: @navbar-height; - // 1px overlap with navbar to prevent possible gap in some cases. - // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=1261852 - top: calc(var(--navbar-height) - 1px); - - @media @desktop { - --navbar-height: @nav2-height--pinned; - } } } diff --git a/resources/assets/less/functions.less b/resources/assets/less/functions.less index fcbb2d2c6c5..3427a27316b 100644 --- a/resources/assets/less/functions.less +++ b/resources/assets/less/functions.less @@ -322,3 +322,15 @@ /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } + +.sticky-below-navbar() { + position: sticky; + --navbar-height: @navbar-height; + // 1px overlap with navbar to prevent possible gap in some cases. + // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=1261852 + top: calc(var(--navbar-height) - 1px); + + @media @desktop { + --navbar-height: @nav2-height--pinned; + } +} From 60afcbad6527e9f21afece59f59ccc42a2e07aaa Mon Sep 17 00:00:00 2001 From: clayton Date: Tue, 14 Jun 2022 02:27:44 -0700 Subject: [PATCH 3/4] Adjust scroll-padding-top if there are pinned notices --- .../wiki/pinned-notices-scroll-padding.ts | 22 +++++++++++++++++++ resources/assets/lib/osu-core.ts | 2 ++ resources/views/wiki/_notice.blade.php | 2 +- 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts diff --git a/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts b/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts new file mode 100644 index 00000000000..b22a90128dc --- /dev/null +++ b/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts @@ -0,0 +1,22 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the GNU Affero General Public License v3.0. +// See the LICENCE file in the repository root for full licence text. + +import core from 'osu-core-singleton'; + +export default class PinnedNoticesScrollPadding { + constructor() { + $(document).on('turbolinks:load', this.adjustScrollPadding); + } + + private adjustScrollPadding = () => { + const pinnedNotices = document.querySelector('.js-wiki-pinned-notices'); + + if (!(pinnedNotices instanceof HTMLElement)) return; + + const scrollPadding = + core.stickyHeader.headerHeight + + pinnedNotices.getBoundingClientRect().height + + 10; + document.documentElement.style.scrollPaddingTop = `${scrollPadding}px`; + }; +} diff --git a/resources/assets/lib/osu-core.ts b/resources/assets/lib/osu-core.ts index c4615bcd605..a5d7b53fbbd 100644 --- a/resources/assets/lib/osu-core.ts +++ b/resources/assets/lib/osu-core.ts @@ -23,6 +23,7 @@ import UserLoginObserver from 'core/user/user-login-observer'; import UserModel from 'core/user/user-model'; import UserPreferences from 'core/user/user-preferences'; import UserVerification from 'core/user/user-verification'; +import PinnedNoticesScrollPadding from 'core/wiki/pinned-notices-scroll-padding'; import ReferenceLinkTooltip from 'core/wiki/reference-link-tooltip'; import WindowFocusObserver from 'core/window-focus-observer'; import WindowSize from 'core/window-size'; @@ -50,6 +51,7 @@ export default class OsuCore { notificationsWorker: NotificationsWorker; readonly osuAudio: OsuAudio; readonly osuLayzr = new OsuLayzr(); + readonly pinnedNoticesScrollPadding = new PinnedNoticesScrollPadding(); readonly reactTurbolinks: ReactTurbolinks; readonly referenceLinkTooltip = new ReferenceLinkTooltip(); readonly scorePins = new ScorePins(); diff --git a/resources/views/wiki/_notice.blade.php b/resources/views/wiki/_notice.blade.php index 0140a688650..2c08e15d4be 100644 --- a/resources/views/wiki/_notice.blade.php +++ b/resources/views/wiki/_notice.blade.php @@ -8,7 +8,7 @@
@endif -
+
@if ($page->isLegalTranslation())
{!! osu_trans('wiki.show.translation.legal', [ From 83f3a03fde3b140250a6731c7065aa89d127592f Mon Sep 17 00:00:00 2001 From: clayton Date: Tue, 14 Jun 2022 02:48:58 -0700 Subject: [PATCH 4/4] Fix switching between desktop and mobile and reset on page change --- resources/assets/less/layout.less | 5 +++-- .../lib/core/wiki/pinned-notices-scroll-padding.ts | 14 ++++---------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/resources/assets/less/layout.less b/resources/assets/less/layout.less index 35a5c2a07f4..129bf731575 100644 --- a/resources/assets/less/layout.less +++ b/resources/assets/less/layout.less @@ -48,10 +48,11 @@ html, body { } html { - scroll-padding-top: @nav2-height--pinned; + --scroll-padding: 0; + scroll-padding-top: calc(var(--scroll-padding) + @nav2-height--pinned); @media @mobile { - scroll-padding-top: @navbar-height; + scroll-padding-top: calc(var(--scroll-padding) + @navbar-height); } } diff --git a/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts b/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts index b22a90128dc..73104f36751 100644 --- a/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts +++ b/resources/assets/lib/core/wiki/pinned-notices-scroll-padding.ts @@ -1,8 +1,6 @@ // Copyright (c) ppy Pty Ltd . Licensed under the GNU Affero General Public License v3.0. // See the LICENCE file in the repository root for full licence text. -import core from 'osu-core-singleton'; - export default class PinnedNoticesScrollPadding { constructor() { $(document).on('turbolinks:load', this.adjustScrollPadding); @@ -10,13 +8,9 @@ export default class PinnedNoticesScrollPadding { private adjustScrollPadding = () => { const pinnedNotices = document.querySelector('.js-wiki-pinned-notices'); - - if (!(pinnedNotices instanceof HTMLElement)) return; - - const scrollPadding = - core.stickyHeader.headerHeight + - pinnedNotices.getBoundingClientRect().height + - 10; - document.documentElement.style.scrollPaddingTop = `${scrollPadding}px`; + const scrollPadding = pinnedNotices instanceof HTMLElement + ? pinnedNotices.getBoundingClientRect().height + 10 + : 0; + document.documentElement.style.setProperty('--scroll-padding', `${scrollPadding}px`); }; }