Skip to content

Commit

Permalink
Refactor and restyle default site template.
Browse files Browse the repository at this point in the history 
- 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.
  • Loading branch information
@knadh
knadh committed Nov 13, 2023
1 parent e8831f0 commit 0f9604d
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 114 deletions.
20 changes: 12 additions & 8 deletions site/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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 }}" />
Expand All @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion site/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
83 changes: 45 additions & 38 deletions site/static/main.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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);
})();


Expand Down Expand Up @@ -152,4 +159,4 @@ function search(q) {
form.querySelector("button.close").onclick = close;
});
})
})();
})();
Loading

0 comments on commit 0f9604d

Please sign in to comment.