Skip to content

Commit b9bb436

Browse files
blueimpblueimp
committed
Demo: Improve layout and design.
This adds support for a light/dark theme based on the OS color scheme setting.
1 parent 883bdd0 commit b9bb436

File tree

3 files changed

+117
-44
lines changed

3 files changed

+117
-44
lines changed

‎css/demo.css‎

Lines changed: 108 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,63 +13,133 @@ body {
1313
max-width: 750px;
1414
margin: 0 auto;
1515
padding: 1em;
16-
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
17-
font-size: 1em;
18-
line-height: 1.4em;
19-
background: #222;
20-
color: #fff;
21-
-webkit-text-size-adjust: 100%;
22-
-ms-text-size-adjust: 100%;
16+
font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
17+
sans-serif;
18+
line-height: 1.4;
19+
background: #212121;
20+
color: #dedede;
2321
}
2422
a {
25-
color: orange;
23+
color: #61afef;
2624
text-decoration: none;
2725
}
28-
img {
26+
a:visited {
27+
color: #56b6c2;
28+
}
29+
a:hover {
30+
color: #98c379;
31+
}
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 {
2962
border: 0;
3063
vertical-align: middle;
3164
}
65+
h1,
66+
h2,
67+
h3,
68+
h4,
69+
h5,
70+
h6 {
71+
margin-top: 1.5em;
72+
margin-bottom: 0.5em;
73+
}
3274
h1 {
33-
line-height: 1em;
75+
margin-top: 0.5em;
3476
}
35-
textarea,
36-
input {
37-
display: inline-block;
38-
width: 100%;
39-
-webkit-box-sizing: border-box;
40-
-moz-box-sizing: border-box;
77+
button,
78+
input,
79+
select,
80+
textarea {
4181
box-sizing: border-box;
42-
padding: 10px;
43-
margin: 0 0 10px;
44-
font-family: 'Lucida Console', Monaco, monospace;
82+
font-family: inherit;
83+
font-size: 100%;
84+
line-height: 1.15;
85+
margin: 0;
86+
padding: 5px;
4587
}
46-
.result {
47-
padding: 20px 40px;
48-
background: #fff;
49-
color: #222;
88+
input[type='file'] {
89+
padding: inherit;
5090
}
51-
.error {
52-
color: red;
91+
92+
#template,
93+
#data {
94+
width: 100%;
95+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
96+
}
97+
98+
#result {
99+
background: #363636;
100+
padding: 20px;
101+
border-radius: 5px;
102+
}
103+
104+
@media (prefers-color-scheme: light) {
105+
body {
106+
background: #ececec;
107+
color: #212121;
108+
}
109+
a {
110+
color: #225c8d;
111+
}
112+
a:visited {
113+
color: #378f9a;
114+
}
115+
a:hover {
116+
color: #6fa349;
117+
}
118+
figure,
119+
tr {
120+
background: #fff;
121+
color: #212121;
122+
}
123+
tr:nth-child(odd) {
124+
background: #f6f6f6;
125+
}
126+
127+
#result {
128+
background: #fff;
129+
padding: 20px;
130+
border-radius: 5px;
131+
}
53132
}
54133

55134
@media (min-width: 481px) {
56-
.navigation {
135+
#navigation {
57136
list-style: none;
58137
padding: 0;
59138
}
60-
.navigation li {
139+
#navigation li {
61140
display: inline-block;
62141
}
63-
.navigation li:not(:first-child):before {
64-
content: '| ';
142+
#navigation li:not(:first-child)::before {
143+
content: ' | ';
65144
}
66145
}
67-
68-
/* IE7 fixes */
69-
* + html textarea,
70-
* + html input {
71-
width: 460px;
72-
}
73-
* + html .result {
74-
width: 400px;
75-
}

‎index.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,11 @@ <h1>JavaScript Templates Demo</h1>
3232
<a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a>
3333
templating engine with zero dependencies.<br />
3434
Compatible with server-side environments like
35-
<a href="http://nodejs.org/">Node.js</a>, module loaders like
36-
<a href="http://requirejs.org/">RequireJS</a>,
37-
<a href="http://browserify.org/">Browserify</a> or
38-
<a href="https://webpack.github.io/">webpack</a> and all web browsers.
35+
<a href="https://nodejs.org/">Node.js</a>, module loaders like
36+
<a href="https://requirejs.org/">RequireJS</a> or
37+
<a href="https://webpack.js.org/">webpack</a> and all web browsers.
3938
</p>
40-
<ul class="navigation">
39+
<ul id="navigation">
4140
<li>
4241
<a href="https://github.com/blueimp/JavaScript-Templates/tags"
4342
>Download</a

‎js/demo/demo.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,11 @@
7373
if (event) {
7474
event.preventDefault()
7575
}
76-
templateInput.value = templateDemoNode.innerHTML
76+
templateInput.value = templateDemoNode.innerHTML.replace(
77+
// Replace unnecessary whitespace:
78+
/^\n|\s+$| {6}/g,
79+
''
80+
)
7781
dataInput.value = JSON.stringify(
7882
JSON.parse(templateDataNode.innerHTML),
7983
null,

0 commit comments

Comments
 (0)