Skip to content

Commit b61df36

Browse files
author
David Schowalter
committed
Optimize responsiveness and add Safari-specific fixes
Added meta tags for responsive design and adjusted CSS for better mobile compatibility. Included Safari-specific fixes to address appearance and usability issues on iOS devices. Enhanced layout and button styling for improved accessibility and touch device support.
1 parent 8c2083a commit b61df36

File tree

7 files changed

+204
-0
lines changed

7 files changed

+204
-0
lines changed

‎app/static/css/appointments.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@
44
.container {
55
max-width: 1000px; /* Breiterer Container für das zweispaltige Layout */
66
animation: fadeIn 0.5s ease-in-out;
7+
width: 100%;
8+
padding: var(--spacing-md);
9+
box-sizing: border-box;
10+
}
11+
12+
/* Verbesserte Unterstützung für Safari */
13+
@supports (-webkit-touch-callout: none) {
14+
.container {
15+
width: 100%;
16+
max-width: 100%;
17+
padding-left: 10px;
18+
padding-right: 10px;
19+
}
720
}
821

922
@keyframes fadeIn {
@@ -117,6 +130,19 @@
117130
padding: var(--spacing-sm);
118131
}
119132

133+
/* Anpassung für mobile Geräte */
134+
@media (max-width: 600px) {
135+
.calendars-container {
136+
grid-template-columns: repeat(2, 1fr); /* Zweispaltig auf kleineren Geräten */
137+
}
138+
}
139+
140+
@media (max-width: 400px) {
141+
.calendars-container {
142+
grid-template-columns: 1fr; /* Einspaltig auf sehr kleinen Geräten */
143+
}
144+
}
145+
120146
.appointments-container:hover,
121147
.calendars-container:hover {
122148
box-shadow: 0 4px 8px var(--shadow-color);
@@ -320,6 +346,19 @@ textarea:focus {
320346
display: flex;
321347
align-items: center;
322348
justify-content: center;
349+
-webkit-appearance: none; /* Verhindert Safari-spezifische Button-Darstellungsprobleme */
350+
appearance: none;
351+
}
352+
353+
@media (max-width: 480px) {
354+
.appointments-actions {
355+
flex-direction: column;
356+
}
357+
358+
.appointments-actions button {
359+
width: 100%;
360+
margin-bottom: 8px;
361+
}
323362
}
324363

325364
.appointments-actions button:hover {
@@ -378,6 +417,12 @@ textarea:focus {
378417
margin-bottom: 0;
379418
}
380419

420+
@media (max-width: 480px) {
421+
.format-options {
422+
grid-template-columns: 1fr; /* Einspaltig auf sehr kleinen Geräten */
423+
}
424+
}
425+
381426
/* Format-Option */
382427
.format-option {
383428
display: flex;
@@ -557,6 +602,27 @@ textarea:focus {
557602
border-radius: var(--border-radius);
558603
border: 1px solid var(--border-color);
559604
box-shadow: 0 2px 4px var(--shadow-color);
605+
-webkit-overflow-scrolling: touch; /* Verbessert das Scrolling auf iOS */
606+
}
607+
608+
/* Mobile Anpassungen für das Layout */
609+
@media (max-width: 768px) {
610+
.appointments-layout {
611+
grid-template-columns: 1fr; /* Einspaltiges Layout auf mobilen Geräten */
612+
gap: var(--spacing-md);
613+
}
614+
615+
.appointments-main,
616+
.appointments-sidebar {
617+
grid-column: 1;
618+
}
619+
620+
.appointments-sidebar {
621+
position: relative; /* Keine sticky Position auf mobilen Geräten */
622+
top: 0;
623+
max-height: none;
624+
margin-top: var(--spacing-md);
625+
}
560626
}
561627

562628
/* Sidebar-Abschnitte */
@@ -590,6 +656,28 @@ textarea:focus {
590656
.generate-buttons .btn {
591657
width: 100%;
592658
text-align: center;
659+
-webkit-appearance: none; /* Verhindert Safari-spezifische Button-Darstellungsprobleme */
660+
appearance: none;
661+
padding: 12px 16px; /* Größere Buttons für Touch-Geräte */
662+
}
663+
664+
/* Safari-spezifische Anpassungen */
665+
@supports (-webkit-touch-callout: none) {
666+
/* Nur für Safari auf iOS */
667+
.btn,
668+
input[type="submit"],
669+
button {
670+
-webkit-appearance: none;
671+
appearance: none;
672+
border-radius: var(--border-radius);
673+
}
674+
675+
.appointments-actions button {
676+
display: inline-flex;
677+
width: auto;
678+
min-width: 120px;
679+
margin: 4px;
680+
}
593681
}
594682

595683
/* Spinner-Overlay */

‎app/static/css/common.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ h3 {
9393
box-shadow: var(--box-shadow);
9494
margin-top: var(--spacing-lg);
9595
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
96+
box-sizing: border-box;
9697
}
9798

9899
.container:hover {
@@ -147,6 +148,8 @@ input[type="submit"] {
147148
font-weight: 600;
148149
cursor: pointer;
149150
transition: background-color var(--transition-speed), transform var(--transition-speed);
151+
-webkit-appearance: none; /* Wichtig für Safari auf iOS */
152+
appearance: none;
150153
}
151154

152155
input[type="submit"]:hover {
@@ -170,6 +173,9 @@ input[type="submit"]:active {
170173
border: none;
171174
cursor: pointer;
172175
transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
176+
-webkit-appearance: none; /* Wichtig für Safari auf iOS */
177+
appearance: none;
178+
-webkit-tap-highlight-color: transparent; /* Entfernt den blauen Highlight-Effekt bei Tap auf iOS */
173179
}
174180

175181
.btn:hover {
@@ -261,6 +267,9 @@ footer {
261267

262268
.container {
263269
padding: var(--spacing-lg);
270+
max-width: 100%;
271+
width: 100%;
272+
box-sizing: border-box;
264273
}
265274
}
266275

@@ -271,6 +280,8 @@ footer {
271280

272281
.container {
273282
padding: var(--spacing-md);
283+
margin-top: var(--spacing-sm);
284+
border-radius: var(--border-radius);
274285
}
275286

276287
h1 {
@@ -281,6 +292,42 @@ footer {
281292
font-size: 1.5rem;
282293
margin-bottom: var(--spacing-lg);
283294
}
295+
296+
/* Verbesserte Button-Darstellung auf kleinen Geräten */
297+
.btn,
298+
input[type="submit"],
299+
button {
300+
width: 100%;
301+
padding: 12px 16px; /* Größere Buttons für Touch-Geräte */
302+
margin-top: 8px;
303+
margin-bottom: 8px;
304+
}
305+
}
306+
307+
/* Safari-spezifische Anpassungen */
308+
@supports (-webkit-touch-callout: none) {
309+
/* Nur für Safari auf iOS */
310+
input[type="text"],
311+
input[type="password"],
312+
input[type="file"],
313+
textarea,
314+
select,
315+
.btn,
316+
input[type="submit"],
317+
button {
318+
-webkit-appearance: none;
319+
appearance: none;
320+
border-radius: var(--border-radius);
321+
}
322+
323+
/* Verhindert Zoom bei Fokus auf Eingabefeldern in Safari */
324+
@media screen and (max-width: 768px) {
325+
input[type="text"],
326+
input[type="password"],
327+
select {
328+
font-size: 16px; /* Verhindert Zoom auf Eingabefeldern in Safari */
329+
}
330+
}
284331
}
285332

286333
/* Zugänglichkeit */

‎app/static/css/login.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
.btn-login {
99
background-color: var(--success-color);
1010
width: 100%;
11+
-webkit-appearance: none; /* Wichtig für Safari auf iOS */
12+
appearance: none;
1113
}
1214

1315
.btn-login:hover {
@@ -25,6 +27,9 @@
2527
.container {
2628
padding: 1.5em;
2729
margin-top: 10px;
30+
width: 100%;
31+
max-width: 100%;
32+
box-sizing: border-box;
2833
}
2934

3035
h1 {
@@ -35,4 +40,25 @@
3540
font-size: 1.3em;
3641
margin-bottom: 1.5em;
3742
}
43+
44+
input[type="text"],
45+
input[type="password"] {
46+
font-size: 16px; /* Verhindert Zoom auf Eingabefeldern in Safari */
47+
}
48+
}
49+
50+
/* Safari-spezifische Anpassungen */
51+
@supports (-webkit-touch-callout: none) {
52+
/* Nur für Safari auf iOS */
53+
.btn-login {
54+
border-radius: var(--border-radius);
55+
padding: 12px 16px; /* Größere Buttons für Touch-Geräte */
56+
}
57+
58+
input[type="text"],
59+
input[type="password"] {
60+
-webkit-appearance: none;
61+
appearance: none;
62+
border-radius: var(--border-radius);
63+
}
3864
}

‎app/static/css/overview.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
.container {
44
max-width: 600px; /* Mittlerer Container für die Overview-Seite */
5+
width: 100%;
6+
box-sizing: border-box;
57
}
68

79
/* Kachel-Container */
@@ -30,6 +32,7 @@
3032
align-items: center;
3133
cursor: pointer;
3234
font-weight: bold;
35+
-webkit-tap-highlight-color: transparent; /* Entfernt den blauen Highlight-Effekt bei Tap auf iOS */
3336
}
3437

3538
.tile:hover {
@@ -48,4 +51,38 @@
4851
width: 100%;
4952
max-width: 250px;
5053
}
54+
55+
.container {
56+
padding: var(--spacing-md);
57+
}
58+
}
59+
60+
/* Safari-spezifische Anpassungen */
61+
@supports (-webkit-touch-callout: none) {
62+
/* Nur für Safari auf iOS */
63+
.tile {
64+
-webkit-appearance: none;
65+
appearance: none;
66+
border-radius: 8px;
67+
}
68+
69+
.btn-logout {
70+
-webkit-appearance: none;
71+
appearance: none;
72+
border-radius: var(--border-radius);
73+
width: 100%;
74+
padding: 12px 16px; /* Größere Buttons für Touch-Geräte */
75+
}
76+
}
77+
78+
/* Verbesserte Touch-Ziele für mobile Geräte */
79+
@media (max-width: 480px) {
80+
.tile {
81+
height: 120px; /* Größere Höhe für bessere Touch-Ziele */
82+
margin-bottom: 10px;
83+
}
84+
85+
.tiles-container {
86+
gap: 15px;
87+
}
5188
}

‎app/templates/appointments.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
46
<title>Appointments</title>
57
<link rel="stylesheet" href="/static/css/common.css">
68
<link rel="stylesheet" href="/static/css/appointments.css">

‎app/templates/login.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
46
<title>Login</title>
57
<link rel="stylesheet" href="/static/css/common.css">
68
<link rel="stylesheet" href="/static/css/login.css">

‎app/templates/overview.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
46
<title>Overview</title>
57
<link rel="stylesheet" href="/static/css/common.css">
68
<link rel="stylesheet" href="/static/css/overview.css">

0 commit comments

Comments
 (0)