Skip to content

Commit 1b6da02

Browse files
author
Will Bamberg
committed
Make examples responsive; add font and transform
1 parent 03ca0b5 commit 1b6da02

File tree

9 files changed

+76
-52
lines changed

9 files changed

+76
-52
lines changed

‎editable-samples-2/css/editable.css

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,6 @@ body {
3232
color: #C13832;
3333
}
3434

35-
p {
36-
padding: 0 0.5em;
37-
font: 14px "Open Sans", sans-serif;
38-
}
39-
4035
.example-choice {
4136
font-size: 14px;
4237
transition: background-color .2s ease-out;
@@ -89,3 +84,16 @@ p {
8984
[contenteditable]:focus {
9085
outline: 0px solid transparent;
9186
}
87+
88+
89+
@media (min-width: 800px) {
90+
#example-choice-list, #output {
91+
float: left;
92+
}
93+
#example-choice-list {
94+
width: 70%;
95+
}
96+
#output {
97+
width: 30%;
98+
}
99+
}

‎editable-samples-2/js/editable.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
var element = document.getElementById("example-element");
2+
var originalChoices = [];
3+
var initialChoice = 0;
24

35
function applyCode(code, choice) {
46
element.style.cssText = code;
@@ -67,6 +69,10 @@ document.addEventListener('cut', copyTextOnly);
6769
document.addEventListener('copy', copyTextOnly);
6870

6971
for (exampleChoice of exampleChoices) {
72+
originalChoices.push(exampleChoice.textContent);
73+
if (exampleChoice.getAttribute("initial-choice")) {
74+
initialChoice = indexOf(exampleChoices, exampleChoice);
75+
}
7076
exampleChoice.addEventListener("click", onChoose);
7177
exampleChoice.firstChild.addEventListener("keyup", onEdit);
7278
exampleChoice.querySelector(".reset").addEventListener("click", function(e) {
@@ -77,4 +83,4 @@ for (exampleChoice of exampleChoices) {
7783
});
7884
}
7985

80-
choose(exampleChoices[4]);
86+
choose(exampleChoices[initialChoice]);

‎editable-samples-2/pages/filter/index.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
</head>
99

1010
<body>
11-
11+
1212
<pre id="example-choice-list">
1313
<div class="example-choice"><code class="language-css">filter: url("svg/example.svg#element-id");</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
1414
<div class="example-choice"><code class="language-css">filter: blur(5px);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
1515
<div class="example-choice"><code class="language-css">filter: brightness(0.4);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
1616
<div class="example-choice"><code class="language-css">filter: contrast(200%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
17-
<div class="example-choice"><code class="language-css">filter: drop-shadow(16px 16px 20px blue);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
17+
<div class="example-choice" initial-choice="true"><code class="language-css">filter: drop-shadow(16px 16px 20px blue);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
1818
<div class="example-choice"><code class="language-css">filter: grayscale(50%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
1919
<div class="example-choice"><code class="language-css">filter: hue-rotate(90deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
2020
<div class="example-choice"><code class="language-css">filter: invert(75%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
@@ -27,10 +27,7 @@
2727
<img id="example-element" src="img/firefox.png"/>
2828
</div>
2929

30-
<p>Try editing the code sample that's selected above, or select a different sample.</p>
31-
3230
<script type="text/javascript" src="../../js/prism.js"></script>
33-
<script type="text/javascript" src="page.js"></script>
3431
<script type="text/javascript" src="../../js/editable.js"></script>
3532

3633
</body>

‎editable-samples-2/pages/filter/page.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎editable-samples-2/pages/font/css/element.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#output {
2+
overflow: hidden;
3+
}
4+
5+
#example-element {
6+
display: block;
7+
color: #C13832;
8+
}

‎editable-samples-2/pages/font/index.html

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,26 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link href="css/element.css" rel="stylesheet" type="text/css">
56
<link href="../../css/editable.css" rel="stylesheet"></link>
7+
<link href="../../css/prism.css" rel="stylesheet" type="text/css">
8+
69
</head>
710

811
<body>
912

10-
<pre id="example-choice-list">
11-
<div class="example-choice"><code class="language-css">font: italic 1.5em cursive;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
12-
<div class="example-choice"><code class="language-css">font: italic 1.5em cursive;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
13-
<div class="example-choice"><code class="language-css">font: italic 1.5em cursive;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
14-
<div class="example-choice"><code class="language-css">filter: contrast(200%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
15-
<div class="example-choice"><code class="language-css">filter: drop-shadow(16px 16px 20px blue);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
16-
<div class="example-choice"><code class="language-css">filter: grayscale(50%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
17-
<div class="example-choice"><code class="language-css">filter: hue-rotate(90deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
18-
<div class="example-choice"><code class="language-css">filter: invert(75%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
19-
<div class="example-choice"><code class="language-css">filter: opacity(25%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
20-
<div class="example-choice"><code class="language-css">filter: saturate(30%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
21-
<div class="example-choice"><code class="language-css">filter: sepia(60%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
22-
<div class="example-choice"><code class="language-css">filter: drop-shadow(16px 16px 20px red) invert(75%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div></pre>
23-
13+
<pre id="example-choice-list">
14+
<div class="example-choice" initial-choice="true"><code class="language-css">font: 1.2em "Open Sans", sans-serif;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
15+
<div class="example-choice"><code class="language-css">font: italic 2em "Open Sans", serif;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
16+
<div class="example-choice"><code class="language-css">font: italic small-caps bold 16px/2 cursive;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
17+
<div class="example-choice"><code class="language-css">font: small-caps bold 24px/1 sans-serif;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
18+
<div class="example-choice"><code class="language-css">font: caption;</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div></pre>
2419

2520
<div id="output">
2621
<span id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest.</span>
2722
</div>
28-
29-
<p>Try editing the selected example, or select a different example:</p>
30-
31-
<pre class="prettyprint lang-css" id="example-choice-list"><div class=" example-choice">/* size | family */<br/>font: 1.5em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | size | family */</br>font: italic 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | variant | weight | size/line-height | family */<br/>font: italic small-caps bolder 16px/3 cursive;</div><div class=" example-choice">/* style | variant | weight | stretch | size/line-height | family */<br/>font: italic small-caps bolder condensed 16px/3 cursive;</div><div class=" example-choice">/* The font used in system dialogs */<br/>font: message-box;</div></pre>
3223

33-
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
24+
<script type="text/javascript" src="../../js/prism.js"></script>
3425
<script type="text/javascript" src="../../js/editable.js"></script>
3526

3627
</body>

‎editable-samples-2/pages/transform/css/element.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#example-element {
2+
max-width: 80%;
3+
max-height: 80%;
4+
display: block;
5+
margin: 1em auto 0 auto;
6+
}

‎editable-samples-2/pages/transform/img/firefox.png

77.1 KB
Loading

‎editable-samples-2/pages/transform/index.html

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,42 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link href="css/element.css" rel="stylesheet" type="text/css">
56
<link href="../../css/editable.css" rel="stylesheet"></link>
7+
<link href="../../css/prism.css" rel="stylesheet" type="text/css">
8+
69
</head>
710

811
<body>
912

10-
<div id="output">
11-
<span id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest.</span>
12-
</div>
13-
14-
<p>Try editing the selected example, or select a different example:</p>
15-
16-
<pre class="prettyprint lang-css" id="example-choice-list"><div class=" example-choice">/* size | family */<br/>font: 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | size | family */</br>font: italic 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | variant | weight | size/line-height | family */<br/>font: italic small-caps bolder 16px/3 cursive;</div><div class=" example-choice">/* style | variant | weight | stretch | size/line-height | family */<br/>font: italic small-caps bolder condensed 16px/3 cursive;</div><div class=" example-choice">/* The font used in system dialogs */<br/>font: message-box;</div></pre>
13+
<pre id="example-choice-list"><div class="example-choice"><code class="language-css">transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
14+
<div class="example-choice"><code class="language-css">transform: matrix3d(1, 2, 3, 1, 2, 3, 3, 2, 1, 1, 2, 3, 3, 2, 1, 1);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
15+
<div class="example-choice"><code class="language-css">transform: translate(120px, 50%);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
16+
<div class="example-choice"><code class="language-css">transform: translateX(2em);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
17+
<div class="example-choice"><code class="language-css">transform: translateY(0.5in);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
18+
<div class="example-choice"><code class="language-css">transform: translateZ(2px);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
19+
<div class="example-choice"><code class="language-css">transform: translate3d(12px, 50%, 3em);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
20+
<div class="example-choice"><code class="language-css">transform: scale(2, 0.5);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
21+
<div class="example-choice"><code class="language-css">transform: scaleX(2);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
22+
<div class="example-choice"><code class="language-css">transform: scaleY(0.5);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
23+
<div class="example-choice"><code class="language-css">transform: scaleZ(0.3);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
24+
<div class="example-choice"><code class="language-css">transform: scale3d(2.5, 1.2, 0.3);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
25+
<div class="example-choice" initial-choice="true"><code class="language-css">transform: rotate(0.5turn);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
26+
<div class="example-choice"><code class="language-css">transform: rotate3d(1, 2.0, 3.0, 10deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
27+
<div class="example-choice"><code class="language-css">transform: rotateX(10deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
28+
<div class="example-choice"><code class="language-css">transform: rotateY(10deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
29+
<div class="example-choice"><code class="language-css">transform: skew(30deg, 20deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
30+
<div class="example-choice"><code class="language-css">transform: skewX(30deg);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
31+
<div class="example-choice"><code class="language-css">transform: skewY(1.07rad);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
32+
<div class="example-choice"><code class="language-css">transform: perspective(17px);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div>
33+
<div class="example-choice"><code class="language-css">transform: translateX(10px) rotate(10deg) translateY(5px);</code><img class="error hidden" title="Error: the CSS is invalid" src="../../img/alerticon-warning@2x.png" /><input class="reset" class="hidden" type="button" value="Reset" /></div></pre>
34+
35+
36+
<div id="output">
37+
<img id="example-element" src="img/firefox.png"/>
38+
</div>
1739

18-
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
40+
<script type="text/javascript" src="../../js/prism.js"></script>
1941
<script type="text/javascript" src="../../js/editable.js"></script>
2042

2143
</body>

0 commit comments

Comments
 (0)