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

UX: iteration for the timeline scroll design (#116)

Browse Source 
Attempt to make the timeline less eye-drawing, while still enhancing the
feel of "this is a draggable area" by emphasising the handle. Also added
a slight decrease of width.

| Before | After |
|--------|--------|
| ![CleanShot 2025-04-07 at 20 17
29@2x](https://github.com/user-attachments/assets/7997a797-1ffa-43b7-94fa-010974aeae51)
| ![CleanShot 2025-04-07 at 20 17
02@2x](https://github.com/user-attachments/assets/7372e1e2-8530-4045-bcdf-0ef73aa6698e)
|
This commit is contained in:
chapoi
2025-04-09 00:31:10 +08:00
committed by GitHub
parent 34b26abb6e
commit 5299986ed1
1 changed files with 4 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic.scss
+4 -13
View File
@@ -21,20 +21,11 @@
.timeline-scroller { .timeline-scroller {
@include breakpoint("medium", $rule: min-width) { @include breakpoint("medium", $rule: min-width) {
padding: 0.25em; margin-left: -4.5px;
border: 1px solid var(--accent-color);
border-radius: 0.75em;
padding-left: 0.5em;
margin-left: calc(-0.5em - 2.5px);
background: var(--d-content-background); background: var(--d-content-background);
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
} }
.timeline-scroller-content {
// display: flex;
// flex-direction: column;
// gap: 0.25em;
}
.timeline-replies, .timeline-replies,
.timeline-ago { .timeline-ago {
line-height: 1; line-height: 1;
@@ -43,8 +34,8 @@
.timeline-handle { .timeline-handle {
background-color: var(--accent-color); background-color: var(--accent-color);
@include breakpoint("medium", $rule: min-width) { @include breakpoint("medium", $rule: min-width) {
width: 3px; width: 8px;
border-radius: 2px; border-radius: 10px;
height: calc(100% - 6px); height: calc(100% - 6px);
} }
} }
@@ -70,7 +61,7 @@
} }
.container.posts { .container.posts {
grid-template-columns: auto 150px; grid-template-columns: auto 8em;
@media screen and (max-width: 924px) { @media screen and (max-width: 924px) {
grid-template-columns: auto auto; grid-template-columns: auto auto;
} }