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

FIX - refine SkyRide navigation and trip layout (#35)

Browse Source 
Co-authored-by: Leon.Schmidt <159480018+leonw21342315@users.noreply.github.com>
This commit is contained in:
DerEchteAlec
2026-08-23 22:09:47 +02:00
committed by GitHub
parent b673b15b97
commit 7ca39ef4b9
2 changed files with 93 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/apps/SkyRideApp.contract.test.ts
+46
View File
@@ -32,6 +32,52 @@ describe('SkyRide app layout', () => {
)
})
it('scrolls Ride and Drive away without full-width nav backgrounds', () => {
expect(source).toMatch(
/\.skyride-navbar :deep\(\.sky-navbar__blur\),\s*\.skyride-navbar :deep\(\.sky-navbar__background\)\s*\{[^}]*display:\s*none;/s,
)
expect(source).toMatch(
/<div class="skyride-scroll">\s*<div class="skyride-mode">/s,
)
expect(source).toMatch(
/\.skyride-scroll\s*\{[^}]*box-sizing:\s*border-box;[^}]*inset:\s*114px 0 0;[^}]*padding:\s*0 0 116px;/s,
)
expect(source).toMatch(
/\.skyride-tabbar :deep\(\.sky-tabbar__blur\),\s*\.skyride-tabbar :deep\(\.sky-tabbar__background\)\s*\{[^}]*display:\s*none;/s,
)
expect(source).not.toMatch(
/\.skyride-tabbar :deep\(\.sky-tabbar__pane\)\s*\{\s*border:/s,
)
})
it('keeps active-ride card spacing even and outline actions contrasted', () => {
expect(source).toMatch(
/\.skyride-ride-status-card\s*\{[^}]*margin-bottom:\s*12px;/s,
)
expect(source).toMatch(
/\.skyride-person-card\s*\{[^}]*margin-bottom:\s*12px;/s,
)
expect(source).toMatch(
/\.skyride-trip-card\s*\{[^}]*margin-bottom:\s*12px;/s,
)
expect(source).toContain('.sky-button--primary:not(.sky-button--outline)')
expect(source).not.toMatch(
/\.skyride-app :deep\(\.sky-button--primary\)\s*\{/,
)
})
it('aligns pickup and destination text to one timeline axis', () => {
expect(source).toMatch(
/\.skyride-route-stop\s*\{[^}]*grid-template-columns:\s*18px minmax\(0, 1fr\);/s,
)
expect(source).toMatch(
/\.skyride-route-stop > \.skyride-dot\s*\{[^}]*justify-self:\s*center;/s,
)
expect(source).toMatch(
/\.skyride-trip-card > i\s*\{[^}]*margin:\s*1px 0 1px 8px;/s,
)
})
it('uses a compact swipeable profile editor with equal actions', () => {
expect(source).toContain('class="skyride-profile-sheet"')
expect(source).toContain('swipe-to-close')
frontend/src/views/apps/SkyRideApp.vue
+47 -25
View File
@@ -622,26 +622,26 @@ onBeforeUnmount(() => {
</k-card>
<template v-else>
<div class="skyride-mode">
<k-segmented v-if="skyride.driverEligible">
<k-segmented-button
:active="mode === 'rider'"
:disabled="Boolean(skyride.activeRide)"
@click="mode = 'rider'"
>
{{ phone.t('Apps.skyride.mode.rider') }}
</k-segmented-button>
<k-segmented-button
:active="mode === 'driver'"
:disabled="Boolean(skyride.activeRide)"
@click="mode = 'driver'"
>
{{ phone.t('Apps.skyride.mode.driver') }}
</k-segmented-button>
</k-segmented>
</div>
<div class="skyride-scroll">
<div class="skyride-mode">
<k-segmented v-if="skyride.driverEligible">
<k-segmented-button
:active="mode === 'rider'"
:disabled="Boolean(skyride.activeRide)"
@click="mode = 'rider'"
>
{{ phone.t('Apps.skyride.mode.rider') }}
</k-segmented-button>
<k-segmented-button
:active="mode === 'driver'"
:disabled="Boolean(skyride.activeRide)"
@click="mode = 'driver'"
>
{{ phone.t('Apps.skyride.mode.driver') }}
</k-segmented-button>
</k-segmented>
</div>
<template v-if="activeTab === 'home'">
<section v-if="mode === 'rider'" class="skyride-home-panel">
<template v-if="!skyride.activeRide">
@@ -1816,6 +1816,11 @@ onBeforeUnmount(() => {
color: var(--ride-text);
}
.skyride-navbar :deep(.sky-navbar__blur),
.skyride-navbar :deep(.sky-navbar__background) {
display: none;
}
.skyride-navbar :deep(.sky-navbar__title) {
color: var(--ride-text);
font-size: 18px;
@@ -1853,7 +1858,9 @@ onBeforeUnmount(() => {
.skyride-scroll {
position: absolute;
z-index: 2;
inset: 148px 0 116px;
box-sizing: border-box;
inset: 114px 0 0;
padding: 0 0 116px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
@@ -2253,6 +2260,10 @@ onBeforeUnmount(() => {
padding: 16px;
}
.skyride-person-card {
margin-bottom: 12px;
}
.skyride-avatar,
.skyride-profile-avatar {
display: grid;
@@ -2329,13 +2340,19 @@ onBeforeUnmount(() => {
}
.skyride-route-stop {
display: flex;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 11px;
column-gap: 11px;
}
.skyride-route-stop > .skyride-dot {
justify-self: center;
}
.skyride-route-stop > svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
color: var(--ride-accent-strong);
}
@@ -2366,7 +2383,7 @@ onBeforeUnmount(() => {
display: block;
width: 1px;
height: 17px;
margin: 1px 0 1px 5px;
margin: 1px 0 1px 8px;
border-left: 1px dashed var(--ride-muted);
}
@@ -2691,6 +2708,11 @@ button.skyride-profile-avatar--editable {
gap: 0 !important;
}
.skyride-tabbar :deep(.sky-tabbar__blur),
.skyride-tabbar :deep(.sky-tabbar__background) {
display: none;
}
.skyride-tab-pane {
width: 100% !important;
max-width: none !important;
@@ -2969,7 +2991,7 @@ button.skyride-profile-avatar--editable {
background-color: var(--ride-accent);
}
.skyride-app :deep(.sky-button--primary) {
.skyride-app :deep(.sky-button--primary:not(.sky-button--outline)) {
color: #171719;
}