flfeders/FEDEO
2
1
Fork 0
Code Issues 95 Pull Requests Actions Packages Projects 22 Releases Wiki Activity

KI-AGENT: Scrollen auf Kommunikationsseite ermöglichen

Browse Source
This commit is contained in:
florianfederspiel
2026-05-18 17:35:10 +02:00
parent 30b6ffcc20
commit 5fca7792a2
1 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/pages/communication/index.vue
View File

@@ -203,58 +203,59 @@ onMounted(loadMatrixInfo)
</script> </script>
<template> <template>
<div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6"> <div class="min-h-0 flex-1 overflow-y-auto">
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"> <div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
<div> <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<h1 class="text-2xl font-semibold text-highlighted"> <div>
Kommunikation <h1 class="text-2xl font-semibold text-highlighted">
</h1> Kommunikation
<p class="mt-1 text-sm text-muted"> </h1>
Matrix-Verbindung und persönliche Kommunikationsidentität. <p class="mt-1 text-sm text-muted">
</p> Matrix-Verbindung und persönliche Kommunikationsidentität.
</p>
</div>
<UButton
icon="i-heroicons-arrow-path"
color="neutral"
variant="outline"
:loading="loading"
@click="loadMatrixInfo"
>
Aktualisieren
</UButton>
</div> </div>
<UButton <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
icon="i-heroicons-arrow-path" <UCard
color="neutral" v-for="item in statusItems"
variant="outline" :key="item.label"
:loading="loading" :ui="{ root: 'rounded-lg', body: 'p-4 sm:p-4' }"
@click="loadMatrixInfo" >
> <div class="flex items-start gap-3">
Aktualisieren <UIcon
</UButton> :name="item.icon"
</div> class="mt-0.5 size-5 shrink-0"
:class="{
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<UCard
v-for="item in statusItems"
:key="item.label"
:ui="{ root: 'rounded-lg', body: 'p-4 sm:p-4' }"
>
<div class="flex items-start gap-3">
<UIcon
:name="item.icon"
class="mt-0.5 size-5 shrink-0"
:class="{
'text-success': item.color === 'success', 'text-success': item.color === 'success',
'text-error': item.color === 'error', 'text-error': item.color === 'error',
'text-warning': item.color === 'warning', 'text-warning': item.color === 'warning',
'text-muted': item.color === 'neutral' 'text-muted': item.color === 'neutral'
}" }"
/> />
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs font-medium uppercase text-muted"> <p class="text-xs font-medium uppercase text-muted">
{{ item.label }} {{ item.label }}
</p> </p>
<p class="mt-1 break-words text-sm font-medium text-highlighted"> <p class="mt-1 break-words text-sm font-medium text-highlighted">
{{ item.value }} {{ item.value }}
</p> </p>
</div>
</div> </div>
</div> </UCard>
</UCard> </div>
</div>
<div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]"> <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
<div class="space-y-4"> <div class="space-y-4">
<UCard :ui="{ root: 'rounded-lg' }"> <UCard :ui="{ root: 'rounded-lg' }">
<template #header> <template #header>
@@ -491,9 +492,9 @@ onMounted(loadMatrixInfo)
</div> </div>
</div> </div>
</UCard> </UCard>
</div> </div>
<UCard :ui="{ root: 'rounded-lg overflow-hidden', body: 'p-0 sm:p-0' }"> <UCard :ui="{ root: 'rounded-lg overflow-hidden', body: 'p-0 sm:p-0' }">
<template #header> <template #header>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="flex min-w-0 items-center gap-2"> <div class="flex min-w-0 items-center gap-2">
@@ -529,6 +530,7 @@ onMounted(loadMatrixInfo)
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-presentation" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-presentation"
/> />
</div> </div>
</UCard> </UCard>
</div>
</div> </div>
</template> </template>