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
/logs
.stage

8
dist/index.html vendored
View File

@@ -3,17 +3,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<link rel="preload" href="/r-dashboard-afab67e69775a76a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/r-dashboard-afab67e69775a76a.js"></head>
<link rel="preload" href="/r-dashboard-436bab45f7450582_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/r-dashboard-436bab45f7450582.js"></head>
<body>
<div id="main"></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 url = protocol + '//' + window.location.host + '/_trunk/ws';
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) {
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);
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);
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);
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);
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);
return addHeapObject(ret);
};
@@ -1080,7 +1080,7 @@ function initSync(module) {
async function init(input) {
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();

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
*/
@@ -1009,6 +1011,10 @@ select {
height: 1rem;
}
.w-full{
width: 100%;
}
.w-32{
width: 8rem;
}
@@ -1017,10 +1023,6 @@ select {
width: 2rem;
}
.w-full {
width: 100%;
}
.w-48{
width: 12rem;
}
@@ -1296,16 +1298,16 @@ select {
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{
--tw-bg-opacity: 1;
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{
--tw-bg-opacity: 1;
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);
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track{
background: #2D3748;
}
::-webkit-scrollbar-thumb{
background: #CBD5E0;
}
::-webkit-scrollbar-thumb:hover{
background: #718096;
}
.btn{
border-radius: 0.5rem;
padding-top: 0.5rem;
@@ -2070,6 +2088,10 @@ select {
margin-right: -2rem;
}
.lg\:block{
display: block;
}
.lg\: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 components;
@tailwind utilities;
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track{
background: #2D3748;
}
::-webkit-scrollbar-thumb{
background: #CBD5E0;
}
::-webkit-scrollbar-thumb:hover{
background: #718096;
}
.btn {
@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 name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>

10
src/app.rs
View File

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

1
src/components/header.rs
View File

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

12
src/components/sidebar.rs
View File

@@ -1,11 +1,11 @@
/*
* @Author: plucky
* @Date: 2022-10-11 18:53:17
* @LastEditTime: 2022-10-16 18:01:09
* @LastEditTime: 2022-10-17 00:51:09
* @Description:
*/
use dioxus::{prelude::{*}};
use dioxus::prelude::*;
use dioxus::prelude::Atom;
pub static IS_SIDEBAR_OPEN: Atom<bool> = |_| false;
@@ -28,7 +28,7 @@ pub fn view(cx:Scope)->Element{
cx.render(rsx!(
div{
class:"flex",
class: format_args!("flex {} lg:block bg-gray-900 ",if *is_sidebar_open { "block" } else { "hidden" }),
// mask
div{
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: 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{
// :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: 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
div {
@@ -59,7 +59,7 @@ pub fn view(cx:Scope)->Element{
}
// menu
nav{
class: "mt-10",
class: "mt-10 ",//
// router-link
Link{
class: highlight_class("dashboard"),

4
src/views/modal.rs
View File

@@ -1,7 +1,7 @@
/*
* @Author: plucky
* @Date: 2022-10-15 09:52:14
* @LastEditTime: 2022-10-15 11:24:14
* @LastEditTime: 2022-10-17 00:31:51
* @Description:
*/
@@ -28,7 +28,7 @@ pub fn view(cx: Scope)->Element{
// Modal
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
div{
class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay",