Improve mobile UI responsiveness, touch tap-to-translate, and PWA icon
This commit is contained in:
chrisf committed
1 parent
5f013dbdfe
commit
c3e66b4c98
6 files changed
+442
-28
No files matched your search
+355
@@ -1261,4 +1261,359 @@ body.hover-translate-on .word-token:hover {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.prep-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
.dawo-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.65rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
/* === MOBILE & TABLET RESPONSIVE CLEANUP === */
|
||||
.nav-tabs::-webkit-scrollbar,
|
||||
.mode-pills::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-tabs,
|
||||
.mode-pills {
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (max-width: 940px) {
|
||||
.header-inner {
|
||||
padding: 0.6rem 0.9rem;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 0.42rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Turn story and scenario lists into horizontal swipe strips on mobile/tablet so content is immediately visible */
|
||||
#story-list-container,
|
||||
#scenario-list-container {
|
||||
flex-direction: row !important;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.35rem;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#story-list-container .story-card-item,
|
||||
#scenario-list-container .story-card-item {
|
||||
min-width: 245px;
|
||||
max-width: 270px;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
padding: 0.8rem 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-flag {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.hover-toggle-btn .hover-label-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hover-toggle-btn {
|
||||
padding: 0.36rem 0.6rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.streak-chip {
|
||||
padding: 0.34rem 0.55rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.streak-chip .streak-days-word {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0.9rem 0.75rem 4.5rem;
|
||||
}
|
||||
|
||||
.hero-banner {
|
||||
padding: 1.15rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 1.22rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.gender-legend-bar {
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.gender-badge {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.12rem 0.45rem;
|
||||
}
|
||||
|
||||
.hero-cta-group {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-cta-group .btn {
|
||||
justify-content: center;
|
||||
padding: 0.6rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.85rem 0.9rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.panel-card,
|
||||
.srs-card-stage,
|
||||
.reader-main {
|
||||
padding: 1.1rem 0.95rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.launcher-item {
|
||||
padding: 0.8rem 0.85rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.launcher-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.launcher-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.launcher-desc {
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Horizontal scrollable mode pills on mobile */
|
||||
.trainer-controls {
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mode-pills {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
padding-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.mode-pill {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
}
|
||||
|
||||
#trainer-category-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prompt-main {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.cloze-box {
|
||||
padding: 0.8rem 0.95rem;
|
||||
}
|
||||
|
||||
.cloze-de {
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
/* Stack input and buttons cleanly on mobile; 16px prevents iOS Safari auto-zoom */
|
||||
.answer-input-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.german-input {
|
||||
width: 100%;
|
||||
flex: 1 1 100%;
|
||||
font-size: 16px !important;
|
||||
padding: 0.68rem 0.85rem;
|
||||
}
|
||||
|
||||
.answer-input-row .btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
|
||||
.umlaut-bar {
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.umlaut-key {
|
||||
min-width: 36px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.92rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 2x2 thumb-friendly grids on mobile */
|
||||
.gender-choice-grid,
|
||||
.srs-grade-buttons {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gender-choice-btn {
|
||||
padding: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.prep-options-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dawo-options-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Compound blocks wrap cleanly on mobile */
|
||||
.compound-blocks-row {
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.compound-plus {
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.compound-block {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
}
|
||||
|
||||
.story-de-line {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 94%;
|
||||
padding: 0.8rem 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.vocab-filter-bar {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.vocab-filter-bar .german-input {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.vocab-grid,
|
||||
.prefix-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
padding: 1.2rem;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toast-notification {
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
bottom: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user