Change style.
This commit is contained in:
parent
4b389f9d9e
commit
7918707dd9
GPG Key ID:
C1C0F29952BCF558
|
|
@ -1,94 +1,20 @@
|
|||
use gloo_timers::callback::Interval;
|
||||
use rand::Rng;
|
||||
use yew::prelude::*;
|
||||
|
||||
/// The main page `<footer>` element.
|
||||
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,
|
||||
}
|
||||
pub(crate) struct PageFooter;
|
||||
|
||||
impl Component for PageFooter {
|
||||
type Message = PageFooterMessage;
|
||||
type Message = ();
|
||||
type Properties = ();
|
||||
|
||||
fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
|
||||
log::trace!("Creating PageFooter");
|
||||
|
||||
let interval_handle = {
|
||||
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,
|
||||
}
|
||||
Self
|
||||
}
|
||||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
log::trace!("PageFooterMessage::{:?}", msg);
|
||||
|
||||
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 update(&mut self, _msg: Self::Message) -> ShouldRender {
|
||||
unimplemented!()
|
||||
}
|
||||
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
|
|
@ -96,69 +22,8 @@ impl Component for PageFooter {
|
|||
}
|
||||
|
||||
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! {
|
||||
<footer class="page-footer">
|
||||
{squares}
|
||||
{technologies}
|
||||
</footer>
|
||||
<footer class="page-footer"></footer>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
@mixin responsive-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 1000px;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.error-404 {
|
||||
@include responsive-container;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,3 @@
|
|||
.page-footer {
|
||||
@include responsive-container;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
.page-header {
|
||||
@include responsive-container;
|
||||
background-color: #333;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
.page-main {
|
||||
@include responsive-container;
|
||||
background-color: #333;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
.contact-links {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding: 0;
|
||||
|
||||
.style {
|
||||
background-color: #333;
|
||||
border: 2px solid #fff;
|
||||
padding: 1rem;
|
||||
|
||||
.header {
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #ff0;
|
||||
border-color: #ff0;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
@import 'reset';
|
||||
@import 'mixins';
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #111;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff0;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue