Demo: Improve layout and design.

blueimp · blueimp · commit b9bb436cb968 · 2020-05-04T04:43:56.000+09:00
This adds support for a light/dark theme based on the OS color scheme setting.
diff --git a/css/demo.css b/css/demo.css
@@ -13,63 +13,133 @@ body {
   max-width: 750px;
   margin: 0 auto;
   padding: 1em;
-  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
-  font-size: 1em;
-  line-height: 1.4em;
-  background: #222;
-  color: #fff;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  line-height: 1.4;
+  background: #212121;
+  color: #dedede;
 }
 a {
-  color: orange;
+  color: #61afef;
   text-decoration: none;
 }
-img {
+a:visited {
+  color: #56b6c2;
+}
+a:hover {
+  color: #98c379;
+}
+figure,
+tr {
+  background: #363636;
+}
+tr:nth-child(odd) {
+  background: #414141;
+}
+td,
+th {
+  padding: 10px;
+  text-align: left;
+}
+table {
+  width: 100%;
+  word-wrap: break-word;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+figure {
+  margin: 0;
+  padding: 10px;
+  border-radius: 5px;
+  display: inline-block;
+}
+figure,
+table {
+  margin-bottom: 20px;
+}
+img,
+canvas {
   border: 0;
   vertical-align: middle;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
 h1 {
-  line-height: 1em;
+  margin-top: 0.5em;
 }
-textarea,
-input {
-  display: inline-block;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
+button,
+input,
+select,
+textarea {
   box-sizing: border-box;
-  padding: 10px;
-  margin: 0 0 10px;
-  font-family: 'Lucida Console', Monaco, monospace;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  padding: 5px;
 }
-.result {
-  padding: 20px 40px;
-  background: #fff;
-  color: #222;
+input[type='file'] {
+  padding: inherit;
 }
-.error {
-  color: red;
+
+#template,
+#data {
+  width: 100%;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+#result {
+  background: #363636;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #ececec;
+    color: #212121;
+  }
+  a {
+    color: #225c8d;
+  }
+  a:visited {
+    color: #378f9a;
+  }
+  a:hover {
+    color: #6fa349;
+  }
+  figure,
+  tr {
+    background: #fff;
+    color: #212121;
+  }
+  tr:nth-child(odd) {
+    background: #f6f6f6;
+  }
+
+  #result {
+    background: #fff;
+    padding: 20px;
+    border-radius: 5px;
+  }
 }
 
 @media (min-width: 481px) {
-  .navigation {
+  #navigation {
     list-style: none;
     padding: 0;
   }
-  .navigation li {
+  #navigation li {
     display: inline-block;
   }
-  .navigation li:not(:first-child):before {
-    content: '| ';
+  #navigation li:not(:first-child)::before {
+    content: ' | ';
   }
 }
-
-/* IE7 fixes */
-* + html textarea,
-* + html input {
-  width: 460px;
-}
-* + html .result {
-  width: 400px;
-}
diff --git a/index.html b/index.html
@@ -32,12 +32,11 @@ <h1>JavaScript Templates Demo</h1>
       <a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a>
       templating engine with zero dependencies.<br />
       Compatible with server-side environments like
-      <a href="http://nodejs.org/">Node.js</a>, module loaders like
-      <a href="http://requirejs.org/">RequireJS</a>,
-      <a href="http://browserify.org/">Browserify</a> or
-      <a href="https://webpack.github.io/">webpack</a> and all web browsers.
+      <a href="https://nodejs.org/">Node.js</a>, module loaders like
+      <a href="https://requirejs.org/">RequireJS</a> or
+      <a href="https://webpack.js.org/">webpack</a> and all web browsers.
     </p>
-    <ul class="navigation">
+    <ul id="navigation">
       <li>
         <a href="https://github.com/blueimp/JavaScript-Templates/tags"
           >Download</a
diff --git a/js/demo/demo.js b/js/demo/demo.js
@@ -73,7 +73,11 @@
     if (event) {
       event.preventDefault()
     }
-    templateInput.value = templateDemoNode.innerHTML
+    templateInput.value = templateDemoNode.innerHTML.replace(
+      // Replace unnecessary whitespace:
+      /^\n|\s+$| {6}/g,
+      ''
+    )
     dataInput.value = JSON.stringify(
       JSON.parse(templateDataNode.innerHTML),
       null,
