torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(vocab): update VocabCourseView styles for improved UI and accessibility

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-08-21 13:22:42 +02:00
parent 98888a7920
commit bb27660f85
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/AppNavigation.vue
View File

@@ -225,6 +225,8 @@ import apiClient from '@/utils/axios.js';
import { EventBus } from '@/utils/eventBus.js'; import { EventBus } from '@/utils/eventBus.js';
import { showInfo } from '@/utils/feedback.js'; import { showInfo } from '@/utils/feedback.js';
const MOBILE_NAV_BREAKPOINT = 1180;
export default { export default {
name: 'AppNavigation', name: 'AppNavigation',
data() { data() {
@@ -362,7 +364,7 @@ export default {
}, },
updateViewportState() { updateViewportState() {
this.isMobileNav = window.innerWidth <= 960; this.isMobileNav = window.innerWidth <= MOBILE_NAV_BREAKPOINT;
if (!this.isMobileNav) { if (!this.isMobileNav) {
this.mobileMenuOpen = false; this.mobileMenuOpen = false;
this.expandedMainKey = null; this.expandedMainKey = null;
@@ -1135,7 +1137,7 @@ a {
margin-right: -4px; margin-right: -4px;
} }
@media (max-width: 960px) { @media (max-width: 1180px) {
.app-navigation { .app-navigation {
position: sticky; position: sticky;
top: 0; top: 0;

18
frontend/src/views/social/VocabCourseView.vue
View File

@@ -1345,12 +1345,17 @@ export default {
padding: 12px 14px; padding: 12px 14px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: #fff; background: var(--color-surface-strong);
color: var(--color-text-primary);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
} }
.course-flow-lesson strong { .course-flow-lesson strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--color-text-primary);
font-size: 0.95rem; font-size: 0.95rem;
} }
@@ -1360,6 +1365,17 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.course-flow-lesson:hover {
background: var(--color-primary-soft);
border-color: rgba(61, 139, 87, 0.38);
box-shadow: 0 4px 12px rgba(42, 90, 56, 0.08);
}
.course-flow-lesson:focus-visible {
outline: 3px solid rgba(120, 195, 138, 0.42);
outline-offset: 2px;
}
.course-flow-card__empty { .course-flow-card__empty {
margin: 0; margin: 0;
color: var(--color-text-secondary); color: var(--color-text-secondary);