Update some UI to handle Wireguard and AWG

This commit is contained in:
Donald Zou
2024-12-02 17:36:37 +08:00
parent da53bd44d1
commit 807bb97b6a
3 changed files with 189 additions and 29 deletions

View File

@@ -49,7 +49,17 @@ export default {
<div class="card conf_card rounded-3 shadow text-decoration-none">
<RouterLink :to="'/configuration/' + c.Name + '/peers'" class="card-body d-flex align-items-center gap-3 flex-wrap text-decoration-none">
<h6 class="mb-0"><span class="dot" :class="{active: c.Status}"></span></h6>
<h6 class="card-title mb-0"><samp>{{c.Name}}</samp></h6>
<h6 class="card-title mb-0 d-flex align-items-center gap-3">
<samp>{{c.Name}}</samp>
<small>
<span class="badge wireguardBg" v-if="c.Protocol === 'wg'">
WireGuard
</span>
<span class="badge amneziawgBg" v-else>
AmneziaWG
</span>
</small>
</h6>
<h6 class="mb-0 ms-auto">
<i class="bi bi-chevron-right"></i>
</h6>

View File

@@ -1257,4 +1257,15 @@ pre.index-alert {
samp{
word-wrap: anywhere;
}
.amneziawgBg{
background: rgb(145,199,193);
background: linear-gradient(90deg, rgba(145,199,193,1) 0%, rgba(107,95,161,1) 50%, rgba(227,142,65,1) 100%);
}
.wireguardBg{
background: rgb(125,32,32);
background: linear-gradient(90deg, rgba(125,32,32,1) 0%, rgba(255,56,56,1) 100%);
}