styling

antfu · antfu · commit a66afb28392f · 2020-02-13T14:40:14.000+08:00
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# 片語 - Snippets Site for wenyan-lang
+# 文言片語 - Snippets Site for wenyan-lang
 
 http://snippets.wy-lang.org/
 
diff --git a/static/callback.html b/static/callback.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <pre id='out'></pre>
+  <script>
+    const query = new URLSearchParams(location.search)
+    
+    document.getElementById('out').innerText = JSON.stringify(query.getAll(), null, 2)
+  </script>
+</body>
+
diff --git a/static/client.js b/static/client.js
@@ -60,14 +60,6 @@ function newPreview(div, snip) {
   hdr.classList.add("code-header");
   div.appendChild(hdr);
 
-  // var cm = CodeMirror(div, {
-  //   value: snip.code,
-  //   mode:  "wenyan",
-  //   lineNumbers: true,
-  //   theme: "wenyan-light",
-  //   readOnly: true,
-  // });
-  // cm.setSize(300,128);
   var cm = document.createElement("pre");
   cm.classList.add("cm-s-wenyan-light");
   cm.classList.add("code-cell-inner");
@@ -76,7 +68,6 @@ function newPreview(div, snip) {
 
   var ftr = document.createElement("div");
   ftr.innerHTML = `
-    
     <i class="material-icons icon-icon">star</i>
     ${snip.votes || 0}
     <b class="icon-btn" id="btn-upvote"   onclick="onVote(${
@@ -360,14 +351,14 @@ document.getElementById("btn-new").onclick = function () {
   openEditor();
 };
 
-document.getElementById("inp-search").onkeypress = function (k) {
+document.getElementById("search").onkeypress = function (k) {
   if (k.key == "Enter") {
     document.getElementById("btn-search").click();
   }
 };
 
 document.getElementById("btn-search").onclick = function () {
-  var term = document.getElementById("inp-search").value;
+  var term = document.getElementById("search").value;
   document.getElementById("content").innerHTML = "";
   if (term[0] == "#") {
     fetch(`${baseUrl}/one`, {
diff --git a/static/editor.html b/static/editor.html
@@ -4,7 +4,7 @@
       border: 1px solid #ddd;
     }
   </style>
-  <iframe id="editor" src='https://wenyan-ide.netlify.com/embed?autorun&title=%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8&code=%E5%90%BE%E6%9C%89%E4%B8%80%E8%A8%80%E3%80%82%E6%9B%B0%E3%80%8C%E3%80%8C%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8%E3%80%82%E3%80%8D%E3%80%8D%E3%80%82%E6%9B%B8%E4%B9%8B%E3%80%82' height="400" width="600"></iframe>
+  <iframe id="editor" src='http://localhost:13331/embed?autorun&title=%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8&code=%E5%90%BE%E6%9C%89%E4%B8%80%E8%A8%80%E3%80%82%E6%9B%B0%E3%80%8C%E3%80%8C%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8%E3%80%82%E3%80%8D%E3%80%8D%E3%80%82%E6%9B%B8%E4%B9%8B%E3%80%82' height="400" width="600"></iframe>
 
   <br>
   <br>
diff --git a/static/index.html b/static/index.html
@@ -4,7 +4,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>wenyan-snippets</title>
+    <title>文言片語 - Snippets for wenyan-lang</title>
 
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -31,10 +31,11 @@
     <script src="/client.js" defer></script>
   </head>
   <body>
-    <div style="padding:5px;">
-      <input placeholder="Find 文言/wenyan Snippets" style="font-size: 20px" size="28" id="inp-search"/>
-      <i class="material-icons icon-btn" style="font-size:30px; transform:translate(0,8px)" id="btn-search">search</i>
-      <i class="material-icons icon-btn" style="font-size:32px; transform:translate(0,7px)" id="btn-new">add</i>
+    <div class="nav">
+      <label class="title">文言片語</label>
+      <input id="search" placeholder="Search snippets..." style="font-size: 20px" size="16" />
+      <span id="btn-search" class="iconify" data-icon="mdi:search" data-inline="false"></span>
+      <span id="btn-new" class="iconify" data-icon="mdi:plus" data-inline="false"></span>
     </div>
     <div id="content">
     </div>
diff --git a/static/style.css b/static/style.css
@@ -1,8 +1,50 @@
 
-body{
+body, html {
   font-family: sans-serif;
-/*   filter: invert(1);background:black; */
+  margin: 0;
 }
+
+.nav {
+  padding: 5px;
+  background: #f1f1f1;
+  border-bottom: 1px solid gainsboro;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  white-space: nowrap;
+}
+
+.nav * {
+  vertical-align: middle;
+}
+
+.nav .iconify {
+  font-size: 1.5em;
+  margin: 0.3rem;
+  color: #444;
+  cursor: pointer;
+}
+
+.nav input {
+  margin: 0.5rem;
+  padding: 0.1rem 0.5rem;
+}
+
+.nav .title {
+  color: #777;
+  margin: 0.5rem 1rem;
+  font-size: 1.1em;
+}
+
+#content {
+  margin-top: 3.6rem;
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
 .code-cell{
   margin: 5px;
   border-radius: 4px;
@@ -11,6 +53,7 @@ body{
   overflow: hidden;
   display: inline-block;
 }
+
 .code-header{
   color:grey;
   font-size: 12px;
@@ -83,9 +126,9 @@ body{
   margin: 5px;
 }
 .code-cell-inner{
-  width: 300px !important;
+  width: 100%;
   height: 128px !important;
-  overflow: scroll;
-  padding: 0px;
-  margin:0px;
+  overflow: hidden;
+  padding: 5px;
+  margin: 0px;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# 片語 - Snippets Site for wenyan-lang`
	`1`	`+# 文言片語 - Snippets Site for wenyan-lang`
`2`	`2`
`3`	`3`	`http://snippets.wy-lang.org/`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`border: 1px solid #ddd;`
`5`	`5`	`}`
`6`	`6`	`</style>`
`7`		`- <iframe id="editor" src='https://wenyan-ide.netlify.com/embed?autorun&title=%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8&code=%E5%90%BE%E6%9C%89%E4%B8%80%E8%A8%80%E3%80%82%E6%9B%B0%E3%80%8C%E3%80%8C%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8%E3%80%82%E3%80%8D%E3%80%8D%E3%80%82%E6%9B%B8%E4%B9%8B%E3%80%82' height="400" width="600"></iframe>`
	`7`	`+ <iframe id="editor" src='http://localhost:13331/embed?autorun&title=%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8&code=%E5%90%BE%E6%9C%89%E4%B8%80%E8%A8%80%E3%80%82%E6%9B%B0%E3%80%8C%E3%80%8C%E5%95%8F%E5%A4%A9%E5%9C%B0%E5%A5%BD%E5%9C%A8%E3%80%82%E3%80%8D%E3%80%8D%E3%80%82%E6%9B%B8%E4%B9%8B%E3%80%82' height="400" width="600"></iframe>`
`8`	`8`
`9`	`9`	`<br>`
`10`	`10`	`<br>`