PTEROSOR/QUESTDB_website
10
0
Fork 0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-07-23 03:07:44 +02:00
Code Releases Activity

Using css to align form element by fieldset

Browse Source
This commit is contained in:
Mickaël Véril 2019-10-10 10:40:34 +02:00
parent 0a08a52d15
commit cdff5c60a5
3 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/multipledataset.html
View File

@ -4,6 +4,7 @@ date: 2019-09-27 16:41
draft: false draft: false
--- ---
<link rel="stylesheet" type="text/css" href="/css/modal.css" /> <link rel="stylesheet" type="text/css" href="/css/modal.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<script src="/js/data.js" type="text/javascript"></script> <script src="/js/data.js" type="text/javascript"></script>
<script src="/js/loadAllData.js" type="text/javascript"></script> <script src="/js/loadAllData.js" type="text/javascript"></script>
<script src="/js/getFullDataPath.js" type="text/javascript"></script> <script src="/js/getFullDataPath.js" type="text/javascript"></script>
@ -284,7 +285,7 @@ draft: false
<input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input> <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset class="table">
<div> <div>
<label for="mol_select">Molecule</label> <label for="mol_select">Molecule</label>
<select multiple id="mol_select" name="molecule"></select> <select multiple id="mol_select" name="molecule"></select>

63
content/singledataset.html
View File

@ -4,6 +4,7 @@ date: 2019-08-29 09:00
draft: false draft: false
--- ---
<link rel="stylesheet" type="text/css" href="/css/modal.css" /> <link rel="stylesheet" type="text/css" href="/css/modal.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<script src="/js/processingIndicator.js" type="text/javascript"></script> <script src="/js/processingIndicator.js" type="text/javascript"></script>
<script src="/js/data.js" type="text/javascript"></script> <script src="/js/data.js" type="text/javascript"></script>
<script src="/js/loadAllData.js" type="text/javascript"></script> <script src="/js/loadAllData.js" type="text/javascript"></script>
@ -74,14 +75,14 @@ draft: false
const LatexInline = ['\\(', '\\)'] const LatexInline = ['\\(', '\\)']
var md = []; var md = [];
var els = []; var els = [];
var customRenderingProp = ["excitations", "sourceFile","DOI"] var customRenderingProp = ["excitations", "sourceFile", "DOI"]
const fullNames={ const fullNames = {
Abs:'Absorption', Abs: 'Absorption',
Fluo:"Fluorescence", Fluo: "Fluorescence",
ZPE:"ZPE" ZPE: "ZPE"
} }
for (const key of Object.keys(window.data)) { for (const key of Object.keys(window.data)) {
if (window.data[key] != null) { if (window.data[key] != null) {
md.push(fullNames[key]) md.push(fullNames[key])
for (const prop of Object.keys(window.data[key])) { for (const prop of Object.keys(window.data[key])) {
if (!(customRenderingProp.includes(prop))) if (!(customRenderingProp.includes(prop)))
@ -150,30 +151,32 @@ draft: false
For this select a method for absorption, fluorescence or ZPE For this select a method for absorption, fluorescence or ZPE
</p> </p>
<form> <form>
<div> <fieldset class="table">
<label for="select_mol">Select a molecule</label> <div>
<select id="select_mol" onchange="select_mol_onchange(event)"> <label for="select_mol">Select a molecule</label>
<option value="" disabled=true selected=true>Select a molecule</option> <select id="select_mol" onchange="select_mol_onchange(event)">
</select> <option value="" disabled=true selected=true>Select a molecule</option>
</div> </select>
<div> </div>
<label for="select_abs">Select an absorption method</label> <div>
<select id="select_abs" onchange="select_abs_onchange(event)"> <label for="select_abs">Select an absorption method</label>
<option value="" disabled=true selected=true>Select an absorption method</option> <select id="select_abs" onchange="select_abs_onchange(event)">
</select> <option value="" disabled=true selected=true>Select an absorption method</option>
</div> </select>
<div> </div>
<label for="select_fluo">Select a fluorescence method</label> <div>
<select id="select_fluo" onchange="select_fluo_onchange(event)"> <label for="select_fluo">Select a fluorescence method</label>
<option value="" disabled=true selected=true>Select a fluorescence method</option> <select id="select_fluo" onchange="select_fluo_onchange(event)">
</select> <option value="" disabled=true selected=true>Select a fluorescence method</option>
</div> </select>
<div> </div>
<label for="select_ZPE">Select a ZPE method</label> <div>
<select id="select_ZPE" onchange="select_ZPE_onchange(event)"> <label for="select_ZPE">Select a ZPE method</label>
<option value="" disabled=true selected=true>Select a ZPE method</option> <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
</select> <option value="" disabled=true selected=true>Select a ZPE method</option>
</div> </select>
</div>
</fieldset>
</form> </form>
<h1>Data</h1> <h1>Data</h1>
<section id=data> <section id=data>

16
static/css/form.css Normal file
View File

@ -0,0 +1,16 @@
form fieldset.table {
display: table;
}
form fieldset.table div {
display: table-row;
}
form fieldset.table input, form fieldset.table select, form fieldset.table label {
display: table-cell;
margin: 3px;
}
form fieldset.table label {
text-align: right;
}