rust/r-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar safari flex

Browse Source
This commit is contained in:
Plucky
2022-10-17 00:54:50 +08:00
parent 536214475d
commit 60d9b68dc1
11 changed files with 419 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
/target /target
/logs /logs
.stage

8
dist/index.html vendored
View File

@@ -3,17 +3,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> -->
<title>Dashboard</title> <title>Dashboard</title>
<link rel="preload" href="/r-dashboard-afab67e69775a76a_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/r-dashboard-436bab45f7450582_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/r-dashboard-afab67e69775a76a.js"></head> <link rel="modulepreload" href="/r-dashboard-436bab45f7450582.js"></head>
<body> <body>
<div id="main"></div> <div id="main"></div>
<div class="lg:hidden bg-black"></div> <div class="lg:hidden bg-black"></div>
<script type="module">import init from '/r-dashboard-afab67e69775a76a.js';init('/r-dashboard-afab67e69775a76a_bg.wasm');</script><script>(function () { <script type="module">import init from '/r-dashboard-436bab45f7450582.js';init('/r-dashboard-436bab45f7450582_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

12
dist/r-dashboard-afab67e69775a76a.js → dist/r-dashboard-436bab45f7450582.js vendored
View File

@@ -1026,23 +1026,23 @@ imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
imports.wbg.__wbindgen_throw = function(arg0, arg1) { imports.wbg.__wbindgen_throw = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1)); throw new Error(getStringFromWasm0(arg0, arg1));
}; };
imports.wbg.__wbindgen_closure_wrapper6804 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper6803 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18); const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10415 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10414 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21); const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10417 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10416 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24); const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10970 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10969 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27); const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper11819 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper11818 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30); const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@@ -1080,7 +1080,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('r-dashboard-afab67e69775a76a_bg.wasm', import.meta.url); input = new URL('r-dashboard-436bab45f7450582_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/r-dashboard-afab67e69775a76a_bg.wasm → dist/r-dashboard-436bab45f7450582_bg.wasm vendored
View File

Binary file not shown.

40
dist/style.css vendored
View File

@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
/* /*
! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
*/ */
@@ -1009,6 +1011,10 @@ select {
height: 1rem; height: 1rem;
} }
.w-full{
width: 100%;
}
.w-32{ .w-32{
width: 8rem; width: 8rem;
} }
@@ -1017,10 +1023,6 @@ select {
width: 2rem; width: 2rem;
} }
.w-full {
width: 100%;
}
.w-48{ .w-48{
width: 12rem; width: 12rem;
} }
@@ -1296,16 +1298,16 @@ select {
background-color: rgb(75 85 99 / var(--tw-bg-opacity)); background-color: rgb(75 85 99 / var(--tw-bg-opacity));
} }
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-gray-900{ .bg-gray-900{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity)); background-color: rgb(17 24 39 / var(--tw-bg-opacity));
} }
.bg-black{
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-indigo-600{ .bg-indigo-600{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity)); background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1814,6 +1816,22 @@ select {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
} }
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track{
background: #2D3748;
}
::-webkit-scrollbar-thumb{
background: #CBD5E0;
}
::-webkit-scrollbar-thumb:hover{
background: #718096;
}
.btn{ .btn{
border-radius: 0.5rem; border-radius: 0.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
@@ -2070,6 +2088,10 @@ select {
margin-right: -2rem; margin-right: -2rem;
} }
.lg\:block{
display: block;
}
.lg\:flex{ .lg\:flex{
display: flex; display: flex;
} }

17
index.css
View File

@@ -1,7 +1,24 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track{
background: #2D3748;
}
::-webkit-scrollbar-thumb{
background: #CBD5E0;
}
::-webkit-scrollbar-thumb:hover{
background: #718096;
}
.btn { .btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md; @apply py-2 px-4 font-semibold rounded-lg shadow-md;

2
index.html
View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> -->
<title>Dashboard</title> <title>Dashboard</title>
</head> </head>
<body> <body>

10
src/app.rs
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-11 00:07:29 * @Date: 2022-10-11 00:07:29
* @LastEditTime: 2022-10-15 12:38:33 * @LastEditTime: 2022-10-17 00:53:17
* @Description: * @Description:
*/ */
#![allow(non_snake_case)] #![allow(non_snake_case)]
@@ -17,7 +17,7 @@ pub fn app(cx: Scope) -> Element {
}) })
} }
/// Routes // Routes
fn routes(cx: Scope) -> Element { fn routes(cx: Scope) -> Element {
cx.render(rsx! { cx.render(rsx! {
Route { to: "/", login::view{}} Route { to: "/", login::view{}}
@@ -33,7 +33,7 @@ fn routes(cx: Scope) -> Element {
}) })
} }
/// Home Page View // Home Page View
fn Home(cx: Scope)->Element{ fn Home(cx: Scope)->Element{
let route = use_route(&cx); let route = use_route(&cx);
@@ -44,10 +44,10 @@ fn Home(cx: Scope)->Element{
class: "flex h-screen bg-gray-200 font-roboto", class: "flex h-screen bg-gray-200 font-roboto",
sidebar::view{} sidebar::view{}
div { div {
class: "flex-1 flex flex-col overflow-hidden", class: "flex-1 flex flex-col overflow-hidden w-full ",
header::view{} header::view{}
main { main {
class: "flex-1 overflow-x-hidden overflow-y-auto bg-gray-200", class: "flex-1 overflow-x-hidden overflow-y-auto ",
div { div {
class: "container mx-auto px-6 py-8", class: "container mx-auto px-6 py-8",
slot { slot {

1
src/components/header.rs
View File

@@ -21,7 +21,6 @@ pub fn view(cx: Scope)->Element{
class: "flex items-center", class: "flex items-center",
button{ button{
class: "text-gray-500 focus:outline-none lg:hidden",// class: "text-gray-500 focus:outline-none lg:hidden",//
// @click=\"isOpen = true\"\n
onclick: move |_| { onclick: move |_| {
set_sidebar_open(true); set_sidebar_open(true);
}, },

12
src/components/sidebar.rs
View File

@@ -1,11 +1,11 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-11 18:53:17 * @Date: 2022-10-11 18:53:17
* @LastEditTime: 2022-10-16 18:01:09 * @LastEditTime: 2022-10-17 00:51:09
* @Description: * @Description:
*/ */
use dioxus::{prelude::{*}}; use dioxus::prelude::*;
use dioxus::prelude::Atom; use dioxus::prelude::Atom;
pub static IS_SIDEBAR_OPEN: Atom<bool> = |_| false; pub static IS_SIDEBAR_OPEN: Atom<bool> = |_| false;
@@ -28,7 +28,7 @@ pub fn view(cx:Scope)->Element{
cx.render(rsx!( cx.render(rsx!(
div{ div{
class:"flex", class: format_args!("flex {} lg:block bg-gray-900 ",if *is_sidebar_open { "block" } else { "hidden" }),
// mask // mask
div{ div{
onclick: move |_| { onclick: move |_| {
@@ -36,14 +36,14 @@ pub fn view(cx:Scope)->Element{
}, },
// class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden", // class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden",
class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}), class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
// hidden: format_args!("{}",!is_open), // hidden: format_args!("{}",!is_sidebar_open),
} }
div{ div{
// :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" // :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
// class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0", // class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0",
class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}", class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}",
if !*is_sidebar_open { "-translate-x-full ease-in" } else { "translate-x-0 ease-out" }), if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in" }),
// title // title
div { div {
@@ -59,7 +59,7 @@ pub fn view(cx:Scope)->Element{
} }
// menu // menu
nav{ nav{
class: "mt-10", class: "mt-10 ",//
// router-link // router-link
Link{ Link{
class: highlight_class("dashboard"), class: highlight_class("dashboard"),

4
src/views/modal.rs
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-15 09:52:14 * @Date: 2022-10-15 09:52:14
* @LastEditTime: 2022-10-15 11:24:14 * @LastEditTime: 2022-10-17 00:31:51
* @Description: * @Description:
*/ */
@@ -28,7 +28,7 @@ pub fn view(cx: Scope)->Element{
// Modal // Modal
div{ div{
class: format_args!("transition:opacity 0.25s ease {}", if !open.get(){"opacity-0 pointer-events-none"}else{"z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center"}), class: format_args!("transition:opacity 0.25s ease {} z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center", if *open.get(){"false"}else{"opacity-0 pointer-events-none"}),
// overlay // overlay
div{ div{
class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay", class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay",