futile/futile.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more responsive

Browse Source
This commit is contained in:
futile
2024-12-04 19:39:56 +00:00
parent 7c690e1b1b
commit 547e111852
5 changed files with 52 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
-60
View File
@@ -251,25 +251,6 @@ dependencies = [
"gloo-worker 0.4.0",
]
[[package]]
name = "gloo"
version = "0.11.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
dependencies = [
"gloo-console 0.3.0",
"gloo-dialogs 0.2.0",
"gloo-events 0.2.0",
"gloo-file 0.3.0",
"gloo-history 0.2.2",
"gloo-net 0.5.0",
"gloo-render 0.2.0",
"gloo-storage 0.3.0",
"gloo-timers 0.3.0",
"gloo-utils 0.2.0",
"gloo-worker 0.5.0",
]
[[package]]
name = "gloo-console"
version = "0.2.3"
@@ -435,27 +416,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-net"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "43aaa242d1239a8822c15c645f02166398da4f8b5c4bae795c1f5b44e9eee173"
dependencies = [
"futures-channel",
"futures-core",
"futures-sink",
"gloo-utils 0.2.0",
"http",
"js-sys",
"pin-project",
"serde",
"serde_json",
"thiserror",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-render"
version = "0.1.1"
@@ -588,25 +548,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-worker"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "085f262d7604911c8150162529cefab3782e91adb20202e8658f7275d2aefe5d"
dependencies = [
"bincode",
"futures",
"gloo-utils 0.2.0",
"gloo-worker-macros",
"js-sys",
"pinned",
"serde",
"thiserror",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-worker-macros"
version = "0.1.0"
@@ -957,7 +898,6 @@ name = "site"
version = "0.1.0"
dependencies = [
"fastrand",
"gloo 0.11.0",
"web-sys",
"yew",
]
Cargo.toml
-1
View File
@@ -5,6 +5,5 @@ edition = "2021"
[dependencies]
fastrand = { version = "2.2.0", features = ["js"] }
gloo = { version = "0.11.0", features = ["timers"] }
web-sys = { version = "0.3.74", features = ["Window"] }
yew = { version = "0.21.0", features = ["csr"] }
src/buttons.rs
+2 -2
View File
@@ -11,8 +11,8 @@ fn firtnite() -> Callback<MouseEvent> {
pub fn buttons() -> Html {
html! {
<div class="buttons">
<ul class="buttons">
<div class="footer">
<ul class="footer buttons">
<li><a href="https://futile.eu"><img
src="static/buttons/futile.png" width="88px" height="31px"
alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile"
src/main.rs
+12 -18
View File
@@ -1,31 +1,21 @@
mod buttons;
mod content;
use gloo::timers::callback::Interval;
use yew::prelude::*;
const QUOTES: [&str; 6] = [
const QUOTES: [&str; 7] = [
"who are you",
"lorem ipsum dolor sit amet",
"hot garfields in your area",
"remember to drink water",
"i am not a web developer",
"it's nice, isn't it?",
"do you like hurting other people?",
];
#[function_component(Page)]
fn page() -> Html {
let quote = use_state(|| fastrand::choice(QUOTES).unwrap());
let bullet = use_state(|| '◇');
{
let bullet = bullet.clone();
use_effect(move || {
let interval = Interval::new(1000, move || {
bullet.set(if *bullet == '◇' { '◆' } else { '◇' });
});
|| drop(interval)
});
}
html! {
<>
<div class="box">
@@ -35,13 +25,17 @@ fn page() -> Html {
<div class="box">
{ content::content() }
</div>
<div style="position: absolute; bottom: 0; left: 0; right: 0;">
<div class="footer-container">
{ buttons::buttons() }
<div class="footer">
<p> { *quote } </p>
<p style="user-select: none;"> { *bullet } </p>
<p><a class="click" target="_blank" href="https://codeberg.org/futile"> { "git" } </a></p>
<p><a class="click" target="_blank" href="https://steamcommunity.com/id/elituf"> { "steam" } </a></p>
<div class="footer quote">
<p> { "« " } { *quote } { " »" } </p>
</div>
<div class="footer links">
<a class="click" target="_blank" href="https://codeberg.org/futile"> { "git" } </a>
<a class="click" target="_blank" href="https://steamcommunity.com/id/elituf"> { "steam" } </a>
</div>
<div class="footer" style="margin-top: -40px">
<div><p> { '\u{200B}' } </p></div>
</div>
</div>
</>
static/www/style.scss
+38 -22
View File
@@ -36,22 +36,8 @@ body {
align-items: center;
}
@mixin button-styles {
display: inline-block;
padding: 3px 6px;
font-size: 16px;
text-align: center;
color: $primary-color;
background-color: $background-color;
border: 1px solid $primary-color;
cursor: pointer;
text-decoration: none;
border-radius: 0;
user-select: none;
}
.box,
div.buttons {
div.footer {
@include flex-center;
max-width: 480px;
margin: 0 auto;
@@ -93,7 +79,17 @@ div.buttons {
}
.button {
@include button-styles;
display: inline-block;
padding: 3px 6px;
font-size: 16px;
text-align: center;
color: $primary-color;
background-color: $background-color;
border: 1px solid $primary-color;
cursor: pointer;
text-decoration: none;
border-radius: 0;
user-select: none;
&.shiny {
position: relative;
@@ -137,10 +133,8 @@ div.buttons {
}
}
ul.buttons {
ul.footer {
list-style-type: none;
margin: 0px;
padding: 0;
@include flex-center;
flex-wrap: wrap;
@@ -153,8 +147,30 @@ ul.buttons {
}
}
div.footer {
@include flex-center;
height: 2.4em;
.footer-container {
margin-top: 64px;
@media (min-height: 816px) {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0;
}
}
ul.footer.buttons {
margin: 0px;
padding: 0;
}
div.footer.quote {
text-align: center;
word-wrap: break-word;
margin-top: -8px;
}
div.footer.links {
margin-top: -12px;
gap: 5px;
}