Fixed mobile css, sort by local accounts

This commit is contained in:
Donald Zou 2025-07-27 02:55:13 +08:00
parent 6315112b3b
commit a9f618891b
5 changed files with 81 additions and 29 deletions

View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed} from "vue"; import {computed, onMounted} from "vue";
import LocaleText from "@/components/text/localeText.vue"; import LocaleText from "@/components/text/localeText.vue";
import {useRoute} from "vue-router";
const props = defineProps(['groupName', 'clients', 'searchString']) const props = defineProps(['groupName', 'clients', 'searchString'])
@ -16,6 +17,10 @@ const getClients = computed(() => {
(x.Name && x.Name.toLowerCase().includes(s))) (x.Name && x.Name.toLowerCase().includes(s)))
) )
}) })
const route = useRoute()
onMounted(() => {
document.querySelector(".clientList .active")?.scrollIntoView()
})
</script> </script>
<template> <template>
@ -27,10 +32,13 @@ const getClients = computed(() => {
</span> </span>
</div> </div>
<div class="card-body p-0"> <div class="card-body p-0">
<div class="list-group list-group-flush" > <div class="list-group list-group-flush clientList">
<RouterLink <RouterLink
:key="client.ClientID"
:id="'client_' + client.ClientID"
active-class="active"
:to="{ name: 'Client Viewer', params: { id: client.ClientID } }" :to="{ name: 'Client Viewer', params: { id: client.ClientID } }"
class="list-group-item d-flex flex-column border-bottom list-group-item-action" class="list-group-item d-flex flex-column border-bottom list-group-item-action client"
v-for="client in getClients" > v-for="client in getClients" >
<small class="text-body"> <small class="text-body">
{{ client.Email }} {{ client.Email }}

View File

@ -34,7 +34,12 @@ if (client.value){
<template> <template>
<div class="text-body d-flex flex-column overflow-y-scroll h-100" v-if="client" :key="client.ClientID"> <div class="text-body d-flex flex-column overflow-y-scroll h-100" v-if="client" :key="client.ClientID">
<div class="p-4 border-bottom bg-body-tertiary"> <div class="p-4 border-bottom bg-body-tertiary z-0">
<div class="mb-3 backLink">
<RouterLink to="/clients" class="text-body text-decoration-none">
<i class="bi bi-arrow-left me-2"></i>
Back</RouterLink>
</div>
<small class="text-muted"> <small class="text-muted">
<LocaleText t="Email"></LocaleText> <LocaleText t="Email"></LocaleText>
</small> </small>
@ -52,7 +57,6 @@ if (client.value){
</div> </div>
<div style="flex: 1 0 0; overflow-y: scroll;"> <div style="flex: 1 0 0; overflow-y: scroll;">
<ClientAssignedPeers <ClientAssignedPeers
@refresh="getAssignedPeers()" @refresh="getAssignedPeers()"
:clientAssignedPeers="clientAssignedPeers" :clientAssignedPeers="clientAssignedPeers"
:client="client"></ClientAssignedPeers> :client="client"></ClientAssignedPeers>
@ -73,5 +77,9 @@ if (client.value){
</template> </template>
<style scoped> <style scoped>
@media screen and (min-width: 576px) {
.backLink{
display: none;
}
}
</style> </style>

View File

@ -909,7 +909,7 @@ pre.index-alert {
} }
main{ main{
padding-bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px)); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
} }

View File

@ -2,7 +2,7 @@ import './css/dashboard.css'
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js' import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap-icons/font/bootstrap-icons.css' import 'bootstrap-icons/font/bootstrap-icons.css'
import 'animate.css/animate.compat.css' import 'animate.css/animate.css'
import '@vuepic/vue-datepicker/dist/main.css' import '@vuepic/vue-datepicker/dist/main.css'
import {createApp, markRaw} from 'vue' import {createApp, markRaw} from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'

View File

@ -1,23 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js"; import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
import LocaleText from "@/components/text/localeText.vue"; import LocaleText from "@/components/text/localeText.vue";
import {ref} from "vue"; import {computed, ref} from "vue";
const assignmentStore = DashboardClientAssignmentStore() const assignmentStore = DashboardClientAssignmentStore()
import {GetLocale} from "@/utilities/locale.js"; import {GetLocale} from "@/utilities/locale.js";
import ClientGroup from "@/components/clientComponents/clientGroup.vue"; import ClientGroup from "@/components/clientComponents/clientGroup.vue";
import { fetchGet } from "@/utilities/fetch.js" import { fetchGet } from "@/utilities/fetch.js"
import {useRoute} from "vue-router";
await assignmentStore.getClients(); await assignmentStore.getClients();
assignmentStore.getAllConfigurationsPeers(); assignmentStore.getAllConfigurationsPeers();
const searchString = ref("") const searchString = ref("")
const route = useRoute()
const oidc = computed(() => {
return Object.fromEntries(
Object.entries(assignmentStore.clients).filter(
([key, _])=>Object.keys(assignmentStore.clients).filter(x => x !== 'Local').includes(key)
)
)
})
</script> </script>
<template> <template>
<div class="text-body w-100 h-100 pb-2"> <div class="text-body w-100 h-100 pb-2">
<div class="w-100 h-100 card rounded-3"> <div class="w-100 h-100 card rounded-3">
<div class="row h-100 g-0"> <div class="border-bottom z-0">
<div class="col-sm-4 border-end d-flex flex-column">
<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;"> <div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">
<label for="searchClient"><i class="bi bi-search me-2"></i></label> <label for="searchClient"><i class="bi bi-search me-2"></i></label>
<input <input
@ -31,24 +40,51 @@ const searchString = ref("")
<LocaleText t="Settings"></LocaleText> <LocaleText t="Settings"></LocaleText>
</button> </button>
</div> </div>
</div>
<div class="row h-100 g-0">
<div
:class="{'hide': route.params.id}"
class="col-sm-4 border-end d-flex flex-column clientListContainer">
<div class="d-flex flex-column overflow-y-scroll" style="flex: 1 0 0"> <div class="d-flex flex-column overflow-y-scroll" style="flex: 1 0 0">
<ClientGroup v-for="(clients, groupName) in assignmentStore.clients" <ClientGroup :searchString="searchString"
:clients="assignmentStore.clients.Local" groupName="Local"></ClientGroup>
<ClientGroup v-for="(clients, groupName) in oidc"
:searchString="searchString" :searchString="searchString"
:clients="clients" :groupName="groupName"></ClientGroup> :clients="clients" :groupName="groupName"></ClientGroup>
</div> </div>
</div> </div>
<div class="col-sm-8"> <div
:class="{'hide': !route.params.id}"
class="col-sm-8 clientViewerContainer">
<RouterView></RouterView> <RouterView></RouterView>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@media screen and (max-width: 576px){
.clientListContainer.hide, .clientViewerContainer.hide{
display: none !important;
}
.clientListContainer{
border-right: none !important;
animation: blurIn 0.2s ease-in-out forwards;
}
.clientViewerContainer{
animation: blurIn 0.2s ease-in-out forwards;
}
}
@keyframes blurIn {
from{
filter: blur(8px);
}
to{
filter: blur(0px);
}
}
</style> </style>