Rearrange zoom boxes for smaller devices

cwilling · May 24, 2016 · 62aa34c · 62aa34c
1 parent a65ce80
commit 62aa34c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/brewable.css b/brewable.css
@@ -714,11 +714,12 @@ div#jobComposer {
 }
 
 .zoomBoxInput {
-    font-size:  0.7em;
+    font-size:  0.9em;
     background-color: transparent;
     text-align: center;
     border-width:       0;
-    width:      100%;
+    /*width:      100%;*/
+    width:      3em;
     margin:     0px;
     color:      #fff;
 }
@@ -738,6 +739,7 @@ div#jobComposer {
     -moz-background-clip: padding; -webkit-background-clip: padding-box;
     background-clip: padding-box;
     font-weight: bold;
+    height:     1.3em;
 }
 .zoomBoxButton:hover, .zoomBoxButton:active, .zoomBoxButton:focus {
     background-color:   #cbc7ae;
@@ -746,18 +748,26 @@ div#jobComposer {
     opacity:    1.0;
 }
 .zoomBox {
+    display:    flex;
+    align-items: center;
+    justify-content: center;
+
+    display:    -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+
     background-color:      #555;
     color:      #c4be92;
     opacity:    0.0;
-    text-align: center;
 
     /* rounded corners */
     -webkit-border-radius: 8px;
     border-radius: 8px;
     -moz-background-clip: padding; -webkit-background-clip: padding-box;
     background-clip: padding-box;
     padding:    .1em;
-    width:      3em;
+    width:      8em;
+    height:     1.8em;
     margin:    10px;
     -webkit-box-shadow: 0px 0px 6px 0px #000;
     box-shadow: 0px 0px 6px 0px #000;

diff --git a/status.js b/status.js
@@ -513,6 +513,10 @@ domReady( function(){
     var holderName = holderNode.getAttribute('holderName');
     //console.log('Scale widget has holderName: ' + holderName);
     var graphWidthScale = parseInt(document.getElementById('jobItemHZBInput_' + holderName + '_' + longName).value);
+    if (graphWidthScale < 1 ) {
+      graphWidthScale = 1;
+      document.getElementById('jobItemHZBInput_' + holderName + '_' + longName).value = 1;
+    }
     var historyJobsGraphMargin = {top: 20, right: 40, bottom: 50, left: 60},
         historyJobsGraphWidth = graphWidthScale*1800 - historyJobsGraphMargin.left - historyJobsGraphMargin.right,
         historyJobsGraphHeight = 256 - historyJobsGraphMargin.top - historyJobsGraphMargin.bottom;
@@ -740,6 +744,7 @@ domReady( function(){
       var jobItemHZDown = document.createElement('Button');
         jobItemHZDown.id = 'jobItemHZDown_' + jobNameFull;
         jobItemHZDown.className = 'zoomBoxButton';
+        jobItemHZDown.textContent = '-';
         jobItemHZDown.onclick = function() {
                 var hsinput = document.getElementById(this.id.replace("jobItemHZDown", "jobItemHZBInput_" + holder));
                 hsinput.value -=  parseInt(hsinput.value)>1?1:0;
@@ -753,6 +758,7 @@ domReady( function(){
       var jobItemHZUp = document.createElement('Button');
         jobItemHZUp.id = 'jobItemHZUp_' + jobNameFull;
         jobItemHZUp.className = 'zoomBoxButton';
+        jobItemHZUp.textContent = '+';
         jobItemHZUp.onclick = function() {
                 var hsinput = document.getElementById(this.id.replace("jobItemHZUp", "jobItemHZBInput_" + holder));
                 hsinput.value = parseInt(hsinput.value,10) + 1;
@@ -764,8 +770,8 @@ domReady( function(){
                 updateJobHistoryData(0, jobLongName);
               }
       //jobItemHZoomBox.appendChild(jobItemHZBLabel);
-      jobItemHZoomBox.appendChild(jobItemHZBInput);
       jobItemHZoomBox.appendChild(jobItemHZDown);
+      jobItemHZoomBox.appendChild(jobItemHZBInput);
       jobItemHZoomBox.appendChild(jobItemHZUp);