ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forums: Various fixes for topic preview (#2523)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-08 00:48:02 +01:00
parent 18ce05d7fe
commit 4ca6bf0952
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/common/ChatForumLastMessage.module.scss
View File

@ -1,12 +1,15 @@
$radius: 0.5rem;
.root { .root {
--radius: 0.5rem;
--first-column-background-color: var(--color-item-active); --first-column-background-color: var(--color-item-active);
:global(.is-ios) & {
--radius: 0.75rem;
}
display: flex; display: flex;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
margin-inline-end: 0.25rem; margin-inline-end: 0.5rem;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -42,6 +45,10 @@ $radius: 0.5rem;
&.main-column, &.last-message { &.main-column, &.last-message {
padding: 0 0.25rem; padding: 0 0.25rem;
:global(.is-ios) & {
padding: 0 0.375rem;
}
} }
&.main-column, &.last-message, .after-wrapper { &.main-column, &.last-message, .after-wrapper {
@ -57,8 +64,9 @@ $radius: 0.5rem;
} }
.main-column { .main-column {
border-start-start-radius: $radius; border-start-start-radius: var(--radius);
border-start-end-radius: $radius; border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
max-width: 100%; max-width: 100%;
@ -66,18 +74,16 @@ $radius: 0.5rem;
pointer-events: initial; pointer-events: initial;
border-end-end-radius: $radius;
.after-wrapper { .after-wrapper {
width: $radius; width: var(--radius);
height: $radius; height: var(--radius);
bottom: 0; bottom: 0;
position: absolute; position: absolute;
inset-inline-end: -$radius; inset-inline-end: calc(var(--radius) * -1);
} }
.after { .after {
border-end-start-radius: $radius; border-end-start-radius: var(--radius);
background: var(--background-color); background: var(--background-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -107,8 +113,8 @@ $radius: 0.5rem;
} }
.last-message { .last-message {
border-end-start-radius: $radius; border-end-start-radius: var(--radius);
border-end-end-radius: $radius; border-end-end-radius: var(--radius);
max-width: 100%; max-width: 100%;
@ -117,15 +123,15 @@ $radius: 0.5rem;
position: relative; position: relative;
.after-wrapper { .after-wrapper {
width: $radius; width: var(--radius);
height: $radius; height: var(--radius);
top: 0; top: 0;
position: absolute; position: absolute;
inset-inline-end: -$radius; inset-inline-end: calc(var(--radius) * -1);
} }
.after { .after {
border-start-start-radius: $radius; border-start-start-radius: var(--radius);
background: var(--background-color); background: var(--background-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -138,7 +144,11 @@ $radius: 0.5rem;
} }
.last-message { .last-message {
border-start-end-radius: $radius; border-start-end-radius: var(--radius);
:global(.is-ios) & {
border-start-end-radius: var(--radius);
}
} }
} }