mirrors/nitter
1
0
Fork 0
mirror of https://github.com/zedeus/nitter.git synced 2024-12-13 19:46:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve dynamic resizing of search and photo rail

Browse source
This commit is contained in:
Zed 2019-09-19 05:54:19 +02:00
parent 9917a69dc5
commit 7d655c3dd5
4 changed files with 32 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/sass/inputs.scss
View file

@ -25,6 +25,7 @@ input[type="text"] {
.icon-button button { .icon-button button {
color: $accent; color: $accent;
text-decoration: none; text-decoration: none;
background: none;
border: none; border: none;
float: none; float: none;
padding: unset; padding: unset;

20
src/sass/profile/photo-rail.scss
View file

@ -74,3 +74,23 @@
transition: max-height 0.4s; transition: max-height 0.4s;
} }
} }
@media(max-width: 600px) {
.photo-rail-grid {
grid-template-columns: repeat(6, 1fr);
}
#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
max-height: 300px;
}
}
@media(max-width: 450px) {
.photo-rail-grid {
grid-template-columns: repeat(4, 1fr);
}
#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
max-height: 450px;
}
}

10
src/sass/search.scss
View file

@ -42,6 +42,7 @@
} }
.search-panel { .search-panel {
width: 100%;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.4s; transition: max-height 0.4s;
@ -78,6 +79,15 @@
grid-column-gap: 10px; grid-column-gap: 10px;
} }
.profile-tabs {
@include search-resize(785px, 5, 185px);
@include search-resize(725px, 4, 185px);
@include search-resize(600px, 6, 140px);
@include search-resize(530px, 5, 185px);
@include search-resize(475px, 4, 185px);
@include search-resize(406px, 3, 250px);
}
@include search-resize(530px, 5, 185px); @include search-resize(530px, 5, 185px);
@include search-resize(475px, 4, 185px); @include search-resize(475px, 4, 185px);
@include search-resize(406px, 3, 250px); @include search-resize(406px, 3, 250px);

1
src/sass/tweet/card.scss
View file

@ -32,6 +32,7 @@
.card-title { .card-title {
@include ellipsis; @include ellipsis;
white-space: unset;
font-weight: bold; font-weight: bold;
font-size: 1.15em; font-size: 1.15em;
} }