Refactor and restyle default site template.

- Refactor font sizing, spacing, margins across screen widths. - Use checkboxes as tabs for better accessibility. - Refactor and simplify JS. - Use flexbox to fix search box button alignment, layout centering etc.
knadh · Nov 13, 2023 · 0f9604d · 0f9604d
1 parent e8831f0
commit 0f9604d
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 114 deletions.
diff --git a/site/base.html b/site/base.html
@@ -20,13 +20,14 @@
     {{- end -}}" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-
+	<script>window._ROOT_URL = "{{ .Consts.RootURL }}";</script>
 	<link rel="shortcut icon" href="{{ .Consts.RootURL }}/static/favicon.png?v={{ .AssetVer }}" type="image/x-icon" />
   <link href="{{ .Consts.RootURL }}/static/flexit.css?v={{ .AssetVer }}" rel="stylesheet" type="text/css" />
   <link href="{{ .Consts.RootURL }}/static/style.css?v={{ .AssetVer }}" rel="stylesheet" type="text/css" />
 </head>
 <body class="{{ if eq .Data.PageName "/"}}home{{ end }}">
-  <div class="container wrap box">
+<div class="wrap">
+  <section class="container main box">
     <header class="header">
       <div class="row">
         <div class="logo four columns">
@@ -41,12 +42,13 @@ <h3 class="intro">
             {{ range $d := .Dicts }}
               {{ $from := index $d 0}}
               {{ $to := index $d 1}}
-              <a href="#" class="tab" data-dict="{{ $from.ID }}/{{ $to.ID }}">
-                {{ $from.Name }} - {{ $to.Name }}
-              </a>
+                <input type="radio" name="dict" value="{{ $from.ID }}/{{ $to.ID }}" id="tab-{{ $from.ID }}-{{ $to.ID }}" />
+                <label class="tab" for="tab-{{ $from.ID }}-{{ $to.ID }}">
+                  {{ $from.Name }} - {{ $to.Name }}
+                </label>
             {{ end }}
           </div>
-          <form class="search-form" method="get" action="{{ .Consts.RootURL }}/dictionary/english/malayalam">
+          <form class="search-form" method="get" action="">
             <div>
               <input autofocus autocomplete="off" required placeholder=""
                 type="text" id="q" name="q" value="{{ if .Data.Query }}{{ .Data.Query.Query }}{{ end }}" />
@@ -73,11 +75,11 @@ <h3 class="intro">
           {{ end }}
       {{ end }}
     </nav>
-  </div>
+  </section>
   <footer class="footer">
     <a href="https://dict.press">Powered by dictpress</a>
   </footer>
-  <script src="{{ .Consts.RootURL }}/static/main.js?v={{ .AssetVer }}"></script>
+</div><!-- wrap -->
 
   <form class="box form-comments" data-success="{{ .L.T "public.suggestSubmitted" }}">
   <div>
@@ -89,6 +91,8 @@ <h4>{{ .L.T "public.submitTitle" }}</h4>
     </p>
   </div>
   </form>
+
+  <script src="{{ .Consts.RootURL }}/static/main.js?v={{ .AssetVer }}"></script>
 </body>
 
 </html>

diff --git a/site/results.html b/site/results.html
@@ -50,7 +50,8 @@ <h3 class="title">{{ $r.Content }}</h3>
             {{ end }}
         </ol>
     </div>
-    <div class="four columns related">
+    <div class="one column"></div>
+    <div class="three columns related">
         {{ if gt (len .Data.Results.Entries) $numResults  }}
             <h4>{{ .L.T "public.similarTitle" }}</h4>
             <ul>

diff --git a/site/static/main.js b/site/static/main.js
@@ -1,30 +1,34 @@
-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}`);
-  const q = document.querySelector("#q");
-  q.focus();
-  q.select();
-}
-
-// Capture the form submit and send it as a canonical URL instead
-// of the ?q query param. 
-function search(q) {
-  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, "+")}`;
-}
+(() => {
+  const elTabs = document.querySelectorAll(`.tabs input`);
+  const elForm = document.querySelector("form.search-form");
+  const elQ = document.querySelector("#q");
+  const defaultLang = document.querySelector(`.tabs input:first-child`).value;
+
+  function selectDict(dict) {
+    // dict is in the format '$fromLang/$toLang'.
+    const langs = dict.split("/");
+    const t = document.querySelector(`.tabs #tab-${langs[0]}-${langs[1]}`);
+    if (!t) {
+      return;
+    }
 
+    Object.assign(localStorage, { dict, from_lang: langs[0], to_lang: langs[1] });
 
-(() => {
-  // Search input.
-  const q = document.querySelector("#q");
+    t.checked = true;
+    elForm.setAttribute("action", `${_ROOT_URL}/dictionary/${dict}`);
+
+    elQ.focus();
+    elQ.select();
+  }
+
+  // Capture the form submit and send it as a canonical URL instead
+  // of the ?q query param. 
+  function search(q) {
+    let val = q.trim();
+
+    const uri = elForm.getAttribute("action");
+    document.location.href = `${uri}/${encodeURIComponent(val).replace(/%20/g, "+")}`;
+  }
 
   // On ~ press, focus search input.
   document.onkeydown = (function (e) {
@@ -37,26 +41,29 @@ function search(q) {
     q.select();
   });
 
-  // 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}']`)) {
-    dict = localStorage.dict;
-  }
-  selectDict(dict);
-
   // On language tab selector click.
-  document.querySelectorAll(`.tabs .tab`).forEach((el) => {
-    el.onclick = (e) => {
+  elTabs.forEach((el) => {
+    el.onchange = (e) => {
       e.preventDefault();
-      selectDict(e.target.dataset.dict);
+      selectDict(e.target.value);
     }
   });
 
   // Bind to form submit.
-  document.querySelector(".search-form").addEventListener("submit", function (e) {
+  elForm.addEventListener("submit", function (e) {
     e.preventDefault();
-    search(document.querySelector("#q").value);
+    search(elQ.value);
   });
+
+
+  // Select a language based on the page URL.
+  let dict = localStorage.dict || defaultLang;
+  const uri = /(dictionary)\/((.+?)\/(.+?))\//i.exec(document.location.href);
+  if (uri && uri.length == 5) {
+    dict = uri[2];
+  }
+
+  selectDict(dict);
 })();
 
 
@@ -152,4 +159,4 @@ function search(q) {
       form.querySelector("button.close").onclick = close;
     });
   })
-})();
+})();