Refactor

typicode · typicode · commit 91ae73273a97 · 2017-03-03T01:08:04.000+01:00
diff --git a/src/server/public/index.html b/src/server/public/index.html
@@ -1,11 +1,11 @@
 <html>
   <head>
     <title>JSON Server</title>
-    <link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
     <link rel="stylesheet" href="stylesheets/style.css">
   </head>
   <body>
-    <div class="container">
+    <main class="container">
       <p>
         <a href="https://github.com/typicode/json-server" class="logo">
           <img src="images/json.png">
@@ -54,13 +54,14 @@ <h4>Issues</h4>
       <p>Please go
         <a href="https://github.com/typicode/json-server/issues">here</a>.
       </p>
+    </main>
 
+    <footer class="container">
       <hr>
-
       <p>
-        <i>To replace this page, create an index.html file in ./public, JSON Server will load it.</i>
+        To replace this page, create an index.html file in ./public, JSON Server will load it.
       </p>
-    </div>
+    </footer>
 
     <script src="https://unpkg.com/mithril/mithril.min.js"></script>
     <script src="main.js"></script>
diff --git a/src/server/public/main.js b/src/server/public/main.js
@@ -33,8 +33,11 @@ m.mount(
     view: function () {
       return [
         m('p', 'And the custom routes:'),
-        m('ul', Object.keys(rules).map(function (rule) {
-          return m('li', rule + ' → ' + rules[rule])
+        m('table', Object.keys(rules).map(function (rule) {
+          return m('tr', [
+            m('td', rule),
+            m('td', '⇢ ' + rules[rule])
+          ])
         }))
       ]
     }
diff --git a/src/server/public/stylesheets/style.css b/src/server/public/stylesheets/style.css
@@ -1,16 +1,47 @@
-a {
-  color: #1882BC !important;
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
+  padding: 2rem 0;
+}
+
+a, a:hover {
+  color: #1882BC;
+  text-decoration: underline;
+}
+
+table {
+  margin-left: 30px;
+}
+
+td {
+  border: 0;
+}
+
+td:first-child {
+  width:1%;
+  white-space:nowrap;
+  color: #1882BC;
 }
 
 img {
   padding-top: 50px;
   padding-bottom: 20px;
 }
 
-li {
-  list-style-type: square;
+ul {
+  list-style-position: inside;
+  padding-left: 30px;
 }
 
-h4 {
-  padding-top: 20px;
-}
+li {
+  list-style-type: none;
+}

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,11 @@ m.mount(`
`33`	`33`	`view: function () {`
`34`	`34`	`return [`
`35`	`35`	`m('p', 'And the custom routes:'),`
`36`		`- m('ul', Object.keys(rules).map(function (rule) {`
`37`		`- return m('li', rule + ' → ' + rules[rule])`
	`36`	`+ m('table', Object.keys(rules).map(function (rule) {`
	`37`	`+ return m('tr', [`
	`38`	`+ m('td', rule),`
	`39`	`+ m('td', '⇢ ' + rules[rule])`
	`40`	`+ ])`
`38`	`41`	`}))`
`39`	`42`	`]`
`40`	`43`	`}`