Refactor and fix styling and search box interaction issues in site te…

…mplates.

site/base.html

@@ -41,7 +41,7 @@ <h3 class="intro">
             {{ range $d := .Dicts }}
               {{ $from := index $d 0}}
               {{ $to := index $d 1}}
-              <a href="#" class="tab" data-dict="{{ $from.ID }}-{{ $to.ID }}">
+              <a href="#" class="tab" data-dict="{{ $from.ID }}/{{ $to.ID }}">
                 {{ $from.Name }} - {{ $to.Name }}
               </a>
             {{ end }}

site/static/main.js

@@ -1,10 +1,12 @@
 function selectDict(dict) {
+  const langs = dict.split("/");
   localStorage.dict = dict;
+  localStorage.from_lang = langs[0];
+  localStorage.to_lang = langs[1];
 
   document.querySelectorAll(`.tabs .tab`).forEach((el) => el.classList.remove("sel"));
-  document.querySelector(`.tabs .tab[data-dict=${dict}]`).classList.add("sel");
-  document.querySelector("form.search-form").setAttribute("action", `/dictionary/${dict.replace("-", "/")}`);
-
+  document.querySelector(`.tabs .tab[data-dict='${dict}']`).classList.add("sel");
+  document.querySelector("form.search-form").setAttribute("action", `/dictionary/${dict}`);
   const q = document.querySelector("#q");
   q.focus();
   q.select();
@@ -13,9 +15,10 @@ function selectDict(dict) {
 // Capture the form submit and send it as a canonical URL instead
 // of the ?q query param. 
 function search(q) {
-  const val = q.trim().toLowerCase().replace(/[^a-z\u00E0-\u00FC\s]/ig, '').replace(/\s+/g, ' ');
-  const form = document.querySelector(".search-form").cloneNode(true);
-  document.location.href = form.getAttribute("action") + "/" + encodeURIComponent(val).replace(/%20/g, "+");
+  let val = q.trim().toLowerCase().replace(/\s+/g, ' ');
+
+  const uri = document.querySelector(".search-form").getAttribute("action");
+  document.location.href = `${uri}/${encodeURIComponent(val).replace(/%20/g, "+")}`;
 }
 
 
@@ -36,7 +39,7 @@ function search(q) {
 
   // Select a language tab on page load.
   let dict = document.querySelector(`.tabs .tab:first-child`).dataset.dict;
-  if (localStorage.dict && document.querySelector(`.tabs .tab[data-dict=${localStorage.dict}]`)) {
+  if (localStorage.dict && document.querySelector(`.tabs .tab[data-dict='${localStorage.dict}']`)) {
     dict = localStorage.dict;
   }
   selectDict(dict);
@@ -142,8 +145,8 @@ function search(q) {
           alert(`Error submitting: ${err}`);
         });
 
-        close();
         alert(form.dataset.success);
+        close();
       };
 
       form.querySelector("button.close").onclick = close;

site/static/style.css

@@ -13,12 +13,13 @@
 body {
   background: #f9f9f9;
   font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-  font-size: 17px;
-  line-height: 1.5;
-  letter-spacing: 0;
   margin: 0;
   color: var(--primary);
 }
+html, body {
+  font-size: 17px;
+  line-height: 1.5;  
+}
 
 img {
   max-width: 100%;
@@ -62,6 +63,7 @@ textarea,
 input:focus,
 select:focus {
   border-color: var(--secondary);
+  outline: none;
 }
 
 button, .button {
@@ -92,7 +94,7 @@ button:hover, .button:hover {
 }
 
 .box {
-  border-radius: 3px;
+  border-radius: 5px;
   box-shadow: 2px 2px 1px #eee;
   border: 1px solid #ddd;
   padding: 30px;
@@ -114,7 +116,7 @@ button:hover, .button:hover {
 
 .logo img {
   height: auto;
-  max-width: 200px;
+  max-width: 250px;
 }
   .home .logo img {
     max-width: 80%;
@@ -128,57 +130,49 @@ button:hover, .button:hover {
 }
 
 .search {
-  text-align: right;
   position: relative;
-  margin-top: 30px;
 }
   .search .tabs {
-    z-index: 10;
-    position: absolute;
-    top: -60%;
-    left: 15px;
-    margin: 0;
+    margin-left: 20px;
+    text-align: left;
   }
   .search .tab {
     background: #fff;
-    float: left;
     color: var(--light);
-    font-size: 0.875rem;
+    font-size: 0.8rem;
     text-decoration: none;
 
-    margin: 0 3px 0 0;
-    padding: 3px 10px;
-    border-radius: 3px 3px 0 0;
+    margin: 0 5px 0 0;
+    padding: 8px 15px;
+    border-radius: 4px 4px 0 0;
     border-width: 1px 1px 0 1px;
     border-style: solid;
-    border-color: #ddd;
+    border-color: #d6d6d6;
 
-    text-align: center;
     min-width: 130px;
   }
     .search .tab.sel {
       color: inherit;
       border-color: var(--secondary);
+      border-top-width: 2px;
     }
 .search-form {
-  position: relative;
-  z-index: 100;
 }
   .search-form input {
     width: 100%;
     font-size: 1.3rem;
-    padding: 10px;
+    padding: 15px;
   }
   .search-form button {
     position: absolute;
     right: 0;
-    top: 0;
+    top: 36px;
     bottom: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     line-height: 1rem;
 
-    padding: 10px 15px 8px 15px;
+    padding: 10px 20px 8px 20px;
   }
   .search-form button img {
     max-height: 32px;
@@ -192,7 +186,6 @@ button:hover, .button:hover {
   margin-bottom: 45px;
 }
 .entries .head {
-  margin-bottom: 10px;
   position: relative;
 }
   .entries .title {
@@ -202,17 +195,20 @@ button:hover, .button:hover {
     color: var(--light);
   }
 .entries .defs {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px 30px;
 }
   .entries li::marker {
     color: var(--lighter);
   }
   .entries .defs li {
-    margin-bottom: 6px;
+    margin-bottom: 10px;
     position: relative;
   }
+  .entries .defs li::marker {
+    font-size: 0.8em;
+  }
   .entries .defs li:hover {
-    background: #fafafa;
+    background: #f3f3f3;
   }
 
   .entries .defs .types {
@@ -344,14 +340,15 @@ button:hover, .button:hover {
   }
 
 .nav {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
   border-top: 1px dashed #ccc;
   padding: 10px 15px;
   font-size: .85rem;
   text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
   .nav a {
     text-decoration: none;
@@ -395,9 +392,8 @@ button:hover, .button:hover {
 
 /* Homepage */
 .home .wrap {
-  max-height: 475px;
   max-width: 750px;
-  padding: 60px 60px 90px 60px;
+  padding: 60px;
 }
 .home .container {
   margin-top: calc(50vh - (475px / 2));
@@ -422,8 +418,8 @@ button:hover, .button:hover {
 }
 
 @media screen and (min-width: 2000px) {
-  body, input, button, select, textarea {
-    font-size: 24px;
+  html, body, input, button, select, textarea {
+    font-size: 22px;
   }
   button {
     padding: 20px 30px;