raider/pupraider.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix event display on small screens

Browse source
This commit is contained in:
Kevin Kandlbinder 2024-01-31 23:00:46 +00:00
parent 0a5ebc1246
commit 42afaeee47
2 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/lib/components/EventCard/EventCard.svelte
View file

@ -54,6 +54,23 @@
gap: var(--gap); gap: var(--gap);
margin: var(--gap); margin: var(--gap);
@media (width < 700px) {
/*flex-direction: column;
gap: 0;*/
.calendar {
display: none !important;
/*align-self: flex-start;
margin-bottom: -5px;
margin-left: 25px;
.day-month {
border-radius: 0 !important;
height: 24px;
}*/
}
}
.details { .details {
background-color: var(--color-surface); background-color: var(--color-surface);
flex-grow: 1; flex-grow: 1;

21
src/lib/components/EventCard/EventCardDummy.svelte
View file

@ -45,6 +45,23 @@
gap: var(--gap); gap: var(--gap);
margin: var(--gap); margin: var(--gap);
@media (width < 700px) {
/*flex-direction: column;
gap: 0;*/
.calendar {
display: none !important;
/*align-self: flex-start;
margin-bottom: -5px;
margin-left: 25px;
.day-month {
border-radius: 0 !important;
height: 24px;
}*/
}
}
.details { .details {
background-color: var(--color-surface); background-color: var(--color-surface);
flex-grow: 1; flex-grow: 1;
@ -60,7 +77,7 @@
.date-location { .date-location {
opacity: 0.75; opacity: 0.75;
width: 400px; width: 100%;
height: calc(19px - 3px); height: calc(19px - 3px);
margin-bottom: 6px; margin-bottom: 6px;
animation-delay: -100ms; animation-delay: -100ms;
@ -69,7 +86,7 @@
.title { .title {
font-size: 1.7em; font-size: 1.7em;
font-weight: 700; font-weight: 700;
width: 400px; width: 100%;
height: calc(32px - 3px); height: calc(32px - 3px);
animation-delay: -250ms; animation-delay: -250ms;
} }