searchengines-web/MeiliSearch
searchengines-web/MeiliSearch
1
0
Fork 0
mirror of https://github.com/meilisearch/MeiliSearch synced 2024-11-23 13:24:27 +01:00
Code Issues Releases Wiki Activity

[UI] Optimisation of bulma use and accessibility

Browse Source
This commit is contained in:
Joffrey Gentreau 2020-11-26 10:43:34 +01:00
parent d6c76b02e3
commit cd1a3ad7c9
1 changed files with 107 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
meilisearch-http/public/interface.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bulma.min.css"> <link rel="stylesheet" href="bulma.min.css">
<title>MeiliSearch</title> <title>MeiliSearch</title>
<style> <style>
em { em {
@ -28,8 +28,6 @@
} }
.document { .document {
padding: 20px 20px;
background-color: #f5f5f5;
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
@ -40,121 +38,141 @@
max-width: 75%; max-width: 75%;
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style-type: none;
} }
.document ol li {
list-style: none;
}
.document .image {
max-width: 50%;
margin: 0 auto;
box-sizing: border-box;
}
@media screen and (min-width: 770px) {
.document .image { .document .image {
max-width: 25%; max-width: 25%;
flex: 0 0 25%; flex: 0 0 25%;
margin: 0;
padding-left: 30px; padding-left: 30px;
box-sizing: border-box; box-sizing: border-box;
} }
}
.document .image img { .document .image img {
width: 100%; width: 100%;
} }
.field { .attribute {
list-style-type: none; text-align: center;
display: flex; box-sizing: border-box;
flex-wrap: wrap; text-transform: uppercase;
} font-weight: bold;
color: rgba(0,0,0,.7);
.field:not(:last-child) {
margin-bottom: 7px;
} }
@media screen and (min-width: 770px) {
.attribute { .attribute {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;
font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
text-transform: uppercase; }
color: rgba(0,0,0,.7); }
@media screen and (max-width: 770px) {
.attribute {
padding-bottom: 0;
}
} }
.content { .content {
max-width: 75%;
flex: 0 0 75%; flex: 0 0 75%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px;
color: rgba(0,0,0,.9); color: rgba(0,0,0,.9);
overflow-wrap: break-word; overflow-wrap: anywhere;
}
.hero-foot {
padding-bottom: 3rem;
}
@media screen and (max-width: 770px) {
.align-on-mobile {
text-align: center;
}
} }
</style> </style>
</head> </head>
<body> <body>
<section class="hero is-light"> <section class="hero is-light">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<h1 class="title"> <div class="content is-medium align-on-mobile">
<h1 class="title is-1 is-spaced">
Welcome to MeiliSearch Welcome to MeiliSearch
</h1> </h1>
<h2 class="subtitle"> <p class="subtitle is-4">
This dashboard will help you check the search results with ease. This dashboard will help you check the search results with ease.
</h2> </p>
</div>
<div class="columns">
<div class="column is-4">
<div class="field"> <div class="field">
<!-- API Key --> <!-- API Key -->
<div class="field"> <label class="label" for="apiKey">API Key (optionnal)</label>
<div class="control"> <div class="control">
<input id="apiKey" class="input is-small" type="password" placeholder="API key (optional)"> <input id="apiKey" class="input is-small" type="password" placeholder="Enter your API key">
<div class="help">At least a private API key is required for the dashboard to access the indexes list.</div> </div>
<p class="help">At least a private API key is required for the dashboard to access the indexes list.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="columns">
</div> <div class="column is-8">
</div> <label class="label" for="search">Search something</label>
</section> <div class="field has-addons">
<div class="control">
<section class="hero container">
<div class="notification" style="border-radius: 0 0 4px 4px;">
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<div class="field has-addons has-addons-right">
<p class="control">
<span class="select"> <span class="select">
<select id="index"> <select role="listbox" id="index" aria-label="Select the index you want to search on">
<!-- indexes names --> <!-- indexes names -->
</select> </select>
</span> </span>
</p> </div>
<p class="control"> <div class="control is-expanded">
<input id="search" class="input" type="text" autofocus placeholder="e.g. George Clooney"> <input id="search" class="input" type="search" autofocus placeholder="e.g. George Clooney" aria-label="Search through your documents">
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column is-4">
<!-- Right side --> <div class="columns">
<nav class="level-right"> <div class="column is-6 has-text-centered">
<div class="level-item has-text-centered">
<div>
<p class="heading">Documents</p> <p class="heading">Documents</p>
<p id="count" class="title">0</p> <p id="count" class="title">0</p>
</div> </div>
</div> <div class="column is-6 has-text-centered">
<div class="level-item has-text-centered">
<div>
<p class="heading">Time Spent</p> <p class="heading">Time Spent</p>
<p id="time" class="title">N/A</p> <p id="time" class="title">N/A</p>
</div> </div>
</div> </div>
</nav> </div>
</nav> </div>
</div>
</div> </div>
</section> </section>
<section> <section>
<div class="container">
<ol id="results" class="content"> <ol id="results" class="content">
<!-- documents matching resquests --> <!-- documents matching resquests -->
</ol> </ol>
</div>
</section> </section>
</body> </body>
@ -230,9 +248,12 @@
delete element._formatted; delete element._formatted;
const elem = document.createElement('li'); 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; let image = undefined;
for (const prop in element) { for (const prop in element) {
@ -243,15 +264,16 @@
} }
} }
const field = document.createElement('li'); const field = document.createElement('div');
field.classList.add("field"); field.classList.add("columns");
const attribute = document.createElement('div'); const attribute = document.createElement('div');
attribute.classList.add("attribute"); attribute.classList.add("attribute", "column");
attribute.innerHTML = prop; attribute.innerHTML = prop;
const content = document.createElement('div'); const content = document.createElement('div');
content.classList.add("content"); content.classList.add("content", "column");
if (typeof (element[prop]) === "object") { if (typeof (element[prop]) === "object") {
content.innerHTML = JSON.stringify(element[prop]); content.innerHTML = JSON.stringify(element[prop]);
} else { } else {
@ -261,19 +283,22 @@
field.appendChild(attribute); field.appendChild(attribute);
field.appendChild(content); field.appendChild(content);
ol.appendChild(field); info.appendChild(field);
} }
elem.appendChild(ol); div.appendChild(info);
elem.appendChild(div);
if (image != undefined) { if (image != undefined) {
const div = document.createElement('div'); const divImage = document.createElement('div');
div.classList.add("image"); divImage.classList.add("image","column","align-on-mobile");
const img = document.createElement('img'); const img = document.createElement('img');
img.src = image; img.src = image;
img.setAttribute("alt","Item illustration");
div.appendChild(img); divImage.appendChild(img);
div.appendChild(divImage);
elem.appendChild(div); elem.appendChild(div);
} }