♻️ Use of the assets management introduced by Dioxus 0.6.0
Cf. https://dioxuslabs.com/blog/release-060#stabilizing-manganis-asset-system
This commit is contained in:
@@ -7,14 +7,7 @@ title = "BG92"
|
||||
|
||||
[web.watcher]
|
||||
reload_html = true
|
||||
watch_path = ["public/index.html", "public/assets/index.css", "src"]
|
||||
|
||||
[web.resource]
|
||||
style = ["assets/index.css"]
|
||||
|
||||
[web.resource.dev]
|
||||
style = []
|
||||
script = []
|
||||
watch_path = ["Dioxus.toml", "public/index.html", "src"]
|
||||
|
||||
[[web.proxy]]
|
||||
backend = "http://localhost:8000/api/"
|
||||
|
||||
@@ -1,207 +0,0 @@
|
||||
|
||||
@font-face {
|
||||
src: url("../fonts/Geist/Geist-Medium.woff2") format("woff2");
|
||||
font-family: "Geist";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("../fonts/Geist/Geist-Bold.woff2") format("woff2");
|
||||
font-family: "Geist";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-family: "Geist";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes multicolor {
|
||||
0% { fill: #1DB2CF; /* color-primary-100 */ }
|
||||
33% { fill: #7E6BB6; /* color-secondary-100 */ }
|
||||
66% { fill: #D53583; /* color-ternary-100 */ }
|
||||
}
|
||||
|
||||
:root {
|
||||
--wallpaper-pattern-height: 128px;
|
||||
--spinner-height: 5%;
|
||||
--window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
|
||||
}
|
||||
|
||||
/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
|
||||
@media (min-height: 0px) and (max-height: 640px) {
|
||||
:root {
|
||||
--spinner-top: var(--window-center-pos);
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
|
||||
@media (min-height: 641px) and (max-height: 768px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
|
||||
@media (min-height: 769px) and (max-height: 1024px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
|
||||
@media (min-height: 1025px) and (max-height: 1280px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
|
||||
@media (min-height: 1281px) and (max-height: 1536px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
|
||||
@media (min-height: 1537px) and (max-height: 1792px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
|
||||
@media (min-height: 1793px) and (max-height: 2048px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
|
||||
@media (min-height: 2049px) and (max-height: 2304px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
|
||||
@media (min-height: 2305px) and (max-height: 2560px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
|
||||
@media (min-height: 2561px) and (max-height: 2816px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
|
||||
@media (min-height: 2817px) and (max-height: 3072px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
|
||||
@media (min-height: 3073px) and (max-height: 3328px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
|
||||
@media (min-height: 3329px) and (max-height: 3584px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
|
||||
@media (min-height: 3585px) and (max-height: 3840px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
|
||||
@media (min-height: 3841px) and (max-height: 4096px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
|
||||
@media (min-height: 4097px) and (max-height: 4352px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
|
||||
@media (min-height: 4353px) and (max-height: 4608px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
|
||||
@media (min-height: 4609px) and (max-height: 4864px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
|
||||
@media (min-height: 4865px) and (max-height: 5120px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.wallpaper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
background-image: url("../images/wallpaper-pattern.svg");
|
||||
background-position: center;
|
||||
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: var(--spinner-height);
|
||||
aspect-ratio: 2;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: var(--spinner-top);
|
||||
|
||||
svg {
|
||||
--fps: 4;
|
||||
--duration_sec: 3;
|
||||
--steps: calc(var(--duration_sec) * var(--fps));
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
fill: #1DB2CF; /* color-primary-100 */
|
||||
stroke: #1B1B1B; /* greyscale-90 */
|
||||
|
||||
animation: 3s multicolor linear infinite;
|
||||
animation-timing-function: steps(var(--steps), end);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Hack to avoid the addition of the script part by dioxus-cli -->
|
||||
<!-- <title>{base_path}</title> -->
|
||||
<!-- <title>{app_name}</title> -->
|
||||
|
||||
<title></title>
|
||||
<title>{app_name}</title>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8" />
|
||||
{style_include}
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-family: "Geist";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes multicolor {
|
||||
0% { fill: #1DB2CF; /* color-primary-100 */ }
|
||||
33% { fill: #7E6BB6; /* color-secondary-100 */ }
|
||||
66% { fill: #D53583; /* color-ternary-100 */ }
|
||||
}
|
||||
|
||||
:root {
|
||||
--wallpaper-pattern-height: 128px;
|
||||
--spinner-height: 5%;
|
||||
--window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
|
||||
}
|
||||
|
||||
/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
|
||||
@media (min-height: 0px) and (max-height: 640px) {
|
||||
:root {
|
||||
--spinner-top: var(--window-center-pos);
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
|
||||
@media (min-height: 641px) and (max-height: 768px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
|
||||
@media (min-height: 769px) and (max-height: 1024px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
|
||||
@media (min-height: 1025px) and (max-height: 1280px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
|
||||
@media (min-height: 1281px) and (max-height: 1536px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
|
||||
@media (min-height: 1537px) and (max-height: 1792px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
|
||||
@media (min-height: 1793px) and (max-height: 2048px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
|
||||
@media (min-height: 2049px) and (max-height: 2304px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
|
||||
@media (min-height: 2305px) and (max-height: 2560px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
|
||||
@media (min-height: 2561px) and (max-height: 2816px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
|
||||
@media (min-height: 2817px) and (max-height: 3072px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
|
||||
@media (min-height: 3073px) and (max-height: 3328px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
|
||||
@media (min-height: 3329px) and (max-height: 3584px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
|
||||
@media (min-height: 3585px) and (max-height: 3840px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
|
||||
@media (min-height: 3841px) and (max-height: 4096px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
|
||||
@media (min-height: 4097px) and (max-height: 4352px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
|
||||
@media (min-height: 4353px) and (max-height: 4608px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
|
||||
@media (min-height: 4609px) and (max-height: 4864px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
|
||||
@media (min-height: 4865px) and (max-height: 5120px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.wallpaper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' height='128' width='384' viewBox='0 0 384 128'><pattern id='p' width='384' height='128' patternUnits='userSpaceOnUse' stroke='%231B1B1B' stroke-linejoin='round' stroke-width='4'><path fill='%231DB2CF' d='M 9.736 -15 L -30 3.337 l 23.642 -0.088 L -10.212 15 L 30 -3.425 H 6.834 L 9.736 -15 Z'/><path fill='%23D53583' d='M 201.736 -15 L 162 3.337 l 23.642 -0.088 L 181.788 15 L 222 -3.425 H 198.834 L 201.736 -15 Z'/><path fill='%231DB2CF' d='M 393.736 -15 L 354 3.337 l 23.642 -0.088 L 373.788 15 L 414 -3.425 H 390.834 L 393.736 -15 Z'/><path fill='%237E6BB6' d='M 105.736 50 L 66 68.337 l 23.642 -0.088 L 85.788 80 L 126 61.575 H 102.834 L 105.736 50 Z'/><path fill='%237E6BB6' d='M 297.736 50 L 258 68.337 l 23.642 -0.088 L 277.788 80 L 318 61.575 H 294.834 L 297.736 50 Z'/><path fill='%231DB2CF' d='M 9.736 113 L -30 131.337 l 23.642 -0.088 L -10.212 143 L 30 124.575 H 6.834 L 9.736 113 Z'/><path fill='%23D53583' d='M 201.736 113 L 162 131.337 l 23.642 -0.088 L 181.788 143 L 222 124.575 H 198.834 L 201.736 113 Z'/><path fill='%231DB2CF' d='M 393.736 113 L 354 131.337 l 23.642 -0.088 L 373.788 143 L 414 124.575 H 390.834 L 393.736 113 Z'/></pattern><rect fill='url(%23p)' width='100%' height='100%'/></svg>");
|
||||
background-position: center;
|
||||
backgrond-size: var(--wallpaper-pattern-height);
|
||||
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: var(--spinner-height);
|
||||
aspect-ratio: 2;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: var(--spinner-top);
|
||||
|
||||
svg {
|
||||
--fps: 4;
|
||||
--duration_sec: 3;
|
||||
--steps: calc(var(--duration_sec) * var(--fps));
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
fill: #1DB2CF; /* color-primary-100 */
|
||||
stroke: #1B1B1B; /* greyscale-90 */
|
||||
|
||||
animation: 3s multicolor linear infinite;
|
||||
animation-timing-function: steps(var(--steps), end);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
@@ -18,7 +210,7 @@
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="spinner">
|
||||
<svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width='184' height='94' viewBox="0 0 184 94">
|
||||
<path
|
||||
stroke-linejoin="round"
|
||||
stroke-width="6"
|
||||
@@ -29,12 +221,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" async>
|
||||
import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
|
||||
import init from "{base_path}/wasm/beau-gosse-du-92.js";
|
||||
|
||||
// Ensure that everything needed to render preloader has been downloaded
|
||||
// before fetching the wasm bundle.
|
||||
window.onload=function() {
|
||||
init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
|
||||
init("{base_path}/wasm/beau-gosse-du-92_bg.wasm").then(
|
||||
wasm => {
|
||||
const preloader = document.getElementById("preloader");
|
||||
if (preloader !== undefined) {
|
||||
|
||||
18
src/main.rs
18
src/main.rs
@@ -10,6 +10,7 @@ mod utils;
|
||||
|
||||
use std::rc::Rc;
|
||||
|
||||
use dioxus::document::{Link, Style};
|
||||
use dioxus::prelude::*;
|
||||
use futures_util::stream::StreamExt;
|
||||
use tracing::{debug, error, warn};
|
||||
@@ -89,13 +90,24 @@ async fn login(mut rx: UnboundedReceiver<bool>, session: &GlobalSignal<Session>)
|
||||
fn app() -> Element {
|
||||
let login_coro = use_coroutine(|rx| login(rx, &SESSION));
|
||||
|
||||
if !SESSION.read().is_logged {
|
||||
let is_logged = SESSION.read().is_logged;
|
||||
|
||||
if !is_logged {
|
||||
login_coro.send(false);
|
||||
}
|
||||
|
||||
rsx! {
|
||||
Link {
|
||||
href: asset!("public/fonts/Geist/Geist-Medium.woff2"), as: "font", type: "font/woff2"
|
||||
}
|
||||
Style {
|
||||
id: "style-head", "body {{ font-family: 'Geist'; font-weight: normal; }}"
|
||||
}
|
||||
|
||||
if !is_logged {
|
||||
Login {}
|
||||
}
|
||||
} else {
|
||||
rsx! {
|
||||
else {
|
||||
Conversations {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,18 +181,14 @@ $border-thin: solid $border-thin-width $border-default-color;
|
||||
// TODO: Radius should be a percentage(eg: 1024/16px).
|
||||
$border-radius: 16px;
|
||||
|
||||
$geist-font-path: "../fonts/Geist";
|
||||
|
||||
$transition-duration: 300ms;
|
||||
|
||||
@font-face {
|
||||
src: url("#{$geist-font-path}/Geist-Medium.woff2") format("woff2");
|
||||
font-family: "Geist";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
|
||||
font-family: "Geist";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -7,10 +7,8 @@ turf::style_sheet!("src/ui/components/wallpaper.scss");
|
||||
|
||||
#[component]
|
||||
pub fn Wallpaper(display_version: Option<bool>) -> Element {
|
||||
let background_image = format!(
|
||||
"url({})",
|
||||
manganis::asset!("public/images/wallpaper-pattern.svg")
|
||||
);
|
||||
let background_image_asset = asset!("/public/images/wallpaper-pattern.svg");
|
||||
let background_image = format!("url({})", background_image_asset.to_string());
|
||||
|
||||
let version = display_version.map(|flag| if flag { Some(GIT_VERSION) } else { None });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user