KI-AGENT: Scrollen auf Kommunikationsseite ermöglichen
This commit is contained in:
@@ -203,58 +203,59 @@ onMounted(loadMatrixInfo)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-highlighted">
|
||||
Kommunikation
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-muted">
|
||||
Matrix-Verbindung und persönliche Kommunikationsidentität.
|
||||
</p>
|
||||
<div class="min-h-0 flex-1 overflow-y-auto">
|
||||
<div class="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-highlighted">
|
||||
Kommunikation
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-muted">
|
||||
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>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:loading="loading"
|
||||
@click="loadMatrixInfo"
|
||||
>
|
||||
Aktualisieren
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<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="{
|
||||
<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-error': item.color === 'error',
|
||||
'text-warning': item.color === 'warning',
|
||||
'text-muted': item.color === 'neutral'
|
||||
}"
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-medium uppercase text-muted">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
<p class="mt-1 break-words text-sm font-medium text-highlighted">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-medium uppercase text-muted">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
<p class="mt-1 break-words text-sm font-medium text-highlighted">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
</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">
|
||||
<UCard :ui="{ root: 'rounded-lg' }">
|
||||
<template #header>
|
||||
@@ -491,9 +492,9 @@ onMounted(loadMatrixInfo)
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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">
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user