From cd1a3ad7c95210d166f222a04d55f4c6709eddf6 Mon Sep 17 00:00:00 2001 From: Joffrey Gentreau <13904635+JoffreyGe@users.noreply.github.com> Date: Thu, 26 Nov 2020 10:43:34 +0100 Subject: [PATCH] [UI] Optimisation of bulma use and accessibility --- meilisearch-http/public/interface.html | 189 ++++++++++++++----------- 1 file changed, 107 insertions(+), 82 deletions(-) diff --git a/meilisearch-http/public/interface.html b/meilisearch-http/public/interface.html index 894a7e018..ca3005392 100644 --- a/meilisearch-http/public/interface.html +++ b/meilisearch-http/public/interface.html @@ -3,7 +3,7 @@ - + MeiliSearch
+
-

- Welcome to MeiliSearch -

-

- This dashboard will help you check the search results with ease. -

- -
- -
-
- -
At least a private API key is required for the dashboard to access the indexes list.
+
+

+ Welcome to MeiliSearch +

+

+ This dashboard will help you check the search results with ease. +

+
+
+
+
+ + +
+ +
+

At least a private API key is required for the dashboard to access the indexes list.

- -
-
-
- -
-
- - - +
+ +
-
    - -
+
+
    + +
+
@@ -230,9 +248,12 @@ delete element._formatted; const elem = document.createElement('li'); - elem.classList.add("document"); + elem.classList.add("document","box"); - const ol = document.createElement('ol'); + const div = document.createElement('div'); + div.classList.add("columns","is-desktop","is-tablet"); + const info = document.createElement('div'); + info.classList.add("column","align-on-mobile"); let image = undefined; for (const prop in element) { @@ -243,15 +264,16 @@ } } - const field = document.createElement('li'); - field.classList.add("field"); + const field = document.createElement('div'); + field.classList.add("columns"); const attribute = document.createElement('div'); - attribute.classList.add("attribute"); + attribute.classList.add("attribute", "column"); attribute.innerHTML = prop; const content = document.createElement('div'); - content.classList.add("content"); + content.classList.add("content", "column"); + if (typeof (element[prop]) === "object") { content.innerHTML = JSON.stringify(element[prop]); } else { @@ -261,19 +283,22 @@ field.appendChild(attribute); field.appendChild(content); - ol.appendChild(field); + info.appendChild(field); } - elem.appendChild(ol); + div.appendChild(info); + elem.appendChild(div); if (image != undefined) { - const div = document.createElement('div'); - div.classList.add("image"); - + const divImage = document.createElement('div'); + divImage.classList.add("image","column","align-on-mobile"); + const img = document.createElement('img'); img.src = image; + img.setAttribute("alt","Item illustration"); - div.appendChild(img); + divImage.appendChild(img); + div.appendChild(divImage); elem.appendChild(div); }