romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui-fixes-phase6): Complete US-607 - Secțiune Utilizator Compactă în Meniul Mobil

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 8

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-13 16:33:08 +00:00
parent 83ec6e69d5
commit ec678b4b04
3 changed files with 148 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/ralph/prd.json
View File

@@ -146,8 +146,8 @@
"npm run typecheck passes",
"Verify in browser: User section is visually compact"
],
"passes": false,
"notes": "Depinde de US-604 pentru toggle-ul de temă, modifică layout-ul în MobileDrawerMenu.vue"
"passes": true,
"notes": "Completed in iteration 8"
},
{
"id": "US-608",

6
scripts/ralph/progress.txt
View File

@@ -284,3 +284,9 @@ PRD: tasks/prd-ui-fixes-phase6.md
[2026-01-13 16:23:41] Working on story: US-606
[2026-01-13 16:23:41] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_7_US-606.log)
[2026-01-13 16:29:48] SUCCESS: Story US-606 passed!
[2026-01-13 16:29:48] Changes committed
[2026-01-13 16:29:48] Progress: 6/10 stories completed
[2026-01-13 16:29:50] === Iteration 8/30 ===
[2026-01-13 16:29:50] Working on story: US-607
[2026-01-13 16:29:50] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-607.log)
[2026-01-13 16:33:08] SUCCESS: Story US-607 passed!

249
src/shared/components/mobile/MobileDrawerMenu.vue
View File

@@ -210,40 +210,35 @@
</div>
</div>
<!-- Profile Section (at bottom) -->
<div class="drawer-profile">
<div class="profile-header">
<div class="profile-avatar">
<i class="pi pi-user"></i>
</div>
<div class="profile-info">
<!-- Profile Section (at bottom) - US-607: Compact layout -->
<div class="drawer-profile drawer-profile--compact">
<!-- US-607: User name + Logout on same line -->
<div class="profile-row">
<div class="profile-user">
<i class="pi pi-user profile-icon"></i>
<span class="profile-name">{{ displayName }}</span>
<span class="profile-role">Utilizator</span>
</div>
<button
type="button"
class="logout-btn"
@click="handleLogout"
aria-label="Deconectare"
>
<i class="pi pi-sign-out"></i>
<span>Ieșire</span>
</button>
</div>
<!-- Theme Toggle (compact cyclic button) -->
<!-- Theme Toggle (compact cyclic button) - US-604 -->
<button
type="button"
class="drawer-link theme-toggle-link"
class="theme-toggle-compact"
@click="cycleTheme"
:aria-label="`Schimbă tema: ${currentThemeOption.label}`"
>
<i :class="['drawer-icon', currentThemeOption.icon]"></i>
<span class="drawer-label">{{ currentThemeOption.label }}</span>
<i class="pi pi-chevron-right theme-cycle-hint"></i>
</button>
<!-- Divider before logout -->
<div class="drawer-divider profile-divider"></div>
<button
type="button"
class="drawer-link logout-link"
@click="handleLogout"
>
<i class="drawer-icon pi pi-sign-out"></i>
<span class="drawer-label">Deconectare</span>
<i :class="currentThemeOption.icon"></i>
<span>{{ currentThemeOption.label }}</span>
<i class="pi pi-chevron-right"></i>
</button>
</div>
</nav>
@@ -1013,49 +1008,51 @@ onMounted(() => {
}
/* ================================================
Profile Section
Profile Section - US-607: Compact layout
US-606: No longer fixed at bottom, scrolls with content
================================================ */
.drawer-profile {
padding: var(--space-md) 0;
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--surface-border);
/* Extra padding at bottom for MobileBottomNav clearance (56px) */
padding-bottom: calc(var(--header-height) + var(--space-md));
padding-bottom: calc(var(--header-height) + var(--space-sm));
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.profile-header {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-lg);
margin-bottom: var(--space-xs);
/* US-607: Compact variant - reduced spacing */
.drawer-profile--compact {
padding: var(--space-sm) var(--space-md);
gap: var(--space-xs);
}
.profile-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--blue-100);
/* US-607: User name + Logout on same row */
.profile-row {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
gap: var(--space-sm);
min-height: 44px;
}
.profile-user {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
flex: 1;
}
.profile-icon {
font-size: var(--text-base);
color: var(--color-primary);
flex-shrink: 0;
}
.profile-avatar i {
font-size: var(--text-lg);
color: var(--color-primary);
}
.profile-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.profile-name {
font-size: var(--text-base);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-color);
white-space: nowrap;
@@ -1063,45 +1060,73 @@ onMounted(() => {
text-overflow: ellipsis;
}
.profile-role {
/* US-607: Compact logout button */
.logout-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: transparent;
border: 1px solid var(--color-error);
border-radius: var(--radius-md);
color: var(--color-error);
font-size: var(--text-sm);
color: var(--text-color-secondary);
font-weight: var(--font-medium);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
min-height: 36px;
flex-shrink: 0;
}
/* Logout link styling */
.logout-link {
color: var(--color-error);
}
.logout-link .drawer-icon {
color: var(--color-error);
}
.logout-link:hover {
.logout-btn:hover {
background: var(--red-50);
}
/* Profile divider (spacing adjustment) */
.profile-divider {
margin: var(--space-sm) var(--space-md);
.logout-btn:active {
background: var(--red-100);
}
.logout-btn i {
font-size: var(--text-sm);
}
/* ================================================
Theme Toggle (compact cyclic button) - US-604
Theme Toggle (compact cyclic button) - US-604/US-607
================================================ */
.theme-toggle-link {
position: relative;
.theme-toggle-compact {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-xs) var(--space-sm);
background: var(--surface-hover);
border: none;
border-radius: var(--radius-md);
color: var(--text-color);
font-size: var(--text-sm);
cursor: pointer;
transition: background var(--transition-fast);
min-height: 36px;
}
.theme-toggle-link .drawer-icon {
.theme-toggle-compact:hover {
background: var(--surface-border);
}
.theme-toggle-compact i:first-child {
color: var(--color-primary);
font-size: var(--text-sm);
}
.theme-cycle-hint {
.theme-toggle-compact span {
flex: 1;
text-align: left;
}
.theme-toggle-compact i:last-child {
font-size: var(--text-xs);
color: var(--text-color-secondary);
margin-left: auto;
opacity: 0.6;
}
@@ -1300,15 +1325,12 @@ onMounted(() => {
color: var(--text-color-secondary);
}
/* Dark mode: Profile Section (US-607) */
[data-theme="dark"] .drawer-profile {
border-top-color: var(--surface-border);
}
[data-theme="dark"] .profile-avatar {
background: var(--blue-900);
}
[data-theme="dark"] .profile-avatar i {
[data-theme="dark"] .profile-icon {
color: var(--blue-400);
}
@@ -1316,28 +1338,34 @@ onMounted(() => {
color: var(--text-color);
}
[data-theme="dark"] .profile-role {
color: var(--text-color-secondary);
}
[data-theme="dark"] .logout-link {
[data-theme="dark"] .logout-btn {
border-color: var(--red-400);
color: var(--red-400);
}
[data-theme="dark"] .logout-link .drawer-icon {
color: var(--red-400);
}
[data-theme="dark"] .logout-link:hover {
[data-theme="dark"] .logout-btn:hover {
background: var(--red-900);
}
/* Dark mode: Theme Toggle */
[data-theme="dark"] .theme-toggle-link .drawer-icon {
[data-theme="dark"] .logout-btn:active {
background: var(--red-800);
}
/* Dark mode: Theme Toggle (US-607) */
[data-theme="dark"] .theme-toggle-compact {
background: var(--surface-hover);
color: var(--text-color);
}
[data-theme="dark"] .theme-toggle-compact:hover {
background: var(--surface-border);
}
[data-theme="dark"] .theme-toggle-compact i:first-child {
color: var(--blue-400);
}
[data-theme="dark"] .theme-cycle-hint {
[data-theme="dark"] .theme-toggle-compact i:last-child {
color: var(--text-color-secondary);
}
@@ -1497,15 +1525,12 @@ onMounted(() => {
color: var(--text-color-secondary);
}
/* Auto dark mode: Profile Section (US-607) */
:root:not([data-theme]) .drawer-profile {
border-top-color: var(--surface-border);
}
:root:not([data-theme]) .profile-avatar {
background: var(--blue-900);
}
:root:not([data-theme]) .profile-avatar i {
:root:not([data-theme]) .profile-icon {
color: var(--blue-400);
}
@@ -1513,28 +1538,34 @@ onMounted(() => {
color: var(--text-color);
}
:root:not([data-theme]) .profile-role {
color: var(--text-color-secondary);
}
:root:not([data-theme]) .logout-link {
:root:not([data-theme]) .logout-btn {
border-color: var(--red-400);
color: var(--red-400);
}
:root:not([data-theme]) .logout-link .drawer-icon {
color: var(--red-400);
}
:root:not([data-theme]) .logout-link:hover {
:root:not([data-theme]) .logout-btn:hover {
background: var(--red-900);
}
/* Auto dark mode: Theme Toggle */
:root:not([data-theme]) .theme-toggle-link .drawer-icon {
:root:not([data-theme]) .logout-btn:active {
background: var(--red-800);
}
/* Auto dark mode: Theme Toggle (US-607) */
:root:not([data-theme]) .theme-toggle-compact {
background: var(--surface-hover);
color: var(--text-color);
}
:root:not([data-theme]) .theme-toggle-compact:hover {
background: var(--surface-border);
}
:root:not([data-theme]) .theme-toggle-compact i:first-child {
color: var(--blue-400);
}
:root:not([data-theme]) .theme-cycle-hint {
:root:not([data-theme]) .theme-toggle-compact i:last-child {
color: var(--text-color-secondary);
}
}