shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: Misc desktop edits (#15)

Browse Source
This commit is contained in:
Jordan Vidrine
2025-03-05 20:29:58 -06:00
committed by GitHub
parent af4c0c540f
commit f406bfbedf
10 changed files with 118 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascripts/discourse/api-initializers/next-gen.gjs
+2 -15
View File
@@ -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 {
<template>
<ul class="experimental-screen">
<li class="experimental-screen__top-left"></li>
<li class="experimental-screen__top-right"></li>
<li class="experimental-screen__bottom-left"></li>
<li class="experimental-screen__bottom-right"></li>
<li class="experimental-screen__bottom-bar"></li>
</ul>
</template>
}
);
api.renderInOutlet("above-main-container", ExperimentalScreen);
});
javascripts/discourse/components/experimental-screen.gjs
+67
View File
@@ -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);
}
<template>
<ul
class="experimental-screen"
{{didInsert this.onInsert}}
style={{this.distanceStyles}}
>
<li class="experimental-screen__top-left"></li>
<li class="experimental-screen__top-right"></li>
<li class="experimental-screen__bottom-left"></li>
<li class="experimental-screen__bottom-right"></li>
<li class="experimental-screen__bottom-bar"></li>
</ul>
</template>
}
scss/box-view.scss
+13 -29
View File
@@ -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;
}
scss/chat.scss
+6 -6
View File
@@ -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);
}
scss/header.scss
+4
View File
@@ -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 {
scss/main.scss
+9 -4
View File
@@ -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 {
scss/sidebar.scss
+7 -7
View File
@@ -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;
}
}
scss/topic-cards.scss
+3
View File
@@ -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);
}
}
scss/topic.scss
+6 -5
View File
@@ -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,
scss/variables.scss
+1
View File
@@ -1,4 +1,5 @@
:root {
color-scheme: light dark;
--d-border-radius-large: 20px;
--d-border-radius: 8px;
--d-input-border-radius: 6px;