From 208007d9a08290c333d3424c7a9c8b807ba2cd4c Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:56:35 +0200 Subject: [PATCH] UX: centralise DMenu mobile styling + fixes (#28469) --- .../app/components/navigation-bar.gjs | 1 - .../topic-map/topic-map-summary.gjs | 63 ++--- .../components/float-kit/d-menu-test.js | 26 +- .../components/widgets/post-test.js | 2 +- .../float-kit/addon/components/d-menu.gjs | 1 - .../common/components/topic-map.scss | 261 ++++++++---------- .../stylesheets/common/float-kit/d-menu.scss | 1 + .../stylesheets/mobile/components/_index.scss | 6 +- .../mobile/components/dropdown-menu.scss | 7 - .../mobile/components/topic-map.scss | 9 + .../stylesheets/mobile/float-kit/d-menu.scss | 15 +- .../stylesheets/mobile/list-controls.scss | 1 - app/assets/stylesheets/mobile/modal.scss | 3 + 13 files changed, 189 insertions(+), 207 deletions(-) delete mode 100644 app/assets/stylesheets/mobile/components/dropdown-menu.scss create mode 100644 app/assets/stylesheets/mobile/components/topic-map.scss diff --git a/app/assets/javascripts/discourse/app/components/navigation-bar.gjs b/app/assets/javascripts/discourse/app/components/navigation-bar.gjs index d7fd4df4c53..f711976c9ff 100644 --- a/app/assets/javascripts/discourse/app/components/navigation-bar.gjs +++ b/app/assets/javascripts/discourse/app/components/navigation-bar.gjs @@ -53,7 +53,6 @@ export default class NavigationBarComponent extends Component { {{#each @navItems as |navItem|}} <:content>

{{i18n "topic_map.links_title"}}

- - - {{#each this.linksToShow as |link|}} - - - - - {{/each}} - -
- - {{link.clicks}} - - - -
- {{#if this.hasMoreLinks}} -
- - + {{#each this.linksToShow as |link|}} +
  • + + {{link.clicks}} + + + - -
    • + + {{/each}} + + + {{#if this.hasMoreLinks}} + + {{/if}} diff --git a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js index 76a78fa30f1..f140460cc15 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js @@ -263,7 +263,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await getOwner(this).lookup("service:menu").close("test"); - assert.dom(".fk-d-menu__content.test-content").doesNotExist(); + assert.dom(".fk-d-menu.test-content").doesNotExist(); }); test("get a menu by identifier", async function (assert) { @@ -276,7 +276,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await activeMenu.close(); - assert.dom(".fk-d-menu__content.test-content").doesNotExist(); + assert.dom(".fk-d-menu.test-content").doesNotExist(); }); test("opening a menu with the same identifier", async function (assert) { @@ -302,13 +302,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await click(".first.fk-d-menu__trigger"); - assert.dom(".fk-d-menu__content.first").exists(); - assert.dom(".fk-d-menu__content.second").doesNotExist(); + assert.dom(".fk-d-menu.first").exists(); + assert.dom(".fk-d-menu.second").doesNotExist(); await click(".second.fk-d-menu__trigger"); - assert.dom(".fk-d-menu__content.first").doesNotExist(); - assert.dom(".fk-d-menu__content.second").exists(); + assert.dom(".fk-d-menu.first").doesNotExist(); + assert.dom(".fk-d-menu.second").exists(); }); test("empty @identifier/@groupIdentifier", async function (assert) { @@ -318,13 +318,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await click(".first.fk-d-menu__trigger"); - assert.dom(".fk-d-menu__content.first").exists(); - assert.dom(".fk-d-menu__content.second").doesNotExist(); + assert.dom(".fk-d-menu.first").exists(); + assert.dom(".fk-d-menu.second").doesNotExist(); await click(".second.fk-d-menu__trigger"); - assert.dom(".fk-d-menu__content.first").exists("it doesn’t autoclose"); - assert.dom(".fk-d-menu__content.second").exists(); + assert.dom(".fk-d-menu.first").exists("it doesn’t autoclose"); + assert.dom(".fk-d-menu.second").exists(); }); test("@class", async function (assert) { @@ -333,7 +333,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await open(); assert.dom(".fk-d-menu__trigger.first").exists(); - assert.dom(".fk-d-menu__content.first").exists(); + assert.dom(".fk-d-menu.first").exists(); }); test("@triggerClass", async function (assert) { @@ -342,7 +342,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await open(); assert.dom(".fk-d-menu__trigger.first").exists(); - assert.dom(".fk-d-menu__content.first").doesNotExist(); + assert.dom(".fk-d-menu.first").doesNotExist(); }); test("@contentClass", async function (assert) { @@ -351,6 +351,6 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) { await open(); assert.dom(".fk-d-menu__trigger.first").doesNotExist(); - assert.dom(".fk-d-menu__content.first").exists(); + assert.dom(".fk-d-menu.first").exists(); }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js index 13344564b13..de35d238c79 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js @@ -880,7 +880,7 @@ module("Integration | Component | Widget | post", function (hooks) { await click(".topic-map__links-trigger"); assert.dom(".topic-map__links-content").exists({ count: 1 }); assert.dom(".topic-map__links-content .topic-link").exists({ count: 5 }); - await click(".link-summary button"); + await click(".link-summary"); assert.dom(".topic-map__links-content .topic-link").exists({ count: 6 }); }); diff --git a/app/assets/javascripts/float-kit/addon/components/d-menu.gjs b/app/assets/javascripts/float-kit/addon/components/d-menu.gjs index ffedaf9426f..33a99fbd2df 100644 --- a/app/assets/javascripts/float-kit/addon/components/d-menu.gjs +++ b/app/assets/javascripts/float-kit/addon/components/d-menu.gjs @@ -110,7 +110,6 @@ export default class DMenu extends Component { @trapTab={{this.options.trapTab}} @mainClass={{concatClass "fk-d-menu" - "fk-d-menu__content" (concat this.options.identifier "-content") @class @contentClass diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss index ee284e28f58..3b43bb38408 100644 --- a/app/assets/stylesheets/common/components/topic-map.scss +++ b/app/assets/stylesheets/common/components/topic-map.scss @@ -90,40 +90,6 @@ body:not(.archetype-private_message) { overflow-wrap: anywhere; } - .fk-d-menu__content { - .fk-d-menu__inner-content, - .d-modal__container { - box-sizing: border-box; - max-height: 80dvh; - min-width: 20em; - width: 100%; - overflow: auto; - align-items: start; - overscroll-behavior: contain; - padding: 1rem 1.5rem; - width: 100%; - flex-direction: column; - .desktop-view & { - @include breakpoint(mobile-large) { - min-width: unset; - max-width: 90dvw; - } - } - } - - .loading-container { - width: 100%; - } - - h3 { - font-weight: bold; - font-size: var(--font-up-1); - margin-top: -0.35em; - margin-bottom: 0.5em; - width: 100%; - } - } - &__contents { padding-block: 0.5em; flex-grow: 1; @@ -272,7 +238,6 @@ body:not(.archetype-private_message) { .view-explainer { color: var(--primary-700); font-size: var(--font-down-1); - margin-top: 1em; } .estimated-read-time { @@ -296,14 +261,13 @@ body:not(.archetype-private_message) { .mobile-view { .d-modal[class*="topic-map__"] { - .d-modal__body { - padding: 1em 1em 2em 1em; + h3 { + font-size: var(--font-up-2); + padding-inline: 1rem; + } - h3 { - width: 100%; - font-weight: bold; - font-size: var(--font-up-2); - } + p { + overflow-wrap: break-word; } } @@ -313,84 +277,145 @@ body:not(.archetype-private_message) { } // DMenu popups +.fk-d-menu, +.fk-d-menu-modal { + //shared + &__inner-content { + .topic-map__likes-content &, + .topic-map__links-content &, + .topic-map__users-content &, + .topic-map__views-content & { + flex-direction: column; + padding-block: 0.75em; + } + } -.topic-map__likes-content.fk-d-menu__content { - .fk-d-menu__inner-content, - .d-modal__body { + h3 { + padding-inline: 1rem; padding-bottom: 0.5em; + font-size: var(--font-up-1); + border-bottom: 1px solid var(--primary-low); + } + + .loading-container { + width: 100%; + } + + &.topic-map__likes-content, + &.topic-map__links-content { ul { margin: 0; padding: 0; list-style-type: none; + } + } - li > a { - display: grid; - grid-template-areas: "user likes" "post post"; - grid-template-columns: auto 1fr; - border-top: 1px solid var(--primary-low); - padding: 1em 0; - gap: 0.25em; + //per type + &.topic-map__likes-content { + li > a { + display: grid; + grid-template-areas: "user likes" "post post"; + grid-template-columns: auto 1fr; + gap: 0.25em; + padding: 0.75em 1rem; - .discourse-no-touch & { - &:hover { - background: var(--primary-very-low); - box-shadow: -1em 0px 0px 0px var(--primary-very-low), - 1em 0px 0px 0px var(--primary-very-low); - } + .discourse-no-touch & { + &:hover { + background: var(--d-hover); } } + } - .like-section__user { + li:not(:last-of-type) { + a { + border-bottom: 1px solid var(--primary-low); + } + } + + .like-section { + &__user { grid-area: user; - color: var(--primary-high); - justify-content: start; display: flex; - align-items: start; + align-items: center; font-weight: bold; gap: 0.5em; - img { - position: relative; - top: 0.2em; - } } - .like-section__likes { + &__likes { grid-area: likes; display: flex; - align-items: start; - gap: 0.25em; color: var(--primary-medium); justify-content: end; - font-size: var(--font-0); + align-items: center; + .d-icon { font-size: var(--font-down-1); color: var(--love); position: relative; - top: 0.28em; } } + } - p { - grid-area: post; - overflow-wrap: anywhere; + p { + grid-area: post; + overflow-wrap: anywhere; + color: var(--primary-high); + text-align: left; + margin: 0; + padding-left: 2em; + } + } + + &.topic-map__links-content { + li { + display: grid; + grid-template-columns: auto 1fr; + grid-template-areas: + "counter link" + ". domain"; + padding: 0.75em 1rem; + gap: 0.25em; + + &:not(:last-of-type) { + border-bottom: 1px solid var(--primary-low); + } + + .discourse-no-touch & { + &:hover { + background: var(--d-hover); + } + } + } + .badge { + grid-area: counter; + align-self: start; + top: 0.2em; + } + .topic-link { + grid-area: link; + } + .domain { + grid-area: domain; + font-size: var(--font-down-2); + color: var(--primary-medium); + } + + .link-summary { + width: 100%; + .d-icon { color: var(--primary-high); - text-align: left; - margin: 0; - padding-left: 2em; } } } -} -.topic-map__users-content { - .fk-d-menu__inner-content, - .d-modal__body { + &.topic-map__users-content { .topic-map__users-list { display: flex; flex-wrap: wrap; gap: 0.5em; + padding: 0.75em 1rem; } .poster { display: block; @@ -425,73 +450,17 @@ body:not(.archetype-private_message) { background-size: contain; } } -} -.topic-map__links-content { - .fk-d-menu__inner-content, - .d-modal__body { - .topic-links { - width: 100%; - - tbody { - border: none; - } - tr { - border-top: 1px solid var(--primary-low); - border-bottom: none; - td:nth-of-type(2) { - padding-left: 0.5em; - } - } - } - - a { - display: inline-block; - line-height: var(--line-height-medium); - } - - td { - vertical-align: top; - padding: 0.5em 0; - } - - span.domain { - font-size: var(--font-down-2); - color: var(--primary-medium); - } - - .link-summary { - width: 100%; - - .btn { - width: 100%; - .d-icon { - color: var(--primary-high); - } - .discourse-no-touch & { - &:hover { - background: var(--primary-low); - } - } - } - } - } -} - -.topic-map__views-content { - .fk-d-menu__inner-content, - .d-modal__body { + &.topic-map__views-content { .topic-views { display: flex; flex-direction: column; align-items: center; - flex: 1 1 auto; - padding: 0.5em 1em 0; &__wrapper { display: flex; - width: 100%; - align-items: space-between; + justify-content: center; + padding: 0 1rem; } &__count { font-size: var(--font-up-4); @@ -504,12 +473,16 @@ body:not(.archetype-private_message) { } } + canvas { + padding: 0.75em 1rem; + } + + .view-explainer { + padding: 0 1rem; + } + &:has(.topic-views) { min-width: unset; - - h3 { - text-align: center; - } } } } diff --git a/app/assets/stylesheets/common/float-kit/d-menu.scss b/app/assets/stylesheets/common/float-kit/d-menu.scss index 4f9a8fa2677..277b3b5f96e 100644 --- a/app/assets/stylesheets/common/float-kit/d-menu.scss +++ b/app/assets/stylesheets/common/float-kit/d-menu.scss @@ -53,6 +53,7 @@ background-color: var(--secondary); border: 1px solid var(--primary-low); box-shadow: var(--shadow-menu-panel); + overscroll-behavior: contain; } .arrow { diff --git a/app/assets/stylesheets/mobile/components/_index.scss b/app/assets/stylesheets/mobile/components/_index.scss index 4666a0f8798..c4dd3996f9a 100644 --- a/app/assets/stylesheets/mobile/components/_index.scss +++ b/app/assets/stylesheets/mobile/components/_index.scss @@ -1,6 +1,6 @@ +@import "bookmark-menu"; +@import "more-topics"; @import "topic-footer-mobile-dropdown"; +@import "topic-map"; @import "user-card"; @import "user-stream-item"; -@import "more-topics"; -@import "bookmark-menu"; -@import "dropdown-menu"; diff --git a/app/assets/stylesheets/mobile/components/dropdown-menu.scss b/app/assets/stylesheets/mobile/components/dropdown-menu.scss deleted file mode 100644 index 53c5ece43df..00000000000 --- a/app/assets/stylesheets/mobile/components/dropdown-menu.scss +++ /dev/null @@ -1,7 +0,0 @@ -.dropdown-menu { - &__item { - .btn { - padding: 0.75rem 1rem; - } - } -} diff --git a/app/assets/stylesheets/mobile/components/topic-map.scss b/app/assets/stylesheets/mobile/components/topic-map.scss new file mode 100644 index 00000000000..21731555425 --- /dev/null +++ b/app/assets/stylesheets/mobile/components/topic-map.scss @@ -0,0 +1,9 @@ +.fk-d-menu-modal { + &.topic-map__links-content { + li { + a { + padding: 0; + } + } + } +} diff --git a/app/assets/stylesheets/mobile/float-kit/d-menu.scss b/app/assets/stylesheets/mobile/float-kit/d-menu.scss index 581ca877572..c254b014bc5 100644 --- a/app/assets/stylesheets/mobile/float-kit/d-menu.scss +++ b/app/assets/stylesheets/mobile/float-kit/d-menu.scss @@ -1,5 +1,18 @@ .fk-d-menu-modal { .d-modal__body { - padding: 0.5rem 0; + padding: 0.5em 0; + } + + h3 { + padding-top: 0.25em; + } + + li > .btn, + li > a { + padding: 0.75em 1rem; + } + + li > a { + display: block; } } diff --git a/app/assets/stylesheets/mobile/list-controls.scss b/app/assets/stylesheets/mobile/list-controls.scss index 185b0ef0810..7c2ad5b4fbb 100644 --- a/app/assets/stylesheets/mobile/list-controls.scss +++ b/app/assets/stylesheets/mobile/list-controls.scss @@ -75,7 +75,6 @@ a { display: block; color: var(--primary); - padding: 0.5em 1rem; &.active { background: var(--d-selected); diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss index 20acf57d047..597d7a10415 100644 --- a/app/assets/stylesheets/mobile/modal.scss +++ b/app/assets/stylesheets/mobile/modal.scss @@ -40,6 +40,9 @@ html:not(.keyboard-visible.mobile-view) { padding: 0.5rem; } + &__footer { + margin-top: auto; + } .ios-device & { &__footer { margin-top: auto;