Improves some UX points

- adds titles to all UI elements
- changes color of select field to improve visibility of button
- adds text for select field
This commit is contained in:
procrastimax 2022-06-26 13:52:20 +02:00
parent 5f57ec35c2
commit f2cfe7e6e0
2 changed files with 18 additions and 12 deletions

View file

@ -1,6 +1,5 @@
<!doctype html> <!doctype html>
<html> <html lang="de">
<head> <head>
<title>YourCSI</title> <title>YourCSI</title>
<meta charset='utf-8' /> <meta charset='utf-8' />
@ -24,19 +23,22 @@
<h1>Your #ChinaScienceInvestigation</h1> <h1>Your #ChinaScienceInvestigation</h1>
<h4>Ein Projekt der <a href="http://ag-link.xyz">AG Link</a> </h4> <h4>Ein Projekt der <a href="http://ag-link.xyz">AG Link</a> </h4>
<div id="search"> <div id="search">
<input type="text" placeholder="e. g. Leipzig University" list="datalist" id="uni" <input title="Eingabe Suchbegriff" type="text" placeholder="e. g. Leipzig University" list="datalist" id="uni"
onkeyup="provide_suggestion(this.value)"> onkeyup="provide_suggestion(this.value)">
<datalist id="datalist"></datalist> <datalist id="datalist"></datalist>
<select id="risk"> <div title="ändere Risikokategorie" id="risk">
<option value="very high"> very high </option> Risikokategorie
<option value="high"> high </option> <select id="risk">
<option value="medium"> medium </option> <option value="very high"> sehr hoch </option>
<option value="low"> low </option> <option value="high"> hoch </option>
</select> <option value="medium"> mittel </option>
<option value="low"> niedrig </option>
</select>
</div>
<button type="button" id="submit" onclick='open_link(document.getElementById("uni").value, risk.value)'> <button title="Zeige Publikationen" type="button" id="submit" onclick='open_link(document.getElementById("uni").value, risk.value)'>
View Publications Zeige Publikationen
</button> </button>
</div> </div>
<a id="down-arrow" href="#text"></a> <a id="down-arrow" href="#text"></a>

View file

@ -144,6 +144,10 @@ nav ul li a:hover {
padding: 5px; padding: 5px;
} }
#risk {
background-color: white;
}
#down-arrow { #down-arrow {
position: absolute; position: absolute;
top: calc(100vh - 60px); top: calc(100vh - 60px);