github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-20 17:43:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: increase button sizes and timeline size (#30240)

Browse Source 
* UX: increase button sizes and timeline size

* UX: bring back tracking btn on topic timeline desktop

* Scope flexing topic-navigation area to mobile + make all buttons same font-size
This commit is contained in:
chapoi 2024-12-12 23:09:44 +08:00 committed by GitHub
parent a589b48f9a
commit ee567165f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/topic-timeline/container.gjs
View File

@ -21,6 +21,7 @@ import icon from "discourse-common/helpers/d-icon";
import { bind, debounce } from "discourse-common/utils/decorators"; import { bind, debounce } from "discourse-common/utils/decorators";
import domUtils from "discourse-common/utils/dom-utils"; import domUtils from "discourse-common/utils/dom-utils";
import { i18n } from "discourse-i18n"; import { i18n } from "discourse-i18n";
import TopicNotificationsButton from "select-kit/components/topic-notifications-button";
import BackButton from "./back-button"; import BackButton from "./back-button";
import Scroller from "./scroller"; import Scroller from "./scroller";
@ -659,6 +660,10 @@ export default class TopicTimelineScrollArea extends Component {
/> />
{{/if}} {{/if}}
{{#if (and this.currentUser this.site.desktopView)}}
<TopicNotificationsButton @topic={{@model}} @expanded={{false}} />
{{/if}}
<PluginOutlet <PluginOutlet
@name="timeline-footer-controls-after" @name="timeline-footer-controls-after"
@outletArgs={{hash model=@model fullscreen=@fullscreen}} @outletArgs={{hash model=@model fullscreen=@fullscreen}}

10
app/assets/stylesheets/common/base/topic-footer.scss
View File

@ -18,7 +18,6 @@
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
.bookmark.bookmarked { .bookmark.bookmarked {
@ -41,12 +40,6 @@
} }
} }
.topic-navigation {
display: flex;
justify-content: flex-end;
align-items: center;
}
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
&.docked { &.docked {
@ -94,7 +87,7 @@
background-color: var(--secondary); background-color: var(--secondary);
color: var(--tertiary); color: var(--tertiary);
padding: 0.35em 1em; padding: 0.5rem 1em;
border: 1px solid var(--tertiary-low); border: 1px solid var(--tertiary-low);
/* as a big ol' click target, don't let text inside be selected */ /* as a big ol' click target, don't let text inside be selected */
@ -107,6 +100,7 @@
height: 100%; height: 100%;
position: relative; position: relative;
z-index: z("base"); z-index: z("base");
font-size: var(--font-up-1);
font-weight: bold; font-weight: bold;
} }
.d-icon { .d-icon {

19
app/assets/stylesheets/mobile/topic-footer.scss
View File

@ -1,5 +1,24 @@
.container.posts .topic-navigation {
display: flex;
justify-content: flex-end;
align-items: center;
}
html:not(.anon) #topic-footer-buttons { html:not(.anon) #topic-footer-buttons {
.topic-footer-main-buttons { .topic-footer-main-buttons {
width: 100%;
justify-content: space-between;
gap: 0.75rem;
button,
.topic-notifications-button,
.pinned-button {
font-size: var(--font-up-1);
}
&__actions {
gap: 0.75rem;
}
.d-button-label { .d-button-label {
display: none; display: none;
} }