Commit 0e76ae67 authored by Joel Collins's avatar Joel Collins
Browse files

Use flexboxes everywhere

parent ede218cc

openflexure_microscope/api/static/main_v1.js

+10 −12
Original line number Diff line number Diff line
@@ -77,9 +77,8 @@ 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"> 

        <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>
@@ -89,7 +88,6 @@ function updateCaptureList(response) { 
            <button type="button" onclick="deleteCapture('${element.id}');">Delete</button>

            <br>

        </div>

        </div>

        `



        // Create a new capture div, and append HTML

openflexure_microscope/api/static/style_v1.css

+20 −0
Original line number Diff line number Diff line
@@ -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 {

openflexure_microscope/api/templates/index_v1.html

+12 −12
Original line number Diff line number Diff line
@@ -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>