tanmay/glance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor, again

Browse Source 
Make collapsible components reusable
Add ability to collapse video rows in videos-grid style
Lose sanity while dealing with all the intricacies
This commit is contained in:
Svilen Markov
2024-05-17 12:15:44 +01:00
parent 8977114806
commit b0018c3f06
9 changed files with 190 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
internal/assets/static/main.css
View File

@@ -125,22 +125,22 @@
padding-top: var(--list-half-gap);
}
.list-collapsible:not(.list-collapsible-expanded) > .list-collapsible-item {
.collapsible-container:not(.container-expanded) > .collapsible-item {
display: none;
}
.list-collapsible-item {
animation: listItemReveal 0.3s backwards;
.collapsible-item {
animation: collapsibleItemReveal .25s backwards;
}
@keyframes listItemReveal {
@keyframes collapsibleItemReveal {
from {
opacity: 0;
transform: translateY(10px);
}
}
.list-collapsible-label {
.expand-toggle-button {
font: inherit;
border: 0;
cursor: pointer;
@@ -154,19 +154,20 @@
background: var(--color-widget-background);
}
.list-collapsible-label-expanded {
.expand-toggle-button.container-expanded {
position: sticky;
bottom: 0;
/* -1px to hide 1px gap on chrome */
bottom: -1px;
}
.list-collapsible-label-icon {
.expand-toggle-button-icon {
display: inline-block;
margin-left: 1rem;
position: relative;
top: -.2rem;
}
.list-collapsible-label-icon::before {
.expand-toggle-button-icon::before {
content: '';
font-size: 0.8rem;
transform: rotate(90deg);
@@ -175,14 +176,25 @@
transition: transform 0.3s;
}
.list-collapsible-label-expanded .list-collapsible-label-icon::before {
.expand-toggle-button.container-expanded .expand-toggle-button-icon::before {
transform: rotate(-90deg);
}
.widget-content:has(.list-collapsible-label:last-child) {
.widget-content:has(.expand-toggle-button:last-child) {
padding-bottom: 0;
}
.cards-grid.collapsible-container + .expand-toggle-button {
text-align: center;
margin-top: 0.5rem;
background-color: var(--color-background);
}
/* required to prevent collapsed lazy images from being loaded while the container is being setup */
.collapsible-container:not(.ready) img[loading=lazy] {
display: none;
}
::selection {
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
color: var(--color-text-highlight);
@@ -270,6 +282,7 @@ body {
gap: var(--widget-gap);
margin: var(--widget-gap) 0;
animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
animation-delay: 3ms;
}
@keyframes pageColumnsEntrance {
@@ -1109,8 +1122,10 @@ body {
box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor;
}
.list-collapsible-label-expanded {
.expand-toggle-button.container-expanded {
bottom: var(--mobile-navigation-height);
/* hides content that peeks through the rounded borders of the mobile navigation */
box-shadow: 0 var(--border-radius) 0 0 var(--color-background);
}
}