xeovalyte/wrbapp
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added simple topbar

Browse Source
This commit is contained in:
xeovalyte 2024-07-17 22:17:39 +02:00
parent ff7c217979
commit b8e6670a3a
Signed by: xeovalyte
SSH Key Fingerprint: SHA256:kSQDrQDmKzljJzfGYcd3m9RqHi4h8rSwkZ3sQ9kBURo
8 changed files with 78 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
assets/tailwind.css
View File

@ -526,7 +526,7 @@ html {
--er: 71.76% 0.221 22.18;
--bc: 19.5836% 0.002127 291.956898;
--pc: 13.2724% 0.036042 39.606669;
--sc: 17.6992% 0.028367 95.291946;
--sc: 88.8207% 0.022093 260.526312;
--ac: 15.3748% 0.024689 184.972959;
--nc: 87.7082% 0.004808 262.829219;
--inc: 0% 0 0;
@ -542,7 +542,7 @@ html {
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--s: 88.4962% 0.141836 95.291946;
--s: 44.1033% 0.110463 260.526312;
--a: 76.8742% 0.123447 184.972959;
--n: 38.5412% 0.024038 262.829219;
--b1: 97.9179% 0.010634 291.956898;
@ -551,15 +551,15 @@ html {
@media (prefers-color-scheme: dark) {
:root {
--p: 66.362% 0.180208 39.606669;
--b2: 19.635% 0.009739 39.286176;
--b3: 18.1571% 0.009006 39.286176;
--b2: 19.4472% 0.013641 266.87143;
--b3: 17.9835% 0.012614 266.87143;
--in: 72.06% 0.191 231.6;
--su: 64.8% 0.150 160;
--wa: 84.71% 0.199 83.87;
--er: 71.76% 0.221 22.18;
--bc: 84.2226% 0.002094 39.286176;
--bc: 84.1822% 0.002934 266.87143;
--pc: 13.2724% 0.036042 39.606669;
--sc: 17.6992% 0.028367 95.291946;
--sc: 88.8207% 0.022093 260.526312;
--ac: 15.3748% 0.024689 184.972959;
--nc: 87.7082% 0.004808 262.829219;
--inc: 0% 0 0;
@ -575,10 +575,10 @@ html {
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--s: 88.4962% 0.141836 95.291946;
--s: 44.1033% 0.110463 260.526312;
--a: 76.8742% 0.123447 184.972959;
--n: 38.5412% 0.024038 262.829219;
--b1: 21.113% 0.010472 39.286176;
--b1: 20.911% 0.014668 266.87143;
}
}
@ -592,7 +592,7 @@ html {
--er: 71.76% 0.221 22.18;
--bc: 19.5836% 0.002127 291.956898;
--pc: 13.2724% 0.036042 39.606669;
--sc: 17.6992% 0.028367 95.291946;
--sc: 88.8207% 0.022093 260.526312;
--ac: 15.3748% 0.024689 184.972959;
--nc: 87.7082% 0.004808 262.829219;
--inc: 0% 0 0;
@ -608,7 +608,7 @@ html {
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--s: 88.4962% 0.141836 95.291946;
--s: 44.1033% 0.110463 260.526312;
--a: 76.8742% 0.123447 184.972959;
--n: 38.5412% 0.024038 262.829219;
--b1: 97.9179% 0.010634 291.956898;
@ -616,15 +616,15 @@ html {
[data-theme=wrb_dark] {
--p: 66.362% 0.180208 39.606669;
--b2: 19.635% 0.009739 39.286176;
--b3: 18.1571% 0.009006 39.286176;
--b2: 19.4472% 0.013641 266.87143;
--b3: 17.9835% 0.012614 266.87143;
--in: 72.06% 0.191 231.6;
--su: 64.8% 0.150 160;
--wa: 84.71% 0.199 83.87;
--er: 71.76% 0.221 22.18;
--bc: 84.2226% 0.002094 39.286176;
--bc: 84.1822% 0.002934 266.87143;
--pc: 13.2724% 0.036042 39.606669;
--sc: 17.6992% 0.028367 95.291946;
--sc: 88.8207% 0.022093 260.526312;
--ac: 15.3748% 0.024689 184.972959;
--nc: 87.7082% 0.004808 262.829219;
--inc: 0% 0 0;
@ -640,10 +640,10 @@ html {
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--s: 88.4962% 0.141836 95.291946;
--s: 44.1033% 0.110463 260.526312;
--a: 76.8742% 0.123447 184.972959;
--n: 38.5412% 0.024038 262.829219;
--b1: 21.113% 0.010472 39.286176;
--b1: 20.911% 0.014668 266.87143;
}
*, ::before, ::after {
@ -754,176 +754,17 @@ html {
--tw-contain-style: ;
}
.btn {
display: inline-flex;
height: 3rem;
min-height: 3rem;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
.navbar {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--rounded-btn, 0.5rem);
border-color: transparent;
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
font-size: 0.875rem;
line-height: 1em;
gap: 0.5rem;
font-weight: 600;
text-decoration-line: none;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
border-width: var(--border-btn, 1px);
transition-property: color, background-color, border-color, opacity, box-shadow, transform;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
padding: var(--navbar-padding, 0.5rem);
min-height: 4rem;
width: 100%;
}
.btn-disabled,
.btn[disabled],
.btn:disabled {
pointer-events: none;
}
:where(.btn:is(input[type="checkbox"])),
:where(.btn:is(input[type="radio"])) {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
--tw-content: attr(aria-label);
content: var(--tw-content);
}
@media (hover: hover) {
.btn:hover {
--tw-border-opacity: 1;
border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
--tw-bg-opacity: 1;
background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
}
@supports (color: color-mix(in oklab, black, black)) {
.btn:hover {
background-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
black
);
border-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
black
);
}
}
@supports not (color: oklch(0% 0 0)) {
.btn:hover {
background-color: var(--btn-color, var(--fallback-b2));
border-color: var(--btn-color, var(--fallback-b2));
}
}
.btn.glass:hover {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-disabled:hover,
.btn[disabled]:hover,
.btn:disabled:hover {
--tw-border-opacity: 0;
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
--tw-bg-opacity: 0.2;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-text-opacity: 0.2;
}
@supports (color: color-mix(in oklab, black, black)) {
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
}
}
@media (prefers-reduced-motion: no-preference) {
.btn {
animation: button-pop var(--animation-btn, 0.25s) ease-out;
}
}
.btn:active:hover,
.btn:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
}
@supports not (color: oklch(0% 0 0)) {
.btn {
background-color: var(--btn-color, var(--fallback-b2));
border-color: var(--btn-color, var(--fallback-b2));
}
}
.btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
}
.btn.glass {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn.glass.btn-active {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn.btn-disabled,
.btn[disabled],
.btn:disabled {
--tw-border-opacity: 0;
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
--tw-bg-opacity: 0.2;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-text-opacity: 0.2;
}
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
--tw-border-opacity: 1;
border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
--tw-bg-opacity: 1;
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
--tw-text-opacity: 1;
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
outline-color: var(--fallback-p,oklch(var(--p)/1));
:where(.navbar > *:not(script, style)) {
display: inline-flex;
align-items: center;
}
@keyframes button-pop {
@ -954,10 +795,6 @@ html {
}
}
.join > :where(*:not(:first-child)):is(.btn) {
margin-inline-start: calc(var(--border-btn) * -1);
}
@keyframes modal-pop {
0% {
opacity: 0;
@ -1023,25 +860,16 @@ html {
}
}
.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
margin-top: calc(var(--border-btn) * -1);
.flex-1 {
flex: 1 1 0%;
}
.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
margin-inline-start: calc(var(--border-btn) * -1);
.flex-none {
flex: none;
}
.h-32 {
height: 8rem;
}
.w-32 {
width: 8rem;
}
.bg-base-100 {
--tw-bg-opacity: 1;
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
.gap-2 {
gap: 0.5rem;
}
.bg-base-200 {
@ -1049,6 +877,11 @@ html {
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;

2
src/components.rs Normal file
View File

@ -0,0 +1,2 @@
pub mod home;
pub mod layout;

10
src/components/home.rs Normal file
View File

@ -0,0 +1,10 @@
use dioxus::prelude::*;
#[component]
pub fn Home() -> Element {
rsx! {
div {
h1 { class: "text-xl font-bold text-primary", "WRB App" }
}
}
}

2
src/components/layout.rs Normal file
View File

@ -0,0 +1,2 @@
pub mod navbar;
pub mod topbar;

1
src/components/layout/navbar.rs Normal file
View File

@ -0,0 +1 @@

19
src/components/layout/topbar.rs Normal file
View File

@ -0,0 +1,19 @@
use dioxus::prelude::*;
#[component]
pub fn Topbar() -> Element {
rsx! {
div {
class: "navbar bg-base-200 px-3",
div {
class: "flex-1",
span { class: "text-xl font-bold", "WRB" }
}
div {
class: "flex-none gap-2",
span { "Admin" }
span { "Settings" }
}
}
}
}

60
src/main.rs
View File

@ -1,14 +1,17 @@
#![allow(non_snake_case)]
mod components;
use dioxus::prelude::*;
use tracing::{info, Level};
// Include routes
use components::home::Home;
#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}
const _TAILWIND_URL: &str = manganis::mg!(file("assets/tailwind.css"));
@ -21,58 +24,7 @@ fn main() {
fn App() -> Element {
rsx! {
components::layout::topbar::Topbar {}
Router::<Route> {}
}
}
#[component]
fn Blog(id: i32) -> Element {
rsx! {
Link { to: Route::Home {}, "Go to counter" }
"Blog post {id}"
}
}
#[component]
fn Home() -> Element {
let mut count = use_signal(|| 0);
let mut text = use_signal(|| String::from("..."));
rsx! {
Link {
to: Route::Blog {
id: count()
},
"Go to blog"
}
div {
class: "bg-base-100",
h1 { class: "text-xl font-bold text-primary", "High-Five counter: {count}" }
button { class: "btn", onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
button {
onclick: move |_| async move {
if let Ok(data) = get_server_data().await {
tracing::info!("Client received: {}", data);
text.set(data.clone());
post_server_data(data).await.unwrap();
}
},
"Get Server Data"
}
p { "Server data: {text}"}
div { class: "w-32 h-32 bg-base-200", "test" }
}
}
}
#[server(PostServerData)]
async fn post_server_data(data: String) -> Result<(), ServerFnError> {
info!("Server received: {}", data);
Ok(())
}
#[server(GetServerData)]
async fn get_server_data() -> Result<String, ServerFnError> {
Ok("Hello from the server!".to_string())
}

6
tailwind.config.js
View File

@ -17,7 +17,7 @@ module.exports = {
{
wrb: {
"primary": "#eb6330",
"secondary": "#f6d860",
"secondary": "#2d518f",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#f8f7ff",
@ -26,10 +26,10 @@ module.exports = {
{
wrb_dark: {
"primary": "#eb6330",
"secondary": "#f6d860",
"secondary": "#2d518f",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#1d1715",
"base-100": "#15181f",
},
},