diff --git a/src/app.rs b/src/app.rs index 3e25e98..c95bf97 100644 --- a/src/app.rs +++ b/src/app.rs @@ -5,13 +5,14 @@ use leptos_router::{ StaticSegment, WildcardSegment, }; -use crate::{ prelude::*, components::{ header::Header, Dash } }; +use crate::{ prelude::*, components::{ sidebar::Sidebar, header::Header, Dash } }; #[component] pub fn App() -> impl IntoView { // Provides context that manages stylesheets, titles, meta tags, etc. provide_meta_context(); provide_context(Store::new(Dashboard::mock())); + console_error_panic_hook::set_once(); view! { // injects a stylesheet into the document @@ -23,14 +24,16 @@ pub fn App() -> impl IntoView { // content for this welcome page +
- +
+
} } diff --git a/src/components/header.rs b/src/components/header.rs index 991e5dc..46240bd 100644 --- a/src/components/header.rs +++ b/src/components/header.rs @@ -1,17 +1,55 @@ use crate::{ entities::DashboardStoreFields, prelude::* }; -use leptos::prelude::*; +use chrono::TimeDelta; +use leptos::{ logging, prelude::* }; #[component] pub fn Header () -> impl IntoView { let state = expect_context::(); let campaign = state.campaign(); let date = state.date(); + let session = state.session(); + let image = state.campaign_image(); + + let adjust_day = move |adjustment: i64| date.update(|d| { + *d = d.checked_add_signed(TimeDelta::days(adjustment)).unwrap(); + }); + + let adjust_session = move |adjustment: isize| session.update(|s| { + if let Some(new) = s.checked_add_signed(adjustment) { + *s = new; + } + }); + + Effect::new(move |_| { + logging::warn!("{}", campaign.get()); + }); view! {
-

Aboba v{env!("CARGO_PKG_VERSION")} by mk

-

{campaign.get_untracked()}

-

{move || date.get().to_string()}

+ +
+ +
+ +
+
aex v{env!("CARGO_PKG_VERSION")} by mk
+ +
+

{move || format!("{}", date.get().format("%d/%m/%Y"))}

+ + +
+
+

Сессия #{move || format!("{}", session.get())}

+ + +
+
+ + + +
+
} } diff --git a/src/components/mod.rs b/src/components/mod.rs index 4df17c1..a4890e6 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -10,8 +10,7 @@ pub mod sidebar; pub fn Dash () -> impl IntoView { view! { -
-
+ main } } diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index f49153a..d42ee79 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,2 +1,12 @@ use crate::prelude::*; use leptos::prelude::*; + + +#[component] +pub fn Sidebar () -> impl IntoView { + view! { + + } +} diff --git a/src/lib.rs b/src/lib.rs index 2892429..8fe6c13 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,3 +1,4 @@ +#![allow(unused_imports)] pub mod app; use leptos::prelude::*; diff --git a/src/main.rs b/src/main.rs index 4243bb2..35c13f0 100644 --- a/src/main.rs +++ b/src/main.rs @@ -13,6 +13,8 @@ async fn main() -> std::io::Result<()> { let conf = get_configuration(None).unwrap(); let addr = conf.leptos_options.site_addr; + console_error_panic_hook::set_once(); + HttpServer::new(move || { // Generate the list of routes in your Leptos App let routes = generate_route_list(App); diff --git a/src/prelude.rs b/src/prelude.rs index a9097b1..444c840 100644 --- a/src/prelude.rs +++ b/src/prelude.rs @@ -1,4 +1,5 @@ #![allow(unused_imports)] +#![allow(dead_code)] pub use std::collections::{ HashMap, HashSet }; pub use serde_json::{ Value, Map }; diff --git a/style/_mixins.scss b/style/_mixins.scss new file mode 100644 index 0000000..17457e3 --- /dev/null +++ b/style/_mixins.scss @@ -0,0 +1,7 @@ +@mixin heading { + font-family: "Neusa Next Pro"; +} + +@mixin text { + font-family: "Noto Serif"; +} diff --git a/style/main.scss b/style/main.scss index d9a9a88..5685aea 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,11 +1,136 @@ +@use 'mixins'; @use 'reset'; body { font-size: 1.22em; + display: flex; + justify-content: center; + align-items: center; + @include mixins.text; } -header { +h1, h2, h3, h4, h5, h6 { + @include mixins.heading; +} + +.wrapper { + width: 90vw; + height: 90vh; display: grid; + grid-template-rows: 100px 1fr; + grid-template-columns: 3fr 6fr; + grid-gap: 10px; +} + +header, aside, main { + background: rgba(0, 0, 0, 0.1); +} + + +header { + grid-row: 1/2; + grid-column: 1/3; + display: flex; + + .campaign-image { + width: 100px; + img { + width: 100%; + height: 100%; + object-fit: cover; /* or contain, or fill */ + } + overflow: hidden; + } + + + section { + width: 100%; + display: grid; + grid-template-columns: 3fr 1fr; + grid-template-rows: 2fr 1fr 1fr; + padding-left: 20px; + } + + .campaign-name { + font-size: 2em; + grid-row: 1/2; + grid-column: 1/2; + align-self: last baseline; + padding-bottom: 3px; + } + + .version { + font-size: 0.6em; + text-transform: lowercase; + grid-row: 1/2; + grid-column: 2/3; + align-self: start; + justify-self: end; + padding: 3px; + color: #888; + } + + .controls { + grid-row: 2/4; + grid-column: 2/3; + padding: 3px; + + display: flex; + justify-content: flex-end; + align-items: flex-end; + + button { + background: #ccc; + padding: 3px 5px; + text-transform: lowercase; + font-size: 0.66em; + line-height: 1em; + margin: 2px 5px; + @include mixins.heading; + } + } + + .game-date, .session-number { + display: flex; + align-items: center; + :first-child { + width: 120px; + } + .adjust { + margin: 0 1px; + width: 20px; + text-align: center; + + &:hover { + transform: scale(1.4); + transition: transform .2s; + cursor: pointer; + } + + } + } + + .session-number { + grid-row: 2/3; + grid-column: 1/2; + font-weight: 300; + } + + .game-date { + grid-row: 3/4; + grid-column: 1/2; + + } +} + +aside { + grid-row: 2/3; + grid-column: 1/2; +} + +main { + grid-row: 2/3; + grid-column: 2/3; } input { @@ -19,3 +144,19 @@ input { display: flex; flex-direction: row; } + +input.header-input { + border: none; + + &-1, &-2 { + font-weight: 800; + } + &-3, &-4 { + font-weight: 500; + } + &-5, &-6 { + font-weight: 200; + } + + @include mixins.heading; +}