n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: add variables for configuring timeline padding

Browse source
This commit is contained in:
Tulir Asokan 2024-12-05 22:28:04 +02:00
parent ca2ad94c5a
commit 1cc39d40c9
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/index.css
View file

@ -71,6 +71,15 @@
--room-list-padding: .125rem; --room-list-padding: .125rem;
--timeline-avatar-size: 2.5rem;
--timeline-avatar-gap: .5rem;
--timeline-avatar-total-size: calc(var(--timeline-avatar-size) + var(--timeline-avatar-gap));
--timeline-message-gap: .5rem;
--timeline-message-gap-same-sender: calc(var(--timeline-message-gap) / 2);
--timeline-message-gap-small-event: 0;
--timeline-sender-name-timestamp-gap: .25rem;
--timeline-sender-name-content-gap: 0;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color-scheme: dark; color-scheme: dark;
--background-color: #000; --background-color: #000;

40
web/src/ui/timeline/TimelineEvent.css
View file

@ -2,12 +2,12 @@ div.timeline-event {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
display: grid; display: grid;
margin-top: .5rem; margin-top: var(--timeline-message-gap);
grid-template: grid-template:
"cmc cmc cmc cmc" 0 "cmc cmc cmc cmc" 0
"avatar gap sender sender" auto "avatar gap sender sender" auto
"avatar gap content status" auto "avatar gap content status" auto
/ 2.5rem .5rem 1fr 2rem; / var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr 2rem;
contain: layout; contain: layout;
&.highlight { &.highlight {
@ -37,17 +37,23 @@ div.timeline-event {
> div.sender-avatar { > div.sender-avatar {
grid-area: avatar; grid-area: avatar;
width: 40px; width: var(--timeline-avatar-size);
height: 40px; height: var(--timeline-avatar-size);
margin-top: 2px; margin-top: 2px;
> img.avatar:not(.small) {
width: 100%;
height: 100%;
}
} }
> div.event-sender-and-time { > div.event-sender-and-time {
grid-area: sender; grid-area: sender;
margin-bottom: var(--timeline-sender-name-content-gap);
display: flex; display: flex;
align-items: center; align-items: center;
gap: .25rem; gap: var(--timeline-sender-name-timestamp-gap);
text-wrap: nowrap; text-wrap: nowrap;
> span.event-sender { > span.event-sender {
@ -87,7 +93,7 @@ div.timeline-event {
max-height: 1.25rem; max-height: 1.25rem;
> svg { > svg {
height: 16px; height: 1rem;
} }
&.error { &.error {
@ -111,10 +117,10 @@ div.timeline-event {
&.same-sender { &.same-sender {
grid-template: grid-template:
"cmc cmc cmc" 0 "cmc cmc cmc" 0
"timestamp content status" auto "timestamp content status" auto
/ 3rem 1fr 2rem; / var(--timeline-avatar-total-size) 1fr 2rem;
margin-top: .25rem; margin-top: var(--timeline-message-gap-same-sender);
> div.sender-avatar, > div.event-sender-and-time { > div.sender-avatar, > div.event-sender-and-time {
display: none; display: none;
@ -127,9 +133,9 @@ div.timeline-event {
&.small-event { &.small-event {
grid-template: grid-template:
"cmc cmc cmc cmc" 0 "cmc cmc cmc cmc" 0
"timestamp avatar content status" auto "timestamp avatar content status" auto
/ 3rem 1.5rem 1fr 2rem; / var(--timeline-avatar-total-size) 1.5rem 1fr 2rem;
> div.sender-avatar { > div.sender-avatar {
width: 1.5rem; width: 1.5rem;
@ -145,7 +151,7 @@ div.timeline-event {
} }
+ div.timeline-event.small-event { + div.timeline-event.small-event {
margin-top: 0; margin-top: var(--timeline-message-gap-small-event);
} }
} }
} }