From f406bfbedf55093e39d4bed939d454197f4f3e18 Mon Sep 17 00:00:00 2001 From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com> Date: Wed, 5 Mar 2025 20:29:58 -0600 Subject: [PATCH] UX: Misc desktop edits (#15) --- .../discourse/api-initializers/next-gen.gjs | 17 +---- .../components/experimental-screen.gjs | 67 +++++++++++++++++++ scss/box-view.scss | 42 ++++-------- scss/chat.scss | 12 ++-- scss/header.scss | 4 ++ scss/main.scss | 13 ++-- scss/sidebar.scss | 14 ++-- scss/topic-cards.scss | 3 + scss/topic.scss | 11 +-- scss/variables.scss | 1 + 10 files changed, 118 insertions(+), 66 deletions(-) create mode 100644 javascripts/discourse/components/experimental-screen.gjs diff --git a/javascripts/discourse/api-initializers/next-gen.gjs b/javascripts/discourse/api-initializers/next-gen.gjs index e8ba541..4ebd2dd 100644 --- a/javascripts/discourse/api-initializers/next-gen.gjs +++ b/javascripts/discourse/api-initializers/next-gen.gjs @@ -1,19 +1,6 @@ -import Component from "@glimmer/component"; import { apiInitializer } from "discourse/lib/api"; +import ExperimentalScreen from "../components/experimental-screen"; export default apiInitializer("1.8.0", (api) => { - api.renderInOutlet( - "above-main-container", - class ExperimentalScreen extends Component { - - } - ); + api.renderInOutlet("above-main-container", ExperimentalScreen); }); diff --git a/javascripts/discourse/components/experimental-screen.gjs b/javascripts/discourse/components/experimental-screen.gjs new file mode 100644 index 0000000..4cb5dbd --- /dev/null +++ b/javascripts/discourse/components/experimental-screen.gjs @@ -0,0 +1,67 @@ +import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; +import didInsert from "@ember/render-modifiers/modifiers/did-insert"; +import { cancel, throttle } from "@ember/runloop"; +import { htmlSafe } from "@ember/template"; +import { bind } from "discourse/lib/decorators"; + +export default class ExperimentalScreen extends Component { + @tracked left = 0; + @tracked right = 0; + + willDestroy() { + super.willDestroy(...arguments); + cancel(this._throttledCalculateDistanceHandler); + } + + getDistance(element) { + const rect = element.getBoundingClientRect(); + return rect; + } + + @bind + calculateDistance() { + this._throttledCalculateDistanceHandler = throttle( + this, + this._throttledCalculateDistance, + 50 + ); + } + + _throttledCalculateDistance() { + const element = document.getElementById("main-outlet"); + + if (element) { + const distance = this.getDistance(element); + this.left = distance.left; + this.right = distance.right; + } + } + + get distanceStyles() { + return htmlSafe( + `--left-distance: ${this.left}px; --right-distance: ${this.right}px;` + ); + } + + @action + onInsert() { + this.calculateDistance(); + window.addEventListener("resize", this.calculateDistance); + } + + +} diff --git a/scss/box-view.scss b/scss/box-view.scss index 30c94ad..4dffa9b 100644 --- a/scss/box-view.scss +++ b/scss/box-view.scss @@ -4,6 +4,11 @@ border-top-left-radius: var(--d-border-radius-large); } } + +.has-full-page-chat .experimental-screen { + display: none; +} + .experimental-screen { max-width: unset !important; .has-full-page-chat & { @@ -31,7 +36,7 @@ width: var(--d-border-radius-large); height: var(--d-border-radius-large); background-color: var(--tertiary-50); - z-index: 999; + z-index: 399; -webkit-mask: radial-gradient( circle at var(--d-border-radius-large) var(--d-border-radius-large), transparent var(--d-border-radius-large), @@ -41,32 +46,18 @@ } &__top-left { top: var(--header-offset); - left: calc(var(--main-grid-gap) + var(--d-sidebar-width)); - @media screen and (max-width: 768px) { - left: var(--main-grid-gap); - } + left: var(--left-distance); } &__top-right { top: var(--header-offset); transform: rotate(90deg); - @container content-width (width > 1px) { - left: calc( - var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw - - var(--d-border-radius-large) - ); - @media screen and (max-width: 768px) { - left: calc( - var(--main-grid-gap) + 100cqw - var(--d-border-radius-large) - ); - } - } + left: calc(var(--right-distance) - var(--d-border-radius-large)); } &__bottom-left { transform: rotate(-90deg); bottom: var(--d-border-radius-large); - left: calc(var(--main-grid-gap) + var(--d-sidebar-width)); + left: var(--left-distance); @media screen and (max-width: 768px) { - left: var(--main-grid-gap); bottom: calc(var(--d-border-radius-large) * 2); } } @@ -74,14 +65,8 @@ transform: rotate(180deg); bottom: var(--d-border-radius-large); @container content-width (width > 1px) { - left: calc( - var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw - - var(--d-border-radius-large) - ); + left: calc(var(--right-distance) - var(--d-border-radius-large)); @media screen and (max-width: 768px) { - left: calc( - var(--main-grid-gap) + 100cqw - var(--d-border-radius-large) - ); bottom: calc(var(--d-border-radius-large) * 2); } } @@ -89,15 +74,14 @@ &__bottom-bar { position: fixed; width: 100%; - z-index: 999; + z-index: 399; background-color: var(--tertiary-50); bottom: 0; - left: calc(var(--main-grid-gap) + var(--d-sidebar-width)); + left: var(--left-distance); + height: var(--d-border-radius-large); @media screen and (max-width: 768px) { - left: var(--main-grid-gap); height: calc(var(--d-border-radius-large) * 2); } - height: var(--d-border-radius-large); @container content-width (width > 1px) { width: 100cqw; } diff --git a/scss/chat.scss b/scss/chat.scss index 5c3015c..964a7c4 100644 --- a/scss/chat.scss +++ b/scss/chat.scss @@ -1,16 +1,16 @@ .full-page-chat.full-page-chat-sidebar-enabled { border-top-left-radius: var(--d-border-radius-large); - box-shadow: 0px 0px 1px 2px var(--tertiary-50), - 0px 0px 24px 4px var(--tertiary-50); + box-shadow: 0px 0px 1px 2px var(--tertiary-100), + 0px 0px 24px 4px var(--tertiary-100); border: none; } -.has-full-page-chat .d-header { - background-color: transparent; -} - .c-navbar-container { border-top-left-radius: var(--d-border-radius-large); padding: 0 1.5rem; background-color: var(--d-content-background); } + +body.has-full-page-chat { + background-color: var(--background-color); +} diff --git a/scss/header.scss b/scss/header.scss index 3e1bf97..b2aec8d 100644 --- a/scss/header.scss +++ b/scss/header.scss @@ -4,6 +4,10 @@ padding-bottom: 1.5em; } +.has-full-page-chat .d-header { + background-color: transparent; +} + .user-menu .quick-access-panel, .user-notifications-list { li { diff --git a/scss/main.scss b/scss/main.scss index de45718..af78304 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -37,7 +37,15 @@ body:not(.has-full-page-chat) { #topic-title, .container.posts, #topic-footer-buttons, - .more-topics__container { + .more-topics__container, + .search-banner, + .container.viewing-self, + .reviewable, + .admin-content, + .discourse-post-event-upcoming-events, + .container.groups-index, + .body-page, + .container.badges { max-width: 1000px; margin-inline: auto; padding-inline: 1.5em; @@ -61,9 +69,6 @@ body:not(.has-full-page-chat) { .topic-list-body { padding-top: var(--spacing-block-m); } - .topic-list-item { - box-shadow: 0px 0px 26px 1px hsl(224 61% 96% / 1); - } } aside.onebox { diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 9543d01..39f4ba3 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -1,5 +1,6 @@ .sidebar-wrapper { - .has-full-page-chat & { + .has-full-page-chat &, + .has-full-page-chat & .sidebar-footer-wrapper { background: transparent; } .sidebar-container { @@ -10,12 +11,11 @@ padding: 0; } .sidebar-section-link { - font-size: var( - --font-up-1 - ); // dont want to change fonts here just yet as font-size can be changed as a user pref. – charlie: sure but I want it to be bigger by default - // font-family: "inter"; - letter-spacing: 0.5px; - border-radius: 10px; //visually somewhat consistent with border on main outlet (?) + font-size: var(--font-up-1); + // dont want to change fonts here just yet as font-size can be changed as a user pref. + // – charlie: sure but I want it to be bigger by default + // letter-spacing: 0.5px; + border-radius: 10px; // visually somewhat consistent with border on main outlet (?) transition: none; } } diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 0804dff..0940c62 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -1,6 +1,9 @@ .topic-list-item { background: var(--d-content-background); + box-shadow: 0px 0px 26px 1px + light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1)); &:hover { border: 1px solid var(--accent-color); + background: var(--d-content-background); } } diff --git a/scss/topic.scss b/scss/topic.scss index db849c5..ee2b288 100644 --- a/scss/topic.scss +++ b/scss/topic.scss @@ -1,19 +1,19 @@ .post-stream { - .contents p { + .contents { font-size: var(--font-up-1); line-height: 1.25; } } .container.posts .topic-navigation { - //super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…) + // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…) top: calc( var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2) ); } .timeline-container .topic-timeline { - min-width: unset; //why we have this? + min-width: unset; // why we have this? .timeline-scrollarea { border-left: 1px solid var(--accent-color); } @@ -24,7 +24,7 @@ padding-left: 0.5em; margin-left: calc(-0.5em - 2.5px); background: var(--secondary); - height: 40px !important; //height is coming from element style have no other choice + height: 40px !important; // height is coming from element style have no other choice } .timelime-scroller-content { display: flex; @@ -47,12 +47,13 @@ } #topic-title { - z-index: 999; + z-index: z("composer", "content") - 1; padding: var(--spacing-block-l) var(--spacing-inline-xl); position: sticky; margin-bottom: 0; top: var(--header-offset); background: var(--d-content-background); + border-radius: var(--d-border-radius-large); } .container.posts, diff --git a/scss/variables.scss b/scss/variables.scss index 2d5d230..2fad870 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -1,4 +1,5 @@ :root { + color-scheme: light dark; --d-border-radius-large: 20px; --d-border-radius: 8px; --d-input-border-radius: 6px;