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

List Item: Mobile-like design on tablets

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-14 13:25:55 +02:00
parent d56b61c82d
commit 71e654181e
4 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/ChatOrUserPicker.scss
View File

@ -50,6 +50,15 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0 0.5rem; padding: 0 0.5rem;
body.is-ios &,
body.is-android & {
padding: 0;
}
@media (max-width: 600px) {
padding: 0;
}
} }
} }

7
src/components/left/main/Chat.scss
View File

@ -136,6 +136,13 @@
} }
} }
body.is-ios &,
body.is-android & {
.ListItem-button {
border-radius: 0 !important;
}
}
@media (max-width: 600px) { @media (max-width: 600px) {
.ListItem-button { .ListItem-button {
border-radius: 0 !important; border-radius: 0 !important;

27
src/components/ui/ListItem.scss
View File

@ -14,6 +14,23 @@
box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers); box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers);
} }
&.selected::after,
&:last-of-type::after {
display: none;
}
// Conceal above item divider
&.selected::before {
content: "";
position: absolute;
top: -0.0625rem;
left: 4.5rem;
right: 0;
height: 0.0625rem;
/* stylelint-disable-next-line plugin/whole-pixel */
box-shadow: inset 0 -0.03125rem 0 0 var(--color-background);
}
&:last-of-type::after { &:last-of-type::after {
display: none; display: none;
} }
@ -48,9 +65,17 @@
color: var(--color-text); color: var(--color-text);
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
--ripple-color: rgba(0, 0, 0, 0.08); --ripple-color: rgba(0, 0, 0, 0.08);
text-decoration: none; text-decoration: none;
body.is-ios &,
body.is-android & {
border-radius: 0 ;
}
@media (max-width: 600px) {
border-radius: 0 ;
}
> .icon { > .icon {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: 2rem; margin-right: 2rem;

13
src/styles/_common.scss
View File

@ -121,11 +121,6 @@
} }
} }
@media (max-width: 600px) {
padding-left: 0;
padding-right: 0;
}
.scroll-container { .scroll-container {
position: relative; position: relative;
} }
@ -150,8 +145,16 @@
} }
} }
@media (max-width: 600px) {
padding-left: 0;
padding-right: 0;
}
body.is-ios &, body.is-ios &,
body.is-android & { body.is-android & {
padding-left: 0;
padding-right: 0;
.ListItem::after { .ListItem::after {
opacity: 1; opacity: 1;
transition: opacity var(--layer-transition); transition: opacity var(--layer-transition);