kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Some UI adjustment

Browse Source
This commit is contained in:
Donald Zou 2024-08-09 22:16:38 -04:00
parent aa3711c5cc
commit 410b81f46f
5 changed files with 24 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dashboard.py
View File

@ -799,7 +799,7 @@ class WireguardConfiguration:
sqldb.cursor().execute(
"UPDATE %s SET cumu_receive = ?, cumu_sent = ?, cumu_data = ? WHERE id = ?" %
self.Name, (cumulative_receive, cumulative_sent,
rcumulative_sent + cumulative_receive,
cumulative_sent + cumulative_receive,
data_usage[i][0],))
total_sent = 0
total_receive = 0

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

@ -12,7 +12,7 @@ const store = DashboardConfigurationStore();
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="fade2" mode="out-in">
<Transition name="app" mode="out-in">
<Component :is="Component"></Component>
</Transition>
</RouterView>
@ -22,14 +22,16 @@ const store = DashboardConfigurationStore();
<style scoped>
.app-enter-active,
.app-leave-active {
transition: all 0.3s ease-in-out;
/*position: absolute;*/
/*padding-top: 50px*/
transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 0.9);
}
.app-enter-from{
transform: translateY(20px);
opacity: 0;
}
.app-enter-from,
.app-leave-to {
transform: translateX(-30px);
transform: translateY(-20px);
opacity: 0;
}
</style>

13
src/static/app/src/components/configurationComponents/peerSearch.vue
View File

@ -93,9 +93,8 @@ export default {
@click="this.downloadAllPeer()">
<i class="bi bi-download me-2"></i> Download All
</button>
<div class="d-flex align-items-center ms-auto">
<!-- <label class="d-flex me-2 text-muted" for="searchPeers"><i class="bi bi-search me-1"></i></label>-->
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm"
<div class="flex-grow-1">
<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
placeholder="Search..."
id="searchPeers"
@keyup="this.debounce()"
@ -131,14 +130,6 @@ export default {
</li>
</ul>
</div>
<!-- <div class="dropdown">-->
<!-- <button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"-->
<!-- type="button" data-bs-toggle="dropdown" aria-expanded="false">-->
<!-- <i class="bi bi-arrow-repeat me-2"></i>Refresh Interval-->
<!-- </button>-->
<!-- -->
<!-- </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">

4
src/static/app/src/components/navbar.vue
View File

@ -57,8 +57,8 @@ export default {
</li>
</ul>
<hr class="text-body">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link text-danger"
<ul class="nav flex-column px-2">
<li class="nav-item"><a class="nav-link text-danger rounded-3"
@click="this.dashboardConfigurationStore.signOut()"
role="button" style="font-weight: bold">
<i class="bi bi-box-arrow-left me-2"></i>

23
src/static/app/src/views/signin.vue
View File

@ -84,12 +84,11 @@ export default {
<template>
<div class="container-fluid login-container-fluid d-flex main flex-column" :data-bs-theme="this.theme">
<div class="login-box m-auto" style="width: 600px;">
<div class="m-auto">
<div class="card px-4 py-5 rounded-4 shadow-lg">
<div class="card-body">
<h4 class="mb-0 text-body">Welcome to</h4>
<span class="dashboardLogo display-3">WGDashboard</span>
<span class="dashboardLogo display-3"><strong>WGDashboard</strong></span>
<div class="alert alert-danger mt-2 mb-0" role="alert" v-if="loginError">
{{this.loginErrorMessage}}
</div>
@ -117,16 +116,16 @@ export default {
v-model="this.totp"
>
</div>
<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand shadow signInBtn" ref="signInBtn">
<span v-if="!this.loading" class="d-flex w-100">
Sign In<i class="ms-auto bi bi-chevron-right"></i>
</span>
<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn">
<span v-if="!this.loading" class="d-flex w-100">
Sign In<i class="ms-auto bi bi-chevron-right"></i>
</span>
<span v-else class="d-flex w-100 align-items-center">
Signing In...
<span class="spinner-border ms-auto spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</span>
Signing In...
<span class="spinner-border ms-auto spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</span>
</button>
</form>
</div>
@ -137,7 +136,7 @@ export default {
WGDashboard v4.0 | Developed with ❤️ by
<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
</small>
<div class="messageCentre text-body position-absolute end-0 margin-3">
<div class="messageCentre text-body position-absolute end-0 m-3">
<TransitionGroup name="message" tag="div" class="position-relative">
<Message v-for="m in getMessages.slice().reverse()"
:message="m" :key="m.id"></Message>