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 - align FlipTok profile controls

Browse Source 
Match the video profile action container to the avatar geometry so the follow control centers beneath the image. Remove visible authentication header titles while retaining accessible labels, and anchor connection fallbacks to their avatar frames.
This commit is contained in:
Leon.Schmidt
2026-08-18 14:34:25 +02:00
parent 1b191fd127
commit e128408c8d
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/apps/FlipTokApp.contract.test.ts
+9 -3
View File
@@ -138,7 +138,10 @@ describe('FlipTokApp Sky UI contract', () => {
'video.is_following || followPendingIds.has(video.id)',
)
expect(source).toMatch(
/\.video-actions \.follow-dot\s*\{[^}]*min-width: 20px !important;[^}]*min-height: 20px !important;[^}]*place-items: center;/s,
/\.video-actions \.follow-dot\s*\{[^}]*bottom:\s*-2px;[^}]*min-width: 20px !important;[^}]*min-height: 20px !important;[^}]*place-items: center;/s,
)
expect(source).toMatch(
/\.video-profile-action\s*\{[^}]*width:\s*44px;[^}]*min-height:\s*48px;[^}]*justify-items:\s*center;/s,
)
})
@@ -162,13 +165,16 @@ describe('FlipTokApp Sky UI contract', () => {
expect(source).toContain('@click="followConnection(profile)"')
})
it('labels authentication modes and centers connection avatar fallbacks', () => {
it('hides authentication header names and centers avatar fallbacks', () => {
expect(source).toContain(
":aria-label=\"t(authMode === 'login' ? 'login' : 'register')\"",
)
expect(source).not.toContain(
":title=\"t(authMode === 'login' ? 'login' : 'register')\"",
)
expect(source).toContain('class="connection-avatar__fallback"')
expect(source).toMatch(
/\.connections-list \.connection-avatar__fallback\s*\{[^}]*display:\s*grid;[^}]*place-items:\s*center;/s,
/\.connections-list \.connection-avatar__fallback\s*\{[^}]*position:\s*absolute;[^}]*inset:\s*0;[^}]*display:\s*grid;[^}]*place-items:\s*center;/s,
)
})
frontend/src/views/apps/FlipTokApp.vue
+9 -7
View File
@@ -1777,7 +1777,7 @@ onBeforeUnmount(() => {
>
<SkyNavbar
class="fliptok-auth__navbar"
:title="t(authMode === 'login' ? 'login' : 'register')"
:aria-label="t(authMode === 'login' ? 'login' : 'register')"
:scroll-el="null"
variant="medium"
/>
@@ -5461,8 +5461,8 @@ onBeforeUnmount(() => {
.video-profile-action {
position: relative;
width: 40px;
min-height: 44px;
width: 44px;
min-height: 48px;
display: grid;
justify-items: center;
}
@@ -5905,6 +5905,7 @@ onBeforeUnmount(() => {
/* The avatar follow control must not inherit the generic action height. */
.video-actions .follow-dot {
bottom: -2px;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
@@ -6061,7 +6062,8 @@ onBeforeUnmount(() => {
place-items: center;
}
.connections-list .connection-avatar {
.connections-list .connection-profile > .connection-avatar {
position: relative;
display: grid;
place-items: center;
line-height: 1;
@@ -6069,12 +6071,12 @@ onBeforeUnmount(() => {
}
.connections-list .connection-avatar__fallback {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: grid;
place-items: center;
line-height: 1;
transform: translateY(-0.5px);
text-align: center;
}
.connections-list :deep(.sky-button:disabled) {