Trent/vigilcare-clinical
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix styling to be more responsive and clean

Browse Source
This commit is contained in:
voltsrage
2026-06-20 07:58:15 +08:00
parent 2f74e2dd8b
commit 2ca0078223
24 changed files with 398 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vigilcare-dashboard/src/components/alerts/AlertCard.vue
+3 -3
View File
@@ -34,7 +34,7 @@ function formatTime(iso) {
<template>
<Card>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
@@ -43,7 +43,7 @@ function formatTime(iso) {
<h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
{{ alertTypeLabel(alert.alertType) }}
</h3>
<p v-if="alert.details" class="mt-1 text-sm text-gray-600 dark:text-gray-400">
<p v-if="alert.details" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
{{ alert.details }}
</p>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
@@ -51,7 +51,7 @@ function formatTime(iso) {
</p>
</div>
<div v-if="showActions(alert.status)" class="flex shrink-0 gap-2">
<div v-if="showActions(alert.status)" class="flex w-full shrink-0 gap-2 sm:w-auto">
<Button
v-if="canAcknowledge(alert.status)"
size="sm"
vigilcare-dashboard/src/components/alerts/AlertFilters.vue
+15 -13
View File
@@ -10,18 +10,20 @@ const tabs = [
</script>
<template>
<div class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
<button
v-for="tab in tabs"
:key="tab.value"
type="button"
class="border-b-2 px-4 py-2 text-sm font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
:class="activeFilter === tab.value
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
@click="activeFilter = tab.value"
>
{{ tab.label }}
</button>
<div class="-mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0">
<div class="flex min-w-max gap-2 border-b border-gray-200 dark:border-gray-700 sm:min-w-0 sm:flex-wrap">
<button
v-for="tab in tabs"
:key="tab.value"
type="button"
class="shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
:class="activeFilter === tab.value
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
@click="activeFilter = tab.value"
>
{{ tab.label }}
</button>
</div>
</div>
</template>