Mr_Steppy/jana_sessions_webpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor layout

Browse Source
This commit is contained in:
Leonard Steppy 2025-02-15 01:57:22 +01:00
parent 98d1a125d7
commit 258dcd7298
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/webpage.rs
View File

@ -50,18 +50,18 @@ fn Sessions(config: SessionConfig) -> impl IntoView {
signal(session_iter.by_ref().take(2).collect::<Vec<_>>()); signal(session_iter.by_ref().take(2).collect::<Vec<_>>());
view! { view! {
<div class="wide box elem-background"> <div class="column">
<h1>"Anstehende Proben Termine"</h1> <div class="wide box elem-background">
<p>{config.motd}</p> <h1>"Anstehende Proben Termine"</h1>
<ul> <p>{config.motd}</p>
<For </div>
each=move || session_dates.get() <For
key=|day| day.date each=move || session_dates.get()
children=move |day| view! { <li>{localize_day(&day)}</li> } key=|day| day.date
/> children=move |day| view! { <div class="box elem-background">{localize_day(&day)}</div> }
</ul> />
<div <div
class="box button highlight-background" class="box button elem-background"
on:click=move |_| { on:click=move |_| {
set_session_dates.write().extend(session_iter.by_ref().take(3)); set_session_dates.write().extend(session_iter.by_ref().take(3));
} }

11
styles.css
View File

@ -14,6 +14,10 @@ ul {
body { body {
font-size: 2rem; font-size: 2rem;
} }
html, body {
margin: 0;
padding: 0;
}
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
body { body {
font-size: 3rem; font-size: 3rem;
@ -28,6 +32,12 @@ body {
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
overflow: scroll;
}
.column {
display: flex;
flex-direction: column;
gap: 10px;
} }
.box { .box {
padding: 20px; padding: 20px;
@ -39,6 +49,7 @@ body {
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
max-width: 800px; max-width: 800px;
box-sizing: border-box;
} }
.wide { .wide {
width: 100%; width: 100%;