Skip to content

Commit 87d2cbf

Browse files
estelleestelle
authored
Merge pull request mdn#8 from sutara79/beautify-codes
Beautify codes of playable area
2 parents 3033cc0 + 248c290 commit 87d2cbf

14 files changed

+98
-88
lines changed

‎flexbox/browsers/float.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 100px
34+
height: 110px
3535
}
3636

3737
.playable-buttons {

‎flexbox/browsers/inline-block.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 100px
34+
height: 110px
3535
}
3636

3737
.playable-buttons {

‎flexbox/browsers/table-cell.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 100px
34+
height: 110px
3535
}
3636

3737
.playable-buttons {

‎flexbox/browsers/vertical-align.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 170px
30+
height: 190px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 100px
34+
height: 110px
3535
}
3636

3737
.playable-buttons {

‎flexbox/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ <h2>Common Use Cases of Flexbox</h2>
8484
<ol>
8585
<li><a href="use-cases/navigation.html">Navigation</a></li>
8686
<li><a href="use-cases/navigation-flex.html">Navigation distributing space to items</a></li>
87-
<li><a href="use-cases/navigation-split.html">Split navigation</a></li>
87+
<li><a href="use-cases/split-navigation.html">Split navigation</a></li>
8888
<li><a href="use-cases/center.html">Centering an item</a></li>
8989
<li><a href="use-cases/cards.html">Card layout</a></li>
9090
<li><a href="use-cases/media.html">Media object</a></li>

‎flexbox/use-cases/cards.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 140px
30+
height: 160px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 250px
34+
height: 300px
3535
}
3636

3737
.playable-buttons {
@@ -109,30 +109,30 @@
109109
</section>
110110
<textarea class="playable-css">
111111
.card {
112-
display: flex;
113-
flex-direction: column;
112+
display: flex;
113+
flex-direction: column;
114114
}
115115

116116
.card .content {
117-
flex: 1 1 auto;
117+
flex: 1 1 auto;
118118
}
119-
</textarea>
119+
</textarea>
120120
<textarea id="code" class="playable-html">
121121
<div class="cards">
122-
<div class="card">
123-
<div class="content">
124-
<p>This card doesn't have much content.</p>
125-
</div>
126-
<footer>Card footer</footer>
122+
<div class="card">
123+
<div class="content">
124+
<p>This card doesn't have much content.</p>
127125
</div>
128-
<div class="card">
129-
<div class="content">
130-
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
131-
</div>
132-
<footer>Card footer</footer>
126+
<footer>Card footer</footer>
127+
</div>
128+
<div class="card">
129+
<div class="content">
130+
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
133131
</div>
132+
<footer>Card footer</footer>
133+
</div>
134134
</div>
135-
</textarea>
135+
</textarea>
136136
<div class="playable-buttons">
137137
<input id="reset" type="button" value="Reset">
138138
</div>

‎flexbox/use-cases/center.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 170px
30+
height: 190px
3131
}
3232

3333
textarea:nth-of-type(2) {
@@ -95,12 +95,12 @@
9595
width: 100px;
9696
height: 100px;
9797
}
98-
</textarea>
98+
</textarea>
9999
<textarea id="code" class="playable-html">
100100
<div class="box">
101101
<div></div>
102102
</div>
103-
</textarea>
103+
</textarea>
104104
<div class="playable-buttons">
105105
<input id="reset" type="button" value="Reset">
106106
</div>

‎flexbox/use-cases/input-button.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 170px
30+
height: 140px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 80px
34+
height: 125px
3535
}
3636

3737
.playable-buttons {
@@ -104,16 +104,17 @@
104104
}
105105

106106
.wrapper input[type="text"] {
107-
flex: 1 1 auto;
108-
}
109-
110-
111-
</textarea>
107+
flex: 1 1 auto;
108+
}
109+
</textarea>
112110
<textarea id="code" class="playable-html">
113111
<form class="example">
114-
<div class="wrapper"><input type="text" id="text"><input type="submit" value="Send"></div>
112+
<div class="wrapper">
113+
<input type="text" id="text">
114+
<input type="submit" value="Send">
115+
</div>
115116
</form>
116-
</textarea>
117+
</textarea>
117118
<div class="playable-buttons">
118119
<input id="reset" type="button" value="Reset">
119120
</div>

‎flexbox/use-cases/label-input-button.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 170px
30+
height: 160px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 80px
34+
height: 140px
3535
}
3636

3737
.playable-buttons {
@@ -111,14 +111,18 @@
111111
}
112112

113113
.wrapper input[type="text"] {
114-
flex: 1 1 auto;
115-
}
116-
</textarea>
114+
flex: 1 1 auto;
115+
}
116+
</textarea>
117117
<textarea id="code" class="playable-html">
118118
<form class="example">
119-
<div class="wrapper"><label for="text">Label</label><input type="text" id="text"><input type="submit" value="Send"></div>
119+
<div class="wrapper">
120+
<label for="text">Label</label>
121+
<input type="text" id="text">
122+
<input type="submit" value="Send">
123+
</div>
120124
</form>
121-
</textarea>
125+
</textarea>
122126
<div class="playable-buttons">
123127
<input id="reset" type="button" value="Reset">
124128
</div>

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 180px
30+
height: 250px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 120px
34+
height: 180px
3535
}
3636

3737
.playable-buttons {
@@ -101,23 +101,25 @@
101101
</section>
102102
<textarea class="playable-css">
103103
.media {
104-
display: flex;
105-
align-items: flex-start;
104+
display: flex;
105+
align-items: flex-start;
106106
}
107+
107108
.media.flipped {
108-
flex-direction: row-reverse;
109+
flex-direction: row-reverse;
109110
}
111+
110112
.media .content {
111-
flex: 1;
112-
padding: 10px;
113+
flex: 1;
114+
padding: 10px;
113115
}
114-
</textarea>
116+
</textarea>
115117
<textarea id="code" class="playable-html">
116118
<div class="media flipped">
117119
<div class="image"><img src="MDN.svg" alt="MDN logo"></div>
118120
<div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
119121
</div>
120-
</textarea>
122+
</textarea>
121123
<div class="playable-buttons">
122124
<input id="reset" type="button" value="Reset">
123125
</div>

0 commit comments

Comments
 (0)