Skip to content

Commit acc8830

Browse files
bsmthbsmth
authored
Merge pull request mdn#139 from wbamberg/fix-26970
Fix 26970
2 parents 284370d + 22ccd00 commit acc8830

File tree

2 files changed

+249
-242
lines changed

2 files changed

+249
-242
lines changed

‎flexbox/use-cases/media-flipped.html

+127-124
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,107 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<title>Use cases: media objects</title>
7-
8-
<style>
9-
body {
10-
font: 1.2em Helvetica, Arial, sans-serif;
11-
margin: 20px;
12-
padding: 0;
13-
}
14-
15-
textarea {
16-
font-family: monospace;
17-
display: block;
18-
margin-bottom: 10px;
19-
background-color: #F4F7F8;
20-
border: none;
21-
border-left: 6px solid #558ABB;
22-
color: #4D4E53;
23-
width: 90%;
24-
max-width: 700px;
25-
padding: 10px 10px 0px;
26-
font-size: 90%;
27-
}
28-
29-
textarea:nth-of-type(1) {
30-
height: 250px
31-
}
32-
33-
textarea:nth-of-type(2) {
34-
height: 180px
35-
}
36-
37-
.playable-buttons {
38-
text-align: right;
39-
width: 90%;
40-
max-width: 700px;
41-
padding: 5px 10px 5px 26px;
42-
font-size: 100%;
43-
}
44-
45-
section {
46-
width: 90%;
47-
max-width: 700px;
48-
border: 1px solid #4D4E53;
49-
border-radius: 2px;
50-
padding: 10px 14px 10px 10px;
51-
margin-bottom: 10px;
52-
}
53-
54-
section input {
55-
display: block;
56-
margin: 5px;
57-
}
58-
59-
img {
60-
max-width: 100%;
61-
}
62-
63-
.media {
64-
width: 500px;
65-
border: 2px dotted rgb(96, 139, 168);
66-
}
67-
68-
.media img {
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Use cases: media objects</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #f4f7f8;
20+
border: none;
21+
border-left: 6px solid #558abb;
22+
color: #4d4e53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 310px;
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 180px;
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4d4e53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
.media {
60+
width: 500px;
61+
border: 2px dotted rgb(96, 139, 168);
62+
}
63+
64+
.media img {
6965
margin: 0 10px 0 0;
70-
}
66+
}
7167

72-
.media.flipped img {
68+
.media.flipped img {
7369
margin: 0 0 0 10px;
74-
}
75-
76-
77-
78-
</style>
79-
<style class="editable">
80-
.media {
81-
display: flex;
82-
align-items: flex-start;
83-
}
84-
.media.flipped {
70+
}
71+
</style>
72+
<style class="editable">
73+
img {
74+
max-width: 100%;
75+
}
76+
.media {
77+
display: flex;
78+
align-items: flex-start;
79+
}
80+
.media.flipped {
8581
flex-direction: row-reverse;
86-
}
87-
.media .content {
82+
}
83+
.media .content {
8884
flex: 1;
8985
padding: 10px;
90-
}
91-
</style>
92-
</head>
93-
94-
<body>
95-
<section>
96-
<div class="media flipped">
97-
<div class="image"><img src="MDN.svg" alt="MDN logo"></div>
98-
<div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
99-
</div>
86+
}
87+
</style>
88+
</head>
89+
90+
<body>
91+
<section>
92+
<div class="media flipped">
93+
<div class="image"><img src="MDN.svg" alt="MDN logo" /></div>
94+
<div class="content">
95+
This is the content of my media object. Items directly inside the flex
96+
container will be aligned to flex-start.
97+
</div>
98+
</div>
99+
</section>
100+
<textarea class="playable-css">
101+
img {
102+
max-width: 100%;
103+
}
100104

101-
</section>
102-
<textarea class="playable-css">
103105
.media {
104106
display: flex;
105107
align-items: flex-start;
@@ -113,40 +115,41 @@
113115
flex: 1;
114116
padding: 10px;
115117
}
116-
</textarea>
117-
<textarea id="code" class="playable-html">
118+
</textarea
119+
>
120+
<textarea id="code" class="playable-html">
118121
<div class="media flipped">
119122
<div class="image"><img src="MDN.svg" alt="MDN logo"></div>
120123
<div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
121124
</div>
122-
</textarea>
123-
<div class="playable-buttons">
124-
<input id="reset" type="button" value="Reset">
125-
</div>
126-
</body>
127-
<script>
128-
var section = document.querySelector('section');
129-
var editable = document.querySelector('.editable');
130-
var textareaHTML = document.querySelector('.playable-html');
131-
var textareaCSS = document.querySelector('.playable-css');
132-
var reset = document.getElementById('reset');
133-
var htmlCode = textareaHTML.value;
134-
var cssCode = textareaCSS.value;
135-
136-
function fillCode() {
137-
editable.innerHTML = textareaCSS.value;
138-
section.innerHTML = textareaHTML.value;
139-
}
140-
141-
reset.addEventListener('click', function () {
142-
textareaHTML.value = htmlCode;
143-
textareaCSS.value = cssCode;
144-
fillCode();
145-
});
146-
147-
textareaHTML.addEventListener('input', fillCode);
148-
textareaCSS.addEventListener('input', fillCode);
149-
window.addEventListener('load', fillCode);
150-
</script>
125+
</textarea
126+
>
127+
<div class="playable-buttons">
128+
<input id="reset" type="button" value="Reset" />
129+
</div>
130+
</body>
131+
<script>
132+
var section = document.querySelector("section");
133+
var editable = document.querySelector(".editable");
134+
var textareaHTML = document.querySelector(".playable-html");
135+
var textareaCSS = document.querySelector(".playable-css");
136+
var reset = document.getElementById("reset");
137+
var htmlCode = textareaHTML.value;
138+
var cssCode = textareaCSS.value;
139+
140+
function fillCode() {
141+
editable.innerHTML = textareaCSS.value;
142+
section.innerHTML = textareaHTML.value;
143+
}
144+
145+
reset.addEventListener("click", function () {
146+
textareaHTML.value = htmlCode;
147+
textareaCSS.value = cssCode;
148+
fillCode();
149+
});
151150

151+
textareaHTML.addEventListener("input", fillCode);
152+
textareaCSS.addEventListener("input", fillCode);
153+
window.addEventListener("load", fillCode);
154+
</script>
152155
</html>

0 commit comments

Comments
 (0)