srug/srug-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages 1 Wiki Activity Actions

Add css and different colors for dates in the future

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

71
src/main.rs
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>