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 {