From ef2d80507936c011079303b8a5ff072c50717fda Mon Sep 17 00:00:00 2001 From: DerEchteAlec Date: Mon, 24 Aug 2026 00:49:48 +0200 Subject: [PATCH] FIX - unify CityWarn spacing and radii (#36) Co-authored-by: Leon.Schmidt <159480018+leonw21342315@users.noreply.github.com> --- .../views/apps/CityWarnApp.contract.test.ts | 49 ++++++++++++++++++ frontend/src/views/apps/CityWarnApp.vue | 51 ++++++++++++------- 2 files changed, 83 insertions(+), 17 deletions(-) diff --git a/frontend/src/views/apps/CityWarnApp.contract.test.ts b/frontend/src/views/apps/CityWarnApp.contract.test.ts index 9321803..ba8da70 100644 --- a/frontend/src/views/apps/CityWarnApp.contract.test.ts +++ b/frontend/src/views/apps/CityWarnApp.contract.test.ts @@ -40,6 +40,10 @@ describe('CityWarn product contract', () => { }) it('reserves the pill navigation, keeps sheets safe and avoids blur flicker', () => { + expect(source).toMatch( + /\.citywarn-scroll\s*\{[^}]*min-height:\s*0;[^}]*height:\s*auto;[^}]*flex:\s*1 1 0;[^}]*overflow-y:\s*auto;/s, + ) + expect(source).not.toMatch(/\.citywarn-scroll\s*\{[^}]*height:\s*100%;/s) expect(source).toMatch( /\.citywarn-scroll\.sky-scroll-area--tabbar\s*\{[^}]*padding-bottom:\s*calc\(var\(--sky-safe-area-bottom\) \+ 84px\)/s, ) @@ -56,6 +60,51 @@ describe('CityWarn product contract', () => { expect(source).not.toContain('{{ alert.title }}') }) + it('uses one spacing and radius system throughout the current feed', () => { + expect(source).toMatch( + /\.citywarn-overview\s*\{[^}]*padding:\s*var\(--sky-space-3\);[^}]*gap:\s*var\(--sky-space-3\);[^}]*border-radius:\s*var\(--sky-radius-card\);/s, + ) + expect(source).toMatch( + /\.citywarn-overview \+ \.citywarn-feed\s*\{[^}]*margin-top:\s*var\(--sky-space-3\);[^}]*gap:\s*var\(--sky-space-3\);/s, + ) + expect(source).toMatch( + /\.citywarn-alert-card\s*\{[^}]*border-radius:\s*var\(--sky-radius-card\);/s, + ) + expect(source).toMatch( + /\.citywarn-publisher-card\s*\{[^}]*margin:\s*var\(--sky-space-3\) 0 0;[^}]*border-radius:\s*var\(--sky-radius-card\);/s, + ) + expect(source).toMatch( + /\.citywarn-publisher-card :deep\(\.sky-card__content\)\s*\{[^}]*padding:\s*var\(--sky-space-3\);[^}]*gap:\s*var\(--sky-space-3\);/s, + ) + for (const selector of [ + 'citywarn-overview-symbol', + 'citywarn-card-icon', + 'citywarn-publisher-icon', + ]) { + expect(source).toMatch( + new RegExp( + `\\.${selector}\\s*\\{[^}]*border-radius:\\s*var\\(--sky-radius-control\\);`, + 's', + ), + ) + } + }) + + it('keeps settings groups on one compact spacing rhythm', () => { + expect(source).toMatch( + /\.citywarn-settings\s*\{[^}]*gap:\s*var\(--sky-space-5\);/s, + ) + expect(source).toMatch( + /\.citywarn-settings :deep\(\.sky-settings-group\)\s*\{[^}]*margin:\s*0;/s, + ) + expect(source).toMatch( + /\.citywarn-settings :deep\(\.sky-settings-group__title\)\s*\{[^}]*margin:\s*0 var\(--sky-space-1\) var\(--sky-space-2\);/s, + ) + expect(source).toMatch( + /\.citywarn-settings :deep\(\.sky-settings-group__footer\)\s*\{[^}]*margin:\s*var\(--sky-space-2\) var\(--sky-space-1\) 0;/s, + ) + }) + it('keeps publishing authorization and validation on the server', () => { expect(server).toContain('Bridge.Framework.GetJob(source)') expect(server).toContain('SkyPhone.RequireSession(source)') diff --git a/frontend/src/views/apps/CityWarnApp.vue b/frontend/src/views/apps/CityWarnApp.vue index f69a705..3a014b2 100644 --- a/frontend/src/views/apps/CityWarnApp.vue +++ b/frontend/src/views/apps/CityWarnApp.vue @@ -1026,7 +1026,9 @@ onMounted(async () => { height: 18px; } .citywarn-scroll { - height: 100%; + min-height: 0; + height: auto; + flex: 1 1 0; padding: 12px 13px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; } @@ -1045,11 +1047,11 @@ onMounted(async () => { } .citywarn-overview { display: flex; - padding: 15px; + padding: var(--sky-space-3); align-items: center; - gap: 12px; + gap: var(--sky-space-3); border: 1px solid #bbf7d0; - border-radius: 18px; + border-radius: var(--sky-radius-card); background: linear-gradient(135deg, #f0fdf4, #ecfdf5); } .citywarn-overview--active { @@ -1062,7 +1064,7 @@ onMounted(async () => { height: 46px; flex: 0 0 auto; place-items: center; - border-radius: 15px; + border-radius: var(--sky-radius-control); color: #15803d; background: #dcfce7; } @@ -1086,12 +1088,17 @@ onMounted(async () => { flex-direction: column; gap: 10px; } +.citywarn-overview + .citywarn-feed { + margin-top: var(--sky-space-3); + gap: var(--sky-space-3); +} .citywarn-alert-card { position: relative; - padding: 13px 13px 12px 17px; + padding: var(--sky-space-3) var(--sky-space-3) var(--sky-space-3) + var(--sky-space-4); overflow: hidden; border: 1px solid #e5e7eb; - border-radius: 17px; + border-radius: var(--sky-radius-card); background: #fff; box-shadow: 0 4px 15px rgb(15 23 42 / 5%); cursor: pointer; @@ -1115,7 +1122,7 @@ onMounted(async () => { width: 32px; height: 32px; place-items: center; - border-radius: 10px; + border-radius: var(--sky-radius-control); color: var(--severity); background: color-mix(in srgb, var(--severity) 12%, white); } @@ -1139,7 +1146,7 @@ onMounted(async () => { color: #9ca3af; } .citywarn-alert-card h3 { - margin: 10px 0 5px; + margin: var(--sky-space-2) 0 var(--sky-space-1); font-size: 16px; line-height: 1.18; } @@ -1155,10 +1162,10 @@ onMounted(async () => { } .citywarn-alert-card footer { display: flex; - margin-top: 11px; + margin-top: var(--sky-space-2); align-items: center; justify-content: space-between; - gap: 8px; + gap: var(--sky-space-2); color: #6b7280; font-size: 10.5px; } @@ -1172,12 +1179,13 @@ onMounted(async () => { white-space: nowrap; } .citywarn-publisher-card { - margin-top: 12px; + margin: var(--sky-space-3) 0 0; + border-radius: var(--sky-radius-card); } .citywarn-publisher-card :deep(.sky-card__content) { display: flex; - padding: 12px; - gap: 10px; + padding: var(--sky-space-3); + gap: var(--sky-space-3); } .citywarn-publisher-icon { display: grid; @@ -1185,7 +1193,7 @@ onMounted(async () => { height: 36px; flex: 0 0 auto; place-items: center; - border-radius: 11px; + border-radius: var(--sky-radius-control); color: #1d4ed8; background: #dbeafe; } @@ -1523,11 +1531,20 @@ onMounted(async () => { .citywarn-settings { display: flex; flex-direction: column; - gap: 15px; + gap: var(--sky-space-5); +} +.citywarn-settings :deep(.sky-settings-group) { + margin: 0; +} +.citywarn-settings :deep(.sky-settings-group__title) { + margin: 0 var(--sky-space-1) var(--sky-space-2); +} +.citywarn-settings :deep(.sky-settings-group__footer) { + margin: var(--sky-space-2) var(--sky-space-1) 0; } .citywarn-settings-hint { display: flex; - margin: 0 8px; + margin: 0 var(--sky-space-1); align-items: flex-start; gap: 7px; color: #6b7280;