Improve dynamic resizing of search and photo rail
This commit is contained in:
parent
9917a69dc5
commit
7d655c3dd5
4 changed files with 32 additions and 0 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue