1
Fork 0

Change style.

This commit is contained in:
Bauke 2021-11-25 23:28:21 +01:00
parent 4b389f9d9e
commit 7918707dd9
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
8 changed files with 12 additions and 197 deletions

View File

@ -1,94 +1,20 @@
use gloo_timers::callback::Interval;
use rand::Rng;
use yew::prelude::*; use yew::prelude::*;
/// The main page `<footer>` element. /// The main page `<footer>` element.
pub(crate) struct PageFooter { pub(crate) struct PageFooter;
/// The handle to the `setInterval`, this is stored so it doesn't get dropped
/// and stop the interval from happening.
_interval_handle: Interval,
/// The number of which square is currently active.
active_square: u32,
/// The link to this component.
link: ComponentLink<Self>,
/// The maximum number of squares to render.
max_squares: u32,
}
/// The possible messages for [`PageFooter`].
#[derive(Debug)]
pub(crate) enum PageFooterMessage {
/// The message to decrease the max squares by 1.
DecrementMaxSquares,
/// The message to increase the max squares by 1.
IncrementMaxSquares,
/// The message from the interval to update the active square.
TickActiveSquare,
}
impl Component for PageFooter { impl Component for PageFooter {
type Message = PageFooterMessage; type Message = ();
type Properties = (); type Properties = ();
fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self { fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
log::trace!("Creating PageFooter"); log::trace!("Creating PageFooter");
let interval_handle = { Self
let link = link.clone();
Interval::new(1000, move || {
link.send_message(Self::Message::TickActiveSquare)
})
};
Self {
_interval_handle: interval_handle,
active_square: 0,
link,
max_squares: 5,
}
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, _msg: Self::Message) -> ShouldRender {
log::trace!("PageFooterMessage::{:?}", msg); unimplemented!()
match msg {
Self::Message::DecrementMaxSquares => {
if self.max_squares > 1 {
self.max_squares -= 1;
log::debug!("Max squares set to {}", self.max_squares);
true
} else {
false
}
}
Self::Message::IncrementMaxSquares => {
if self.max_squares < 360 {
self.max_squares += 1;
log::debug!("Max squares set to {}", self.max_squares);
true
} else {
false
}
}
Self::Message::TickActiveSquare => {
if self.max_squares == 1 {
if self.active_square == 0 {
self.active_square = 1;
} else {
self.active_square = 0;
}
} else {
self.active_square += 1;
if self.active_square >= self.max_squares {
self.active_square = 0;
}
}
true
}
}
} }
fn change(&mut self, _props: Self::Properties) -> ShouldRender { fn change(&mut self, _props: Self::Properties) -> ShouldRender {
@ -96,69 +22,8 @@ impl Component for PageFooter {
} }
fn view(&self) -> Html { fn view(&self) -> Html {
let squares = (0..self.max_squares)
.into_iter()
.map(|square| {
let mut classes = classes!("square");
if square == self.active_square {
classes.push("active");
}
let hue = {
if self.max_squares == 1 {
rand::thread_rng().gen_range(0..=360)
} else {
(360 / self.max_squares) * square
}
};
let style = format!("background-color: hsl({}, 100%, 50%);", hue);
return html! {
<div style=style class=classes />
};
})
.collect::<Html>();
let squares = {
let style = format!(
"--square-transition: {0}s; --squares: {0};",
self.max_squares
);
let decrement = self
.link
.callback(|_| PageFooterMessage::DecrementMaxSquares);
let increment = self
.link
.callback(|_| PageFooterMessage::IncrementMaxSquares);
html! {
<div style=style class="squares">
<button onclick=decrement>{"-"}</button>
{squares}
<button onclick=increment>{"+"}</button>
</div>
}
};
let technologies = html! {
<p class="technologies">
{"Written in "}
<a target="_blank" href="https://www.rust-lang.org">{"Rust"}</a>
{" with "}
<a target="_blank" href="https://yew.rs">{"Yew"}</a>
{" and compiled to "}
<a target="_blank" href="https://webassembly.org">{"WebAssembly"}</a>
{" with "}
<a target="_blank" href="https://trunkrs.dev">{"Trunk"}</a>
{"."}
</p>
};
html! { html! {
<footer class="page-footer"> <footer class="page-footer"></footer>
{squares}
{technologies}
</footer>
} }
} }
} }

View File

@ -1,5 +0,0 @@
@mixin responsive-container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}

View File

@ -1,5 +1,4 @@
.error-404 { .error-404 {
@include responsive-container;
align-items: center; align-items: center;
display: flex; display: flex;
height: 100vh; height: 100vh;

View File

@ -1,40 +1,3 @@
.page-footer { .page-footer {
@include responsive-container;
margin-top: 1rem; margin-top: 1rem;
.squares {
display: grid;
grid-template-columns: min-content repeat(var(--squares, 5), 1fr) min-content;
height: 1rem;
margin-bottom: 1rem;
button {
align-items: center;
border: none;
display: flex;
font-family: monospace;
font-size: 1rem;
height: 100%;
justify-content: center;
width: 2rem;
}
.square {
height: 100%;
&.active {
opacity: 100%;
}
&:not(.active) {
opacity: 0%;
transition: opacity var(--square-transition, 5s);
}
}
}
.technologies {
background-color: #333;
padding: 1rem;
}
} }

View File

@ -1,6 +1,3 @@
.page-header { .page-header {
@include responsive-container;
background-color: #333;
margin-top: 1rem;
padding: 1rem; padding: 1rem;
} }

View File

@ -1,7 +1,4 @@
.page-main { .page-main {
@include responsive-container;
background-color: #333;
margin-top: 1rem;
padding: 1rem; padding: 1rem;
.contact-links { .contact-links {

View File

@ -6,7 +6,7 @@
padding: 0; padding: 0;
.style { .style {
background-color: #333; border: 2px solid #fff;
padding: 1rem; padding: 1rem;
.header { .header {
@ -26,8 +26,8 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: #ff0; background-color: #fff;
border-color: #ff0; border-color: #fff;
color: #000; color: #000;
} }
} }

View File

@ -1,19 +1,18 @@
@import 'reset'; @import 'reset';
@import 'mixins';
html { html {
font-size: 62.5%; font-size: 62.5%;
} }
body { body {
background-color: #111; background-color: #000;
color: #fff; color: #fff;
font-family: sans-serif; font-family: sans-serif;
font-size: 2rem; font-size: 2rem;
} }
a { a {
color: #ff0; color: #fff;
font-weight: bold; font-weight: bold;
} }