kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 15:20:09 +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": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "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" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {

2
src/static/app/src/App.vue
View File

@ -25,7 +25,7 @@ const getActiveCrossServer = computed(() => {
</script> </script>
<template> <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"> <div class="container-fluid d-flex text-body align-items-center">
<span class="navbar-brand mb-0 h1">WGDashboard</span> <span class="navbar-brand mb-0 h1">WGDashboard</span>
<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined"> <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> <template>
<div class="mb-3"> <div class="mb-3">
<div class="d-flex gap-2 z-3"> <div class="d-flex gap-2 z-3 peerSearchContainer">
<RouterLink <RouterLink
to="create" to="create"
class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"> 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()" @keyup="this.debounce()"
v-model="this.searchString"> v-model="this.searchString">
</div> </div>
<div class="">
</div>
<div class="dropdown dropup"> <div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm" <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"> type="button" data-bs-toggle="dropdown" aria-expanded="false">
@ -174,6 +178,11 @@ export default {
filter: blur(0px); filter: blur(0px);
transform: translateY(-40px); transform: translateY(-40px);
} }
}
@media screen and (max-width: 768px) {
.peerSearchContainer{
flex-direction: column;
}
} }
</style> </style>

16
src/static/app/src/components/configurationListComponents/configurationCard.vue
View File

@ -52,23 +52,23 @@ export default {
</h6> </h6>
</RouterLink> </RouterLink>
<div class="card-footer d-flex gap-2 flex-column"> <div class="card-footer d-flex gap-2 flex-column">
<div class="d-flex gap-4"> <div class="row">
<small > <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 <i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
</small> </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 <i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
</small> </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 <i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
</small> </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 <span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
</small> </small>
</div> </div>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center gap-2">
<small class="me-2 text-muted"> <small class="text-muted">
<strong>Public Key</strong> <strong style="word-break: keep-all">Public Key</strong>
</small> </small>
<small class="mb-0 d-block d-lg-inline-block "> <small class="mb-0 d-block d-lg-inline-block ">
<samp style="line-break: anywhere">{{c.PublicKey}}</samp> <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 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 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) => { export const fetchGet = async (url, params=undefined, callback=undefined) => {