kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00
Code

Some UI adjustment

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/static/app/dist/assets/index.css vendored
View File

File diff suppressed because one or more lines are too long

40
src/static/app/dist/assets/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/static/app/package.json
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": {

2
src/static/app/src/App.vue
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">

11
src/static/app/src/components/configurationComponents/peerSearch.vue
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>

16
src/static/app/src/components/configurationListComponents/configurationCard.vue
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>

5
src/static/app/src/utilities/fetch.js
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) => {

2
src/static/app/src/views/index.vue
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">