-
-
mdi-bullhorn
- NOMOR ANTRIAN YANG DIPANGGIL
+
+
+
+ mdi-bullhorn
+ NOMOR ANTRIAN YANG DIPANGGIL
+
+
{{ currentCalledQueue.noAntrian.split(' |')[0] }}
+
+ {{ currentCalledQueue.klinik === currentCalledQueue.ruang ? currentCalledQueue.ruang : `${currentCalledQueue.klinik} - ${currentCalledQueue.ruang}` }}
+
{{ currentCalledQueue.noAntrian.split(' |')[0] }}
- {{ currentCalledQueue.klinik }} - {{ currentCalledQueue.ruang }}
-
+
@@ -46,7 +50,9 @@
>
-
{{ statistics.waiting }}
+
{{ statistics.anjungan }}
Menunggu
@@ -640,7 +646,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
background: var(--color-neutral-300);
width: 100vw;
height: 100dvh;
- padding: 12px;
+ padding: 16px; /* Match AntrianLoket */
font-family: 'Inter', 'Roboto', sans-serif;
overflow: hidden;
display: flex;
@@ -654,8 +660,8 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
- border-radius: 16px;
- padding: 12px 32px;
+ border-radius: 12px;
+ padding: clamp(12px, 1.2vw, 18px) clamp(16px, 2vw, 24px); /* Match AntrianLoket */
margin-bottom: 12px;
box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3);
flex-shrink: 0;
@@ -715,6 +721,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
letter-spacing: 2px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -729,12 +736,15 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
.hero-call-section {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
border-radius: 20px;
- padding: 24px 32px;
- margin-bottom: 12px;
+ padding: clamp(16px, 2vh, 32px);
+ margin-bottom: clamp(8px, 1.2vh, 16px);
text-align: center;
box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35);
animation: pulse-highlight 2s ease-in-out infinite;
flex-shrink: 0;
+ max-height: 40vh;
+ overflow: hidden;
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-call-section.is-compact {
@@ -769,32 +779,68 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
}
.call-number {
- font-size: 140px;
+ font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
- margin: 16px 0;
- letter-spacing: 8px;
+ margin: clamp(8px, 1vh, 16px) 0;
+ letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.call-clinic {
- font-size: 36px;
+ font-size: clamp(20px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
}
+/* Transition for Hero Section */
+.hero-fade-enter-active,
+.hero-fade-leave-active {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+ max-height: 40vh;
+ opacity: 1;
+ margin-bottom: clamp(8px, 1.2vh, 16px);
+}
+
+.hero-fade-enter-from,
+.hero-fade-leave-to {
+ max-height: 0;
+ opacity: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ transform: translateY(-20px);
+}
+
/* ========== CLINICS GRID ========== */
.clinics-grid {
display: grid;
/* grid-template-columns set via inline style */
- gap: 16px;
- margin-bottom: 16px;
+ gap: clamp(8px, 1.2vw, 16px);
+ margin-bottom: clamp(12px, 1.5vh, 20px);
flex: 1;
min-height: 0;
- overflow: hidden;
+ overflow-y: auto;
+ padding: 0; /* Remove asymmetric padding to match AntrianLoket */
+
+ /* Custom scrollbar for premium look */
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: rgba(33, 150, 243, 0.3);
+ border-radius: 10px;
+ }
+ &::-webkit-scrollbar-thumb:hover {
+ background: rgba(33, 150, 243, 0.5);
+ }
}
.clinics-grid.is-compact {
@@ -809,6 +855,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
display: flex;
flex-direction: column;
+ min-height: 200px; /* Prevent shrinking too much */
}
.clinic-box.is-compact {
@@ -948,6 +995,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
letter-spacing: 4px;
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.clinic-box.is-compact .current-number {
@@ -960,7 +1008,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
background: var(--color-neutral-100);
border: 2px solid var(--color-primary-200);
border-radius: 16px;
- padding: 12px 40px;
+ padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2.5vw, 40px); /* Responsive padding */
display: flex;
align-items: center;
gap: 32px;
@@ -999,6 +1047,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
color: var(--color-neutral-900);
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
diff --git a/pages/Anjungan/AntrianKlinikRuang/index.vue b/pages/Anjungan/AntrianKlinikRuang/index.vue
index e5faa73..5ff77d8 100644
--- a/pages/Anjungan/AntrianKlinikRuang/index.vue
+++ b/pages/Anjungan/AntrianKlinikRuang/index.vue
@@ -226,40 +226,44 @@ onMounted(async () => {
.kliniks-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
- gap: 20px;
+ grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 20vw, 400px), 1fr));
+ gap: clamp(16px, 2vw, 24px);
width: 100%;
margin: 0;
+ align-items: stretch;
}
-@media (max-width: 1280px) {
+@media (max-width: 1440px) {
.kliniks-grid {
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
-@media (max-width: 960px) {
+@media (max-width: 1024px) {
.kliniks-grid {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
.klinik-card {
background: var(--color-neutral-100);
- border-radius: 16px;
- padding: 24px;
+ border-radius: 20px;
+ padding: clamp(16px, 2vw, 24px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 2px solid var(--color-neutral-400);
cursor: pointer;
- transition: all 0.3s ease;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 16px;
+ min-height: 280px; /* Ensure enough height for content */
+ height: 100%;
&:hover {
- transform: translateY(-4px);
- box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2);
+ transform: translateY(-8px);
+ box-shadow: 0 12px 24px rgba(33, 150, 243, 0.2);
border-color: var(--color-primary-600);
+ z-index: 2;
}
}
@@ -267,8 +271,9 @@ onMounted(async () => {
display: flex;
align-items: center;
gap: 16px;
- padding-bottom: 16px;
+ padding-bottom: clamp(12px, 1.5vw, 16px);
border-bottom: 2px solid var(--color-neutral-400);
+ flex-shrink: 0;
}
.klinik-info {
diff --git a/pages/Anjungan/AntrianLoket/[id].vue b/pages/Anjungan/AntrianLoket/[id].vue
index bd223d6..fd95447 100644
--- a/pages/Anjungan/AntrianLoket/[id].vue
+++ b/pages/Anjungan/AntrianLoket/[id].vue
@@ -29,21 +29,22 @@
-
-
- mdi-bullhorn
- SEDANG DIPANGGIL
-
-
{{ currentCalledQueue.noAntrian.split(' |')[0] }}
-
{{ currentCalledQueue.klinik || 'Klinik' }}
-
-
mdi-timer
-
{{ currentMultipleCallsTimer }}
+
+
+
+
+ mdi-bullhorn
+ SEDANG DIPANGGIL
+
+
{{ currentCalledQueue.noAntrian.split(' |')[0] }}
+
{{ currentCalledQueue.klinik || 'Klinik' }}
+
+ mdi-timer
+ {{ currentMultipleCallsTimer }}
+
+
@@ -1100,6 +1101,7 @@ onUnmounted(() => {
letter-spacing: 1.5px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -1114,9 +1116,12 @@ onUnmounted(() => {
.hero-main-section {
display: flex;
gap: 16px;
- margin: clamp(10px, 1.5vh, 20px) 0;
+ margin: clamp(8px, 1.2vh, 16px) 0;
align-items: flex-start;
flex-shrink: 0;
+ overflow: hidden;
+ max-height: 40vh; /* Limit hero size to prevent pushing grid too far */
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========== HERO CALL SECTION (LARGE) ========== */
@@ -1143,18 +1148,18 @@ onUnmounted(() => {
}
.call-number {
- font-size: 140px;
+ font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
- margin: 16px 0;
- letter-spacing: 8px;
+ margin: clamp(8px, 1vh, 16px) 0;
+ letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
}
.call-klinik {
- font-size: 36px;
+ font-size: clamp(24px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
@@ -1173,6 +1178,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
+ font-variant-numeric: tabular-nums; /* Stable timer digits */
}
/* ========== NEXT TICKETS SECTION ========== */
@@ -1263,6 +1269,7 @@ onUnmounted(() => {
letter-spacing: 2px;
margin-bottom: 8px;
line-height: 1;
+ font-variant-numeric: tabular-nums; /* Stable ticket numbers */
}
.next-ticket-klinik {
@@ -1288,6 +1295,7 @@ onUnmounted(() => {
font-weight: 700;
color: var(--color-warning-700);
margin-top: 6px;
+ font-variant-numeric: tabular-nums; /* Stable timer digits */
}
@@ -1313,11 +1321,11 @@ onUnmounted(() => {
}
.call-number {
- font-size: 140px;
+ font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
- margin: 16px 0;
- letter-spacing: 8px;
+ margin: clamp(8px, 1vh, 16px) 0;
+ letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
@@ -1333,12 +1341,30 @@ onUnmounted(() => {
}
.call-loket {
- font-size: 36px;
+ font-size: clamp(24px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
}
+/* Transition for Hero Section */
+.hero-fade-enter-active,
+.hero-fade-leave-active {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+ max-height: 40vh;
+ opacity: 1;
+ margin: clamp(8px, 1.2vh, 16px) 0;
+}
+
+.hero-fade-enter-from,
+.hero-fade-leave-to {
+ max-height: 0;
+ opacity: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ transform: translateY(-20px);
+}
+
/* ========== KLINIKS GRID ========== */
.kliniks-grid {
display: grid;
@@ -1436,6 +1462,7 @@ onUnmounted(() => {
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
+ font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
color: var(--color-danger-600);
@@ -1475,6 +1502,7 @@ onUnmounted(() => {
color: var(--color-warning-800);
transition: all 0.3s ease;
white-space: nowrap;
+ font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
border-color: var(--color-danger-500);
@@ -1592,6 +1620,7 @@ onUnmounted(() => {
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
+ font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
color: var(--color-danger-600);
@@ -1674,6 +1703,7 @@ onUnmounted(() => {
color: var(--color-neutral-900);
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
diff --git a/pages/Anjungan/AntrianPenunjang.vue b/pages/Anjungan/AntrianPenunjang.vue
index 4aed028..a951e03 100644
--- a/pages/Anjungan/AntrianPenunjang.vue
+++ b/pages/Anjungan/AntrianPenunjang.vue
@@ -304,6 +304,7 @@ onUnmounted(() => {
color: #FFFFFF;
line-height: 1;
letter-spacing: 2px;
+ font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -343,6 +344,7 @@ onUnmounted(() => {
margin: 16px 0;
letter-spacing: 4px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.call-clinic {
@@ -436,6 +438,7 @@ onUnmounted(() => {
color: #212121;
line-height: 1;
letter-spacing: 2px;
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.next-section {
@@ -466,6 +469,7 @@ onUnmounted(() => {
font-weight: 700;
box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
letter-spacing: 1px;
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.empty-state {
@@ -511,6 +515,7 @@ onUnmounted(() => {
font-weight: 900;
color: #212121;
line-height: 1;
+ font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {