1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 07:50:13 +01:00

Some UI adjustment

This commit is contained in:
Donald Zou 2024-08-14 14:35:49 -04:00
parent bd7139827b
commit 0c8bb990d0
8 changed files with 46 additions and 38 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"build electron": "vite build --mode electron && cd ../../../../WGDashboard-Desktop && electron-builder",
"build electron": "vite build && vite build --mode electron && cd ../../../../WGDashboard-Desktop && electron-builder",
"preview": "vite preview"
},
"dependencies": {

View File

@ -25,7 +25,7 @@ const getActiveCrossServer = computed(() => {
</script>
<template>
<nav class="navbar bg-dark sticky-top border-bottom border-secondary-subtle" data-bs-theme="dark">
<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
<div class="container-fluid d-flex text-body align-items-center">
<span class="navbar-brand mb-0 h1">WGDashboard</span>
<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined">

View File

@ -83,7 +83,7 @@ export default {
<template>
<div class="mb-3">
<div class="d-flex gap-2 z-3">
<div class="d-flex gap-2 z-3 peerSearchContainer">
<RouterLink
to="create"
class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
@ -100,6 +100,10 @@ export default {
@keyup="this.debounce()"
v-model="this.searchString">
</div>
<div class="">
</div>
<div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
@ -174,6 +178,11 @@ export default {
filter: blur(0px);
transform: translateY(-40px);
}
}
@media screen and (max-width: 768px) {
.peerSearchContainer{
flex-direction: column;
}
}
</style>

View File

@ -52,23 +52,23 @@ export default {
</h6>
</RouterLink>
<div class="card-footer d-flex gap-2 flex-column">
<div class="d-flex gap-4">
<small >
<div class="row">
<small class="col-6 col-md-3">
<i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
</small>
<small class="text-primary-emphasis">
<small class="text-primary-emphasis col-6 col-md-3">
<i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
</small>
<small class="text-success-emphasis">
<small class="text-success-emphasis col-6 col-md-3">
<i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
</small>
<small class="ms-auto">
<small class="text-md-end col-6 col-md-3">
<span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
</small>
</div>
<div class="d-flex align-items-center">
<small class="me-2 text-muted">
<strong>Public Key</strong>
<div class="d-flex align-items-center gap-2">
<small class="text-muted">
<strong style="word-break: keep-all">Public Key</strong>
</small>
<small class="mb-0 d-block d-lg-inline-block ">
<samp style="line-break: anywhere">{{c.PublicKey}}</samp>

View File

@ -21,10 +21,9 @@ const getUrl = (url) => {
}
console.log("URL fetching: ", import.meta.env.MODE === 'development' ? url
: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`)
: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`)
return import.meta.env.MODE === 'development' ? url
: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`
: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`
}
export const fetchGet = async (url, params=undefined, callback=undefined) => {

View File

@ -24,7 +24,7 @@ export default {
<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
<div class="row h-100">
<Navbar></Navbar>
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0" style="height: calc(100vh - 50px)">
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0" style="height: calc(100vh - 50px)">
<Suspense>
<RouterView v-slot="{Component}">
<Transition name="fade2" mode="out-in">