Add css and different colors for dates in the future
This commit is contained in:
parent
edfc102710
commit
268ac8eed3
9 changed files with 84 additions and 36 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
[submodule "vendor/bulma"]
|
||||
path = vendor/bulma
|
||||
url = https://github.com/jgthms/bulma.git
|
13
Cargo.lock
generated
13
Cargo.lock
generated
|
@ -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",
|
||||
|
|
|
@ -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
3
README.md
Normal file
|
@ -0,0 +1,3 @@
|
|||
# SRUG Website
|
||||
|
||||
This is the source repository of the SRUG Website.
|
2
Trunk.toml
Normal file
2
Trunk.toml
Normal file
|
@ -0,0 +1,2 @@
|
|||
[tools]
|
||||
sass = "1.43.5"
|
11
index.html
11
index.html
|
@ -1,8 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>¯\_(ツ)_/¯ SRUG: Salzburg Rust User Group</title>
|
||||
</head>
|
||||
<body></body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>¯\_(ツ)_/¯ SRUG: Salzburg Rust User Group</title>
|
||||
<link data-trunk rel="sass" href="srug.scss"/>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
71
src/main.rs
71
src/main.rs
|
@ -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
12
srug.scss
Normal 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
1
vendor/bulma
vendored
Submodule
|
@ -0,0 +1 @@
|
|||
Subproject commit 53f62f465b01c7196085a29cd56cf0c9093579e0
|
Loading…
Reference in a new issue