rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use flexboxes everywhere

Browse source
This commit is contained in:
Joel Collins 2018-11-20 13:56:39 +00:00
parent ede218ccc3
commit 0e76ae673a
3 changed files with 42 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

22
openflexure_microscope/api/static/main_v1.js
View file

@ -77,18 +77,16 @@ function updateCaptureList(response) {
// Generate inner HTML from capture object
html = `
<div class="clearfix">
<div class="left-col"><img src="${element_uri}/download?thumbnail=true"></div>
<div class="right-col">
<b>${element.filename}</b>
<br>
<button type="button" onclick="window.open('${element_uri}/download', '_blank');">View</button>
<button type="button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button>
<br>
<button type="button" onclick="window.open('${element_uri}/', '_blank');">JSON</button>
<button type="button" onclick="deleteCapture('${element.id}');">Delete</button>
<br>
</div>
<div class="capture-thumb"><img src="${element_uri}/download?thumbnail=true"></div>
<div class="capture-actions">
<b>${element.filename}</b>
<br>
<button type="button" onclick="window.open('${element_uri}/download', '_blank');">View</button>
<button type="button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button>
<br>
<button type="button" onclick="window.open('${element_uri}/', '_blank');">JSON</button>
<button type="button" onclick="deleteCapture('${element.id}');">Delete</button>
<br>
</div>
`

20
openflexure_microscope/api/static/style_v1.css
View file

@ -64,6 +64,14 @@ body {
display: table;
}
.flexbox {
display: flex;
margin-bottom: 5px;
}
.flexgrow {
flex-grow: 1;
}
/* Data divs */
#captures {
@ -74,6 +82,18 @@ body {
.capture {
background-color: #d3d3d3;
margin-bottom: 5px;
display: flex;
}
.capture-thumb {
width: 80px;
}
.capture-actions {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 5px;
}
.capture img {

24
openflexure_microscope/api/templates/index_v1.html
View file

@ -25,16 +25,16 @@
<p>
Doubleclick to position: <input type="checkbox" id="clickPositionCheck" checked><br>
<div class="clearfix">
<div class="left-col">FOV width:</div>
<div class="right-col">
<div class="flexbox">
<div class="flexgrow">FOV width:</div>
<div>
<input type="number" id="fovXText" onchange="fovX = Number(this.value); updateTextBoxes();" style="width: 7em" >
</div>
</div>
<div class="clearfix">
<div class="left-col">FOV height:</div>
<div class="right-col">
<div class="flexbox">
<div class="flexgrow">FOV height:</div>
<div>
<input type="number" id="fovYText" onchange="fovY = Number(this.value); updateTextBoxes();" style="width: 7em" >
</div>
</div>
@ -51,16 +51,16 @@
</p>
<h4>Velocity:</h4>
<div class="clearfix">
<div class="left-col">x-y:</div>
<div class="right-col">
<div class="flexbox">
<div class="flexgrow">x-y:</div>
<div>
<input type="range" id="stageVelocityInput" min="50" max="200" oninput="stageVelocity = Number(this.value); updateTextBoxes();">
<input type="text" id="stageVelocityText" size="3" disabled>
</div>
</div>
<div class="clearfix">
<div class="left-col">z:</div>
<div class="right-col">
<div class="flexbox">
<div class="flexgrow">z:</div>
<div>
<input type="range" id="focusVelocityInput" min="10" max="100" oninput="focusVelocity = Number(this.value); updateTextBoxes();">
<input type="text" id="focusVelocityText" size="3" disabled>
</div>