mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 16:00:28 +01:00
Some UI adjustment
This commit is contained in:
parent
aa3711c5cc
commit
410b81f46f
@ -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
|
||||
|
@ -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>
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user