Skip to content

Commit 5e7b140

Browse files
bjellinebjelline
committed
demo
1 parent 6c0a93b commit 5e7b140

File tree

3 files changed

+41
-14
lines changed

3 files changed

+41
-14
lines changed

‎formulare/css/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@ <h2 id="layout-fr-ein-formular">Layout für ein Formular</h2>
7878

7979
<p>Mit CSS Grid:</p>
8080

81-
<p><img src="/images/formulare/grid-layout-form.png" srcset="/images/formulare/grid-layout-form.png 1x, /images/formulare/grid-layout-form@2x.png 2x" alt="Beispiel CSS Grid und Formular" ></p>
81+
<p><img src="/images/formulare/grid-layout-form.png" srcset="/images/formulare/grid-layout-form.png 1x, /images/formulare/grid-layout-form@2x.png 2x" alt="Demo: CSS Grid und Formular" ></p>
8282

83-
<p><a href="/images/formulare/grid-form.html">Beispiel CSS Grid und Formular</a></p>
83+
<p><a href="/images/formulare/grid-form.html">Demo: CSS Grid und Formular</a></p>
8484

8585

8686
<a class="slide_break do-not-print" id="slide-4" href="slide.html#slide-4" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 4">▻</a>
@@ -186,6 +186,8 @@ <h3 id="grssere-zellen">Grössere Zellen</h3>
186186
<p>Ein fieldset Tag der ein direktes Kind eines form Tags ist,
187187
soll zwei Spalten überspannen.</p>
188188

189+
<p><a href="/images/formulare/grid-form.html">Demo: CSS Grid und Formular</a></p>
190+
189191
<div class="pagination do-not-print">
190192
<ul>
191193

‎formulare/css/slide.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ <h2 id="layout-fr-ein-formular">Layout für ein Formular</h2>
114114

115115
<p>Mit CSS Grid:</p>
116116

117-
<p><img src="/images/formulare/grid-layout-form.png" srcset="/images/formulare/grid-layout-form.png 1x, /images/formulare/grid-layout-form@2x.png 2x" alt="Beispiel CSS Grid und Formular" ></p>
117+
<p><img src="/images/formulare/grid-layout-form.png" srcset="/images/formulare/grid-layout-form.png 1x, /images/formulare/grid-layout-form@2x.png 2x" alt="Demo: CSS Grid und Formular" ></p>
118118

119-
<p><a href="/images/formulare/grid-form.html">Beispiel CSS Grid und Formular</a></p>
119+
<p><a href="/images/formulare/grid-form.html">Demo: CSS Grid und Formular</a></p>
120120

121121
</div>
122122
<div class="slide">
@@ -222,6 +222,8 @@ <h3 id="grssere-zellen">Grössere Zellen</h3>
222222
<p>Ein fieldset Tag der ein direktes Kind eines form Tags ist,
223223
soll zwei Spalten überspannen.</p>
224224

225+
<p><a href="/images/formulare/grid-form.html">Demo: CSS Grid und Formular</a></p>
226+
225227
</div>
226228
<div class="slide">
227229
<h1>CSS und Formular</h1>

‎images/formulare/grid-form.html‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,52 @@
33
<head>
44
<title>Demo Seite für ein Formular mit CSS Grid</title>
55
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
67
<style>
78
main {
89
width: 40em;
910
margin: 0 auto;
1011
}
11-
form {
12-
display: grid;
13-
grid-template-columns: [labels] auto [controls] 1fr;
14-
grid-auto-flow: row;
15-
grid-gap: 10px;
12+
label, input[type=submit] {
13+
display: block;
1614
}
15+
@media screen and (min-width: 500px){
16+
form {
17+
display: grid;
18+
grid-template-columns: [labels] auto [controls] 1fr;
19+
grid-auto-flow: row;
20+
grid-gap: 10px;
21+
}
1722

18-
form > fieldset {
19-
grid-column: span 2;
23+
form > fieldset {
24+
grid-column: span 2;
25+
}
26+
form > input[type=submit] {
27+
grid-column: controls;
28+
}
2029
}
21-
form > input[type=submit] {
22-
grid-column: controls;
30+
@media screen and (max-width: 500px) {
31+
label {
32+
margin-top: 1em;
33+
border-top-left-radius: 5px;
34+
padding: 2px 0 0 2px;
35+
background-image: linear-gradient(to right, #ddd, transparent);
36+
}
37+
form {
38+
max-width: 95vw;
39+
}
40+
input[type=radio], input[type=checkbox] {
41+
width: unset;
42+
}
43+
input, textarea {
44+
width: 90vw;
45+
}
2346
}
2447
</style>
2548
</head>
2649
<body>
2750
<main>
28-
<h1>Formular</h1>
51+
<h1>Demo: Formular im Grid</h1>
2952
<p>Mit automatischem Layout mit CSS Grid. Das Grid definiert nur
3053
zwei Spalten mit Namen "label" und "control", die zeilen entstehen
3154
automatisch durch das einfügen der Elemente.</p>

0 commit comments

Comments
 (0)