feat(render): update browser preview ui

src/preview/browser/builder.rs

@@ -52,6 +52,7 @@ impl<'a> Builder<'a> {
         format!(
             include_str!("statics/template.html"),
             style = include_str!("statics/style.css"),
+            script = include_str!("statics/script.js"),
             font_previews = self
                 .families
                 .into_iter()

src/preview/browser/statics/preview_block_template.html

@@ -1,4 +1,8 @@
-<div class="item">
-    <p class="preview" style="font-family: '{family}'">{char}</p>
-    <p class="fontName">{family}</p>
+<div class="card">
+    <div class="pb">
+        <p class="preview" style="font-family: '{family}'">{char}</p>
+    </div>
+    <div class="fb">
+        <p class="font-name">{family}</p>
+    </div>
 </div>

src/preview/browser/statics/script.js

@@ -0,0 +1,23 @@
+const colToHex = (c) => {
+  let color = (c < 75) ? c + 75 : c
+  let hex = color.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+const rgbToHex = (r,g,b) => {
+  return "#" + colToHex(r) + colToHex(g) + colToHex(b);
+}
+
+const getRandomColor = () => {
+  return rgbToHex(
+    Math.floor(Math.random() * 255),
+    Math.floor(Math.random() * 255),
+    Math.floor(Math.random() * 255));
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const cards = document.getElementsByClassName("card");
+  for (i = 0; i < cards.length; i++) {
+    cards[i].style.backgroundColor = getRandomColor();
+  }
+});

src/preview/browser/statics/style.css

@@ -1,72 +1,56 @@
-a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code,
-dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
-header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby,
-s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u,
-ul, var, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    font-size: 1.5em;
-    line-height: 2rem;
-    font-weight: 400;
-    font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
-    color: #222;
-    height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:after, blockquote:before, q:after, q:before {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
 .container {
+    justify-content: center;
+    padding: 0.01em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  body {
+    font-size: 80px;
+    background: #222;
+  }
+
+  p {
+    color: #222;
+  }
+
+  .pb {
+    height: 320px;
+    width: 240px;
     position: relative;
-    font-size: 32px;
-    min-height: 100vh;
-    width: 100%;
-    height: 100%;
-    padding: 1rem;
     display: flex;
-    background-color: #e1e1e1;
-    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .preview {
+    position: absolute;
+    font-size: 2em;
     text-align: center;
-    box-sizing: border-box;
-}
-.container .item {
+    margin: 0;
+  }
+
+  .fb {
+    margin-top: -0.2em;
+    margin-bottom: 0.5em;
+    padding-left: 0.1em;
+    height: 10px;
+    width: 220px;
     position: relative;
-    display: inline-block;
-    flex: 1 1 auto;
-    padding: 1rem;
-    margin: 1rem;
-    text-align: center;
-    background-color: #fafafa;
-    border: 3px solid transparent;
-}
-.container .item .preview {
-    padding: 1.5rem 6.5rem;
-    line-height: 1.4em;
-    font-size: 2.827em;
-}
-.container .item .fontName {
-    font-size: .85rem;
-    color: #bfbfbf;
-    letter-spacing: 0.5px;
-}
+  }
+
+  .card {
+    margin: 0.05em;
+    padding: 0.1em;
+    border-radius: 0.1em;
+  }
+
+  .font-name {
+    border-top: 2px solid #222;
+    font-family: sans-serif;
+    font-size: 2px;
+    padding-left: 0.5em;
+    padding-top: 0.8em;
+  }
+

src/preview/browser/statics/template.html

@@ -14,4 +14,8 @@
     {font_previews}
 </div>
 </body>
-</html>
+</html>
+
+<script>
+    {script}
+</script>