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

Misc mobile fixes (#83)

Browse Source
This commit is contained in:
chapoi
2025-03-28 05:35:08 +08:00
committed by GitHub
parent e7de006a23
commit e20b83b79d
3 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/main.scss
+7
View File
@@ -4,10 +4,17 @@
html:not(:has(.has-full-page-chat)) { html:not(:has(.has-full-page-chat)) {
background-color: var(--background-color); background-color: var(--background-color);
@include breakpoint("mobile-extra-large") {
background-color: var(--d-content-background);
}
} }
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@include breakpoint("mobile-extra-large") {
background-color: var(--d-content-background);
}
} }
#main-outlet-wrapper { #main-outlet-wrapper {
gap: var(--main-grid-gap); gap: var(--main-grid-gap);
scss/mobile-stuff.scss
+8 -2
View File
@@ -2,7 +2,7 @@
@include breakpoint(medium) { @include breakpoint(medium) {
html, html,
.d-header { .d-header {
background-color: var(--secondary); background-color: var(--d-content-background);
} }
} }
#main-outlet-wrapper { #main-outlet-wrapper {
@@ -89,7 +89,7 @@
#topic-title { #topic-title {
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-m) !important; padding-inline: var(--spacing-inline-s) !important;
.title-wrapper { .title-wrapper {
gap: var(--spacing-block-s); gap: var(--spacing-block-s);
@@ -119,6 +119,12 @@
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h) oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
); );
} }
.discourse-tags {
gap: var(--spacing-inline-xs);
&__tag-separator {
display: none;
}
}
.discourse-tag { .discourse-tag {
font-size: var(--font-down-2-rem); font-size: var(--font-down-2-rem);
padding: var(--spacing-inline-xs) var(--spacing-inline-s); padding: var(--spacing-inline-xs) var(--spacing-inline-s);
scss/topic.scss
+43 -27
View File
@@ -18,36 +18,52 @@
min-width: unset; // why we have this? min-width: unset; // why we have this?
.timeline-scrollarea { .timeline-scrollarea {
border-left: 1px solid var(--accent-color); border-left: 1px solid var(--accent-color);
}
.timeline-scroller { .timeline-scroller {
padding: 0.25em; @include breakpoint("medium", $rule: min-width) {
border: 1px solid var(--accent-color); padding: 0.25em;
border-radius: 0.75em; border: 1px solid var(--accent-color);
padding-left: 0.5em; border-radius: 0.75em;
margin-left: calc(-0.5em - 2.5px); padding-left: 0.5em;
background: var(--d-content-background); margin-left: calc(-0.5em - 2.5px);
height: 40px !important; // height is coming from element style have no other choice background: var(--d-content-background);
} height: 40px !important; // height is coming from element style have no other choice
.timelime-scroller-content { }
display: flex;
flex-direction: column; .timeline-scroller-content {
gap: 0.25em; // display: flex;
} // flex-direction: column;
.timeline-replies, // gap: 0.25em;
.timeline-ago { }
line-height: 1; .timeline-replies,
} .timeline-ago {
.timeline-ago { line-height: 1;
// font-size: var(--font-down-1); }
} }
.timeline-handle { .timeline-handle {
background-color: var(--accent-color); background-color: var(--accent-color);
width: 3px; @include breakpoint("medium", $rule: min-width) {
border-radius: 2px; width: 3px;
height: calc(100% - 6px); border-radius: 2px;
height: calc(100% - 6px);
}
}
} }
} }
//should probably get rid of this extra specificity class in core?
.timeline-container.timeline-fullscreen {
@include breakpoint("medium", $rule: max-width) {
.topic-timeline .timeline-scrollarea-wrapper {
}
.topic-timeline
.timeline-scrollarea
.timeline-scroller
.timeline-scroller-content {
padding-right: 0.5em;
}
}
}
.container.posts, .container.posts,
#topic-footer-buttons { #topic-footer-buttons {
padding: 0 24px; padding: 0 24px;