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

Reformatted capture buttons

Browse source
This commit is contained in:
Joel Collins 2018-11-20 16:14:11 +00:00
parent 69e97ba5a3
commit 44b72ed74f
2 changed files with 30 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -79,13 +79,13 @@ function updateCaptureList(response) {
html = ` html = `
<div class="capture-thumb"><img src="${element_uri}/download?thumbnail=true"></div> <div class="capture-thumb"><img src="${element_uri}/download?thumbnail=true"></div>
<div class="capture-actions"> <div class="capture-actions">
<b>${element.filename}</b> <div class='capture-heading'>${element.filename}</div>
<br> <br>
<button type="button" onclick="window.open('${element_uri}/download', '_blank');">View</button> <button type="button" class="capture-button" onclick="window.open('${element_uri}/download', '_blank');">View</button>
<button type="button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button> <button type="button" class="capture-button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button>
<br> <br>
<button type="button" onclick="window.open('${element_uri}/', '_blank');">JSON</button> <button type="button" class="capture-button" onclick="window.open('${element_uri}/', '_blank');">JSON</button>
<button type="button" onclick="deleteCapture('${element.id}');">Delete</button> <button type="button" class="capture-button" onclick="deleteCapture('${element.id}');">Delete</button>
<br> <br>
</div> </div>
` `

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

@ -28,18 +28,18 @@ body {
} }
.left{ .left{
width: 250px; width: 220px;
float: left; float: left;
} }
.Right{ .Right{
width: 250px; width: 280px;
float: right; float: right;
} }
.middle { .middle {
margin-left: 250px; margin-left: 220px;
margin-right: 250px; margin-right: 280px;
background-color: #d3d3d3; background-color: #d3d3d3;
} }
@ -50,24 +50,12 @@ body {
clear: both; clear: both;
} }
/* Columns within panels */ /* Flexboxes */
.left-col {
float:left;
}
.right-col {
float:right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.flexbox { .flexbox {
display: flex; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
} }
.flexgrow { .flexgrow {
flex-grow: 1; flex-grow: 1;
} }
@ -80,13 +68,22 @@ body {
} }
.capture { .capture {
background-color: #d3d3d3; height: 75px;
width: 260px;
margin-bottom: 5px; margin-bottom: 5px;
background-color: #d3d3d3;
display: flex; display: flex;
} }
.capture-thumb { .capture-thumb {
width: 80px; width: 80px;
height: 75px;
}
.capture-heading {
font-weight: bold;
margin: 5px 0 5px 0;
display: inline-block;
} }
.capture-actions { .capture-actions {
@ -97,5 +94,13 @@ body {
} }
.capture img { .capture img {
width: 80px; width: 100%;
height: 100%;
object-fit: cover;
}
.capture-button {
width: 75px;
margin-bottom: 3px;
height: 22px;
} }