Skip to content

Commit 6d2aefb

Browse files
blueimpblueimp
committed
Demo: Update design and layout.
1 parent 5de93db commit 6d2aefb

File tree

2 files changed

+67
-74
lines changed

2 files changed

+67
-74
lines changed

‎css/demo.css‎

Lines changed: 53 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
*/
1111

1212
body {
13-
max-width: 750px;
13+
max-width: 990px;
1414
margin: 0 auto;
1515
padding: 1em;
1616
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
1717
Arial, sans-serif;
18+
-webkit-text-size-adjust: 100%;
1819
line-height: 1.4;
1920
background: #212121;
2021
color: #dedede;
@@ -29,39 +30,6 @@ a:visited {
2930
a:hover {
3031
color: #98c379;
3132
}
32-
figure,
33-
tr {
34-
background: #363636;
35-
}
36-
tr:nth-child(odd) {
37-
background: #414141;
38-
}
39-
td,
40-
th {
41-
padding: 10px;
42-
text-align: left;
43-
}
44-
table {
45-
width: 100%;
46-
word-wrap: break-word;
47-
table-layout: fixed;
48-
border-collapse: collapse;
49-
}
50-
figure {
51-
margin: 0;
52-
padding: 10px;
53-
border-radius: 5px;
54-
display: inline-block;
55-
}
56-
figure,
57-
table {
58-
margin-bottom: 20px;
59-
}
60-
img,
61-
canvas {
62-
border: 0;
63-
vertical-align: middle;
64-
}
6533
h1,
6634
h2,
6735
h3,
@@ -74,32 +42,61 @@ h6 {
7442
h1 {
7543
margin-top: 0.5em;
7644
}
45+
label {
46+
display: inline-block;
47+
margin-bottom: 0.25em;
48+
}
7749
button,
78-
input,
7950
select,
80-
textarea {
51+
input,
52+
textarea,
53+
div.result {
54+
-webkit-appearance: none;
8155
box-sizing: border-box;
56+
margin: 0;
57+
padding: 0.5em 0.75em;
8258
font-family: inherit;
8359
font-size: 100%;
84-
line-height: 1.15;
85-
margin: 0;
86-
padding: 5px;
87-
}
88-
input[type='file'] {
89-
padding: inherit;
90-
max-width: 100%;
60+
line-height: 1.4;
61+
background: #414141;
62+
color: #dedede;
63+
border: 1px solid #363636;
64+
border-radius: 5px;
65+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
9166
}
92-
93-
#template,
94-
#data {
67+
input,
68+
textarea,
69+
div.result {
9570
width: 100%;
96-
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
71+
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
72+
}
73+
textarea {
74+
display: block;
75+
overflow: auto;
76+
}
77+
button {
78+
background: #3c76a7;
79+
background: linear-gradient(180deg, #3c76a7, #225c8d);
80+
border-color: #225c8d;
81+
color: #fff;
82+
}
83+
button[type='submit'] {
84+
background: #6fa349;
85+
background: linear-gradient(180deg, #6fa349, #568a30);
86+
border-color: #568a30;
87+
}
88+
button[type='reset'] {
89+
background: #d79435;
90+
background: linear-gradient(180deg, #d79435, #be7b1c);
91+
border-color: #be7b1c;
92+
}
93+
button:active {
94+
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
9795
}
9896

99-
#result {
100-
background: #363636;
101-
padding: 20px;
102-
border-radius: 5px;
97+
pre,
98+
textarea.code {
99+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
103100
}
104101

105102
@media (prefers-color-scheme: light) {
@@ -116,23 +113,16 @@ input[type='file'] {
116113
a:hover {
117114
color: #6fa349;
118115
}
119-
figure,
120-
tr {
116+
input,
117+
textarea,
118+
div.result {
121119
background: #fff;
120+
border-color: #d1d1d1;
122121
color: #212121;
123122
}
124-
tr:nth-child(odd) {
125-
background: #f6f6f6;
126-
}
127-
128-
#result {
129-
background: #fff;
130-
padding: 20px;
131-
border-radius: 5px;
132-
}
133123
}
134124

135-
@media (min-width: 481px) {
125+
@media (min-width: 540px) {
136126
#navigation {
137127
list-style: none;
138128
padding: 0;

‎index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,20 @@ <h1>JavaScript Templates Demo</h1>
5757
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
5858
</ul>
5959
<form>
60-
<h2>Template</h2>
61-
<textarea rows="12" id="template"></textarea>
62-
<br />
63-
<h2>Data (JSON)</h2>
64-
<textarea rows="14" id="data"></textarea>
65-
<br />
66-
<button type="submit" id="render">Render</button>
67-
<button type="reset" id="reset">Reset</button>
60+
<p>
61+
<label for="template">Template</label>
62+
<textarea rows="12" id="template" class="code"></textarea>
63+
</p>
64+
<p>
65+
<label for="data">Data (JSON)</label>
66+
<textarea rows="14" id="data" class="code"></textarea>
67+
</p>
68+
<p>
69+
<button type="submit" id="render">Render</button>
70+
<button type="reset" id="reset">Reset</button>
71+
</p>
6872
<h2>Result</h2>
6973
<div id="result" class="result"></div>
70-
<br />
7174
</form>
7275
<script type="text/x-tmpl" id="tmpl-demo">
7376
<h3>{%=o.title%}</h3>
@@ -95,8 +98,8 @@ <h4>Features</h4>
9598
}
9699
</script>
97100
<script type="text/x-tmpl" id="tmpl-error">
98-
<h3 class="error">{%=o.title%}</h3>
99-
<code>{%=o.error%}</code>
101+
<h5>{%=o.title%}</h5>
102+
<pre>{%=o.error.toString()%}</pre>
100103
</script>
101104
<script src="js/tmpl.js"></script>
102105
<script src="js/demo/demo.js"></script>

0 commit comments

Comments
 (0)