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

View file

@ -3,8 +3,6 @@ name = "srug_website"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[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"] }

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

View file

@ -1,5 +1,8 @@
use time::{macros::datetime, OffsetDateTime};
use yew::{function_component, html, Html, Properties};
use time::{
macros::{datetime, format_description},
OffsetDateTime,
};
use yew::{classes, function_component, html, Html, Properties};
#[derive(Properties, PartialEq)]
struct Meeting {
@ -9,13 +12,22 @@ struct Meeting {
}
#[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! {
<tr>
<td>{ format!("{}", props.date) }</td>
<td>{ &props.location }</td>
<td>{ &props.description }</td>
</tr>
<div class={classes!("card", if upcoming { vec!["has-background-info", "has-text-info-invert"] } else { vec!["has-background-dark", "has-text-dark-invert"] })}>
<div class={classes!("card-header", if upcoming { "has-background-info-30" } else { "has-background-info-10" })}>
<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>
</div>
<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]
fn MeetingsTable(props: &Meetings) -> Html {
html! {
<table>
<tr>
<th>{ "Date" }</th>
<th>{ "Location" }</th>
<th>{ "Description" }</th>
</tr>
<div class="grid">
{
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>()
}
</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]
fn App() -> Html {
let meetings = vec![
Meeting {
date: datetime!(2023-11-28 18:30 +1:00),
date: datetime!(2024-05-23 18:00 +2:00),
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 {
date: datetime!(2024-01-23 18:00 +1:00),
@ -61,18 +68,26 @@ fn App() -> Html {
description: "Hello World, again!".into(),
},
Meeting {
date: datetime!(2024-04-30 18:00 +2:00),
date: datetime!(2023-11-28 18:30 +1:00),
location: "CCCSBG Space".into(),
description: "All your web are belong to us!".into(),
description: "Hello World!".into(),
},
];
html! {
<>
<h1>{ "¯\\_(ツ)_/¯ SRUG: Salzburg Rust User Group" }</h1>
<p>{ "Eine Anhäufung von planlosen Wesen die was gerne etwas mit Rust machen würden." }</p>
<div id="wrapper">
<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} />
<footer>
</div>
</div>
<footer class="footer has-text-centered">
<p>{ "CCCSBG Space in der Arge Kultur, Ulrike-Gschwandtner-Straße 5, 5020 Salzburg" }</p>
<a href="https://cccsbg.at">{ "CCCSBG" }</a>
</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