Add css and different colors for dates in the future

This commit is contained in:
finga 2024-05-02 23:24:07 +02:00
parent edfc102710
commit 268ac8eed3
9 changed files with 84 additions and 36 deletions

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "vendor/bulma"]
path = vendor/bulma
url = https://github.com/jgthms/bulma.git

13
Cargo.lock generated
View file

@ -677,6 +677,15 @@ dependencies = [
"libc", "libc",
] ]
[[package]]
name = "num_threads"
version = "0.1.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5c7398b9c8b70908f6371f47ed36737907c87c52af34c268fed0bf0ceb92ead9"
dependencies = [
"libc",
]
[[package]] [[package]]
name = "object" name = "object"
version = "0.32.2" version = "0.32.2"
@ -974,7 +983,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5dfd88e563464686c916c7e46e623e520ddc6d79fa6641390f2e3fa86e83e885" checksum = "5dfd88e563464686c916c7e46e623e520ddc6d79fa6641390f2e3fa86e83e885"
dependencies = [ dependencies = [
"deranged", "deranged",
"itoa",
"js-sys",
"libc",
"num-conv", "num-conv",
"num_threads",
"powerfmt", "powerfmt",
"serde", "serde",
"time-core", "time-core",

View file

@ -3,8 +3,6 @@ name = "srug_website"
version = "0.1.0" version = "0.1.0"
edition = "2021" edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
time = { version = "0.3.36", features = ["macros"] } time = { version = "0.3.36", features = ["macros", "formatting", "local-offset", "wasm-bindgen"] }
yew = { version = "0.21.0", features = ["csr"] } yew = { version = "0.21.0", features = ["csr"] }

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# SRUG Website
This is the source repository of the SRUG Website.

2
Trunk.toml Normal file
View file

@ -0,0 +1,2 @@
[tools]
sass = "1.43.5"

View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>¯\_(ツ)_/¯ SRUG: Salzburg Rust User Group</title> <title>¯\_(ツ)_/¯ SRUG: Salzburg Rust User Group</title>
<link data-trunk rel="sass" href="srug.scss"/>
</head> </head>
<body></body> <body></body>
</html> </html>

View file

@ -1,5 +1,8 @@
use time::{macros::datetime, OffsetDateTime}; use time::{
use yew::{function_component, html, Html, Properties}; macros::{datetime, format_description},
OffsetDateTime,
};
use yew::{classes, function_component, html, Html, Properties};
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
struct Meeting { struct Meeting {
@ -9,13 +12,22 @@ struct Meeting {
} }
#[function_component] #[function_component]
fn MeetingRow(props: &Meeting) -> Html { fn MeetingBox(props: &Meeting) -> Html {
let format = format_description!("[year]-[month]-[day] [hour]:[minute]");
let upcoming = props.date > OffsetDateTime::now_local().unwrap();
html! { html! {
<tr> <div class={classes!("card", if upcoming { vec!["has-background-info", "has-text-info-invert"] } else { vec!["has-background-dark", "has-text-dark-invert"] })}>
<td>{ format!("{}", props.date) }</td> <div class={classes!("card-header", if upcoming { "has-background-info-30" } else { "has-background-info-10" })}>
<td>{ &props.location }</td> <p class={classes!("card-header-title", if upcoming { "has-text-grey-lighter" } else { "has-text-grey-dark" })}>{ props.date.format(&format).unwrap_or("something went utterly wrong".into()) }</p>
<td>{ &props.description }</td> </div>
</tr> <div class="card-content">
<p>{ &props.description }</p>
</div>
<div class="card-footer">
<p class="ml-5 my-1">{ &props.location }</p>
</div>
</div>
} }
} }
@ -27,33 +39,28 @@ struct Meetings {
#[function_component] #[function_component]
fn MeetingsTable(props: &Meetings) -> Html { fn MeetingsTable(props: &Meetings) -> Html {
html! { html! {
<table> <div class="grid">
<tr>
<th>{ "Date" }</th>
<th>{ "Location" }</th>
<th>{ "Description" }</th>
</tr>
{ {
props.meetings.iter().map(|row| { props.meetings.iter().map(|row| {
html!{<MeetingRow date={row.date.clone()} location={row.location.clone()} description={row.description.clone()} />} html!{<MeetingBox date={row.date.clone()} location={row.location.clone()} description={row.description.clone()} />}
}).collect::<Html>() }).collect::<Html>()
} }
</table> </div>
} }
} }
// Date::from_calendar_date(2019, Month::January, 1)
// PrimitiveDateTime::new(date!(2019-01-01), time!(0:00)),
// datetime!(2000-01-01 0:00 UTC)
// .to_offset(offset!(-1))
#[function_component] #[function_component]
fn App() -> Html { fn App() -> Html {
let meetings = vec![ let meetings = vec![
Meeting { Meeting {
date: datetime!(2023-11-28 18:30 +1:00), date: datetime!(2024-05-23 18:00 +2:00),
location: "CCCSBG Space".into(), location: "CCCSBG Space".into(),
description: "Hello World!".into(), description: "Something.await?".into(),
},
Meeting {
date: datetime!(2024-04-30 18:00 +2:00),
location: "CCCSBG Space".into(),
description: "All your web are belong to us!".into(),
}, },
Meeting { Meeting {
date: datetime!(2024-01-23 18:00 +1:00), date: datetime!(2024-01-23 18:00 +1:00),
@ -61,18 +68,26 @@ fn App() -> Html {
description: "Hello World, again!".into(), description: "Hello World, again!".into(),
}, },
Meeting { Meeting {
date: datetime!(2024-04-30 18:00 +2:00), date: datetime!(2023-11-28 18:30 +1:00),
location: "CCCSBG Space".into(), location: "CCCSBG Space".into(),
description: "All your web are belong to us!".into(), description: "Hello World!".into(),
}, },
]; ];
html! { html! {
<> <>
<h1>{ "¯\\_(ツ)_/¯ SRUG: Salzburg Rust User Group" }</h1> <div id="wrapper">
<p>{ "Eine Anhäufung von planlosen Wesen die was gerne etwas mit Rust machen würden." }</p> <div class="hero">
<div class="hero-body">
<h1 class="title">{ "¯\\_(ツ)_/¯ SRUG: Salzburg Rust User Group" }</h1>
</div>
</div>
<div class="section">
<p class="mb-6 is-family-monospace">{ "lazy_static!(std::collection::VecDeque<Wesen>), die gerne |etwas| unsafe { mit Rust machen } würde.await?;" }</p>
<MeetingsTable meetings={meetings} /> <MeetingsTable meetings={meetings} />
<footer> </div>
</div>
<footer class="footer has-text-centered">
<p>{ "CCCSBG Space in der Arge Kultur, Ulrike-Gschwandtner-Straße 5, 5020 Salzburg" }</p> <p>{ "CCCSBG Space in der Arge Kultur, Ulrike-Gschwandtner-Straße 5, 5020 Salzburg" }</p>
<a href="https://cccsbg.at">{ "CCCSBG" }</a> <a href="https://cccsbg.at">{ "CCCSBG" }</a>
</footer> </footer>

12
srug.scss Normal file
View file

@ -0,0 +1,12 @@
@charset "utf-8";
@import "vendor/bulma/bulma.scss";
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#wrapper {
flex: 1;
}

1
vendor/bulma vendored Submodule

@ -0,0 +1 @@
Subproject commit 53f62f465b01c7196085a29cd56cf0c9093579e0