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::*;
|
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! {
|
html! {
|
||||||
<div style=style class="squares">
|
<footer class="page-footer"></footer>
|
||||||
<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>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
@mixin responsive-container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 1000px;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
.page-header {
|
.page-header {
|
||||||
@include responsive-container;
|
|
||||||
background-color: #333;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue