andras/life-towers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

not bad

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-30 14:33:39 +01:00
parent e2a60e71a3
commit 003f38ea60
36 changed files with 1543 additions and 1287 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/components/page/page.component.scss
View file

@ -5,6 +5,7 @@
flex-direction: column;
height: 100%;
min-height: 0;
position: relative; // anchor for absolute-positioned .trash
@include inner-spacing(var(--large-padding));
@ -18,10 +19,12 @@
justify-content: center;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
flex: 1 0 auto;
flex: 1 1 auto;
min-height: 0;
transition: box-shadow $short-animation-time;
@ -55,6 +58,7 @@
max-width: 200px;
box-sizing: content-box;
flex: 0 0 auto;
min-height: 0;
&:not(:nth-last-child(1)) {
margin-right: var(--medium-padding);
@ -84,15 +88,22 @@
// without needing !important on every property — only the width triples need it
// to beat the per-child-count selectors generated above.
@media (max-width: $mobile-width) {
--mobile-tower-width: calc(66vw - var(--small-padding));
--mobile-tower-side-padding: max(
var(--medium-padding),
calc((100% - var(--mobile-tower-width)) / 2)
);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--mobile-tower-side-padding);
flex-wrap: nowrap;
justify-content: flex-start;
// Side padding lets the first and last tower scroll fully into view.
padding: 0 var(--medium-padding);
padding: 0 var(--mobile-tower-side-padding);
max-width: 100%;
gap: var(--medium-padding);
&::-webkit-scrollbar {
display: none;
@ -100,12 +111,16 @@
// Override the @for width-calc rules above.
& > * {
width: calc(66vw - var(--small-padding)) !important;
max-width: calc(66vw - var(--small-padding)) !important;
min-width: calc(66vw - var(--small-padding)) !important;
scroll-snap-align: start;
width: var(--mobile-tower-width) !important;
max-width: var(--mobile-tower-width) !important;
min-width: var(--mobile-tower-width) !important;
scroll-snap-align: center;
flex-shrink: 0;
}
& > *:not(:nth-last-child(1)) {
margin-right: 0;
}
}
}