starred/sky_phone-sky-systems
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-08-28 22:01:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX - unify CityWarn spacing and scrolling

Browse Source
This commit is contained in:
Alec Schitzkat
2026-08-24 00:47:08 +02:00
parent 9efd92e6b6
commit 4809931ec9
2 changed files with 83 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/apps/CityWarnApp.contract.test.ts
+49
View File
@@ -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('<span>{{ alert.title }}</span>')
})
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)')
frontend/src/views/apps/CityWarnApp.vue
+34 -17
View File
@@ -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;