spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge pull request #227 from FarmBot/october-styles 

Close #206
pull/230/head
Rick Carlino 2015-10-04 12:49:44 -05:00
parent 6911196942 507ff56957
commit ff7af26da1
4 changed files with 90 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/assets/stylesheets/farmbot.css.scss
View File

@ -116,6 +116,7 @@ p {
.button {
font-family: $roboto;
font-weight: 700;
margin-bottom: 0;
}
.flex {
@ -349,6 +350,7 @@ button {
padding-left: 12px;
padding-right: 12px;
border-radius: 4px;
margin-bottom: 0px;
&.stop {
background-color: $red;
}
@ -361,6 +363,7 @@ button {
&.move-amount {
background-color: $white;
border-right: 2px solid $off-white;
box-shadow: 0px 0px 10px $light_gray;
color: $medium_gray;
font-weight: bold;
padding-top: 0.5rem;
@ -380,12 +383,13 @@ button {
border-left: 0;
}
&.leftmost {
border-bottom-left-radius: 7px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-top-left-radius: 7px;
}
&.rightmost {
border-bottom-right-radius: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-top-right-radius: 7px;
border-right: 0px none;
}
}
&.move-amount-selected {
@ -687,16 +691,19 @@ label {
font-weight: bold;
color: $medium_gray;
}
input {
input, input[type="text"] {
font-size: 1.2rem;
color: $dark_gray;
height: auto;
width: 100%;
border: 0;
padding: 6px;
}
input[type="text"] {
font-size: 1.2rem;
height: auto;
padding: 6px 8px;
box-shadow: 0px 0px 10px $light_gray;
&:focus {
background-color: $white;
box-shadow: 0px 0px 10px $translucent;
}
}
input[type="password"] {
font-size: 1.2rem;
@ -821,13 +828,13 @@ input[type="submit"] {
.arrow-button {
background-color: $medium_gray;
color: $off_white;
width: 50px;
height: 50px;
padding: 15px;
font-size: 20px;
width: 40px;
height: 40px;
padding: 12px;
font-size: 16px;
text-align: center;
border-bottom: 3px solid $dark_gray;
margin-bottom: 0px;
margin: -5px;
&:active {
border-bottom-width: 1px!important;
transform: translateY(2px);
@ -1005,9 +1012,6 @@ h6.date {
font-size: 1.4rem;
line-height: 50px;
}
.transparent-table tr:nth-of-type(even) {
background-color: transparent !important;
}
.button-like:active {
border-bottom-width: 1px!important;
transform: translateY(1px);
@ -1018,11 +1022,19 @@ h6.date {
}
table {
border: 0;
width: 100%;
margin-bottom: 0;
}
table.plain tr:nth-of-type(1n) {
background: $off-white;
border: .5rem solid $off-white;
}
table tr td {
padding: .5rem;
}
table thead tr th {
padding: .5rem;
}

58
app/views/dashboard/ng-partials/widgets/_hardware.html.haml
View File

@ -3,7 +3,7 @@
.small-12.columns
.row
.small-12.columns
%button.yellow.button-like{ng_click: "updateCalibration()", style: "margin: 9px;"} UPDATE FARMBOT
%button.yellow.button-like{ ng_click: "updateCalibration()", style: "margin: 9px;" } UPDATE FARMBOT
// TODO: Hide the save button ^ until a value in the table has been changed and needs saving. Once the user presses the button, change the text to 'UPDATING' (while the update is happening, just like the sync button). Once the update is complete, change it to 'UPDATED :checkmark:' and make it green.
.header-wrapper
%h5 Hardware
@ -12,83 +12,83 @@
%table.plain
%thead
%tr
%th{width: '32%'}
%th{width: '22%'}
%th{ width: '32%' }
%th{ width: '22%' }
%label GANTRY (X)
%th{width: '22%'}
%th{ width: '22%' }
%label CROSS-SLIDE (Y)
%th{width: '22%'}
%th{ width: '22%' }
%label Z-AXIS (Z)
%tbody
%tr
%td
%label LENGTH (m)
%td
%input{ng_model: "device.LENGTH_X"}
%input{ ng_model: "device.LENGTH_X" }
%td
%input{ng_model: "device.LENGTH_Y"}
%input{ ng_model: "device.LENGTH_Y" }
%td
%input{ng_model: "device.LENGTH_Z"}
%input{ ng_model: "device.LENGTH_Z" }
%tr
%td
%label MAX SPEED (mm/s)
%td
%input{ng_model: "device.MOVEMENT_MAX_SPD_X"}
%input{ ng_model: "device.MOVEMENT_MAX_SPD_X" }
%td
%input{ng_model: "device.MOVEMENT_MAX_SPD_Y"}
%input{ ng_model: "device.MOVEMENT_MAX_SPD_Y" }
%td
%input{ng_model: "device.MOVEMENT_MAX_SPD_Z"}
%input{ ng_model: "device.MOVEMENT_MAX_SPD_Z" }
%tr
%td
%label ACCELERATE FOR (steps)
%td
%input{ng_model: "device.MOVEMENT_STEPS_ACC_DEC_X"}
%input{ ng_model: "device.MOVEMENT_STEPS_ACC_DEC_X" }
%td
%input{ng_model: "device.MOVEMENT_STEPS_ACC_DEC_Y"}
%input{ ng_model: "device.MOVEMENT_STEPS_ACC_DEC_Y" }
%td
%input{ng_model: "device.MOVEMENT_STEPS_ACC_DEC_Z"}
%input{ ng_model: "device.MOVEMENT_STEPS_ACC_DEC_Z" }
%tr
%td
%label TIMEOUT AFTER (seconds)
%td
%input{ng_model: "device.MOVEMENT_TIMEOUT_X"}
%input{ ng_model: "device.MOVEMENT_TIMEOUT_X" }
%td
%input{ng_model: "device.MOVEMENT_TIMEOUT_Y"}
%input{ ng_model: "device.MOVEMENT_TIMEOUT_Y" }
%td
%input{ng_model: "device.MOVEMENT_TIMEOUT_Z"}
%input{ ng_model: "device.MOVEMENT_TIMEOUT_Z" }
%tr
%td
%label STEPS PER MM
%td
%input{ng_model: "device.MOVEMENT_STEPS_PER_MM_X"}
%input{ ng_model: "device.MOVEMENT_STEPS_PER_MM_X" }
%td
%input{ng_model: "device.MOVEMENT_STEPS_PER_MM_Y"}
%input{ ng_model: "device.MOVEMENT_STEPS_PER_MM_Y" }
%td
%input{ng_model: "device.MOVEMENT_STEPS_PER_MM_Z"}
%input{ ng_model: "device.MOVEMENT_STEPS_PER_MM_Z" }
%tr
%td
%label INVERT ENDPOINTS
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_ENDPOINTS_X"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_ENDPOINTS_X" }
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_ENDPOINTS_Y"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_ENDPOINTS_Y" }
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_ENDPOINTS_Z"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_ENDPOINTS_Z" }
%tr
%td
%label INVERT MOTOR
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_MOTOR_X"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_MOTOR_X" }
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_MOTOR_Y"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_MOTOR_Y" }
%td
%calibrationbutton{toggleval: "MOVEMENT_INVERT_MOTOR_Z"}
%calibrationbutton.left{ toggleval: "MOVEMENT_INVERT_MOTOR_Z" }
%tr
%td
%label NEGATIVES
%td
%calibrationbutton{toggleval: "MOVEMENT_NEGATIVE_X"}
%calibrationbutton.left{ toggleval: "MOVEMENT_NEGATIVE_X" }
%td
%calibrationbutton{toggleval: "MOVEMENT_NEGATIVE_Y"}
%calibrationbutton.left{ toggleval: "MOVEMENT_NEGATIVE_Y" }
%td
%calibrationbutton{toggleval: "MOVEMENT_NEGATIVE_Z"}
%calibrationbutton.left{ toggleval: "MOVEMENT_NEGATIVE_Z" }

14
app/views/dashboard/ng-partials/widgets/_logs.html.haml
View File

@ -10,21 +10,21 @@
%table
%thead
%tr
%th{width: '10%'}
%th{ width: '15%' }
%label TIME
%th{width: '80%'}
%th{ width: '75%' }
%label MESSAGE
%th{width: '10%'}
%th{ width: '10%' }
%label COORDINATES
%tbody{ng_if: "logs.length > 1"}
%tbody{ ng_if: "logs.length > 1" }
%tr{'ng-repeat' => 'log in logs'}
%td
%p {{ log.timestamp | date:'MM/dd h:mma' }}
%td
%p {{ log.data || "-" }}
%td
%p {{ (log.X || '-') + ', ' + (log.Y || '-') + ', ' + (log.Z || '-') }}
%tbody{ng_if: "logs.length < 1"}
%p {{ (log.X || '0') + ', ' + (log.Y || '0') + ', ' + (log.Z || '0') }}
%tbody{ ng_if: "logs.length < 1" }
%tr
%td{colspan: '3'}
%td{ colspan: '3' }
%p We can't find any logs. Are your FarmBot device credentials correct?

44
app/views/dashboard/ng-partials/widgets/_move.html.haml
View File

@ -8,55 +8,57 @@
%label.text-center MOVE AMOUNT (mm) {{ device.current.busy == 0 ? "Ready" : "Busy" }}
.row
.small-12.columns
%button.move-amount.no-radius.leftmost{stepsize: '1'} 1
%button.move-amount.no-radius{stepsize: '10'} 10
%button.move-amount.no-radius{stepsize: '100'} 100
%button.move-amount.no-radius.rightmost{stepsize: '1000'} 1000
%button.move-amount.no-radius.leftmost{ stepsize: '1' } 1
%button.move-amount.no-radius{ stepsize: '10' } 10
%button.move-amount.no-radius{ stepsize: '100' } 100
%button.move-amount.no-radius.rightmost{ stepsize: '1000' } 1000
.row
%table.transparent-table.jog-table{:align => "center", :style => 'border: 0px;'}
%table.jog-table{ :align => "center", :style => 'border: 0px;' }
%tr
%td
%td
%td
%td
%directionbutton{direction: "up", axis: "y"}
%directionbutton{ direction: "up", axis: "y" }
%td
%td
%td
%directionbutton{direction: "up", axis: "z"}
%directionbutton{ direction: "up", axis: "z" }
%tr
%td
%button.button-like.i.fa.fa-home.arrow-button{ng_click: 'home()'}
%button.button-like.i.fa.fa-home.arrow-button{ ng_click: 'home()' }
%td
%td
%directionbutton{direction: "up", axis: "x"}
%directionbutton{ direction: "up", axis: "x" }
%td
%directionbutton{direction: "down", axis: "y"}
%directionbutton{ direction: "down", axis: "y" }
%td
%directionbutton{direction: "down", axis: "x"}
%directionbutton{ direction: "down", axis: "x" }
%td
%td
%directionbutton{direction: "down", axis: "z"}
%directionbutton{ direction: "down", axis: "z" }
%tr
%td
.row
.small-6.columns
.medium-6.small-7.columns.medium-offset-1
%label GANTRY (X)
.small-6.columns
.medium-4.small-5.columns.end
%manualmovementinput{axisdata: 'axisdata', axis: 'x'}
.row
.small-6.columns
.medium-6.small-7.columns.medium-offset-1
%label CROSS-SLIDE (Y)
.small-6.columns
.medium-4.small-5.columns.end
%manualmovementinput{axisdata: 'axisdata', axis: 'y'}
.row
.small-6.columns
.medium-6.small-7.columns.medium-offset-1
%label Z-AXIS (Z)
.small-6.columns
.medium-4.small-5.columns.end
%manualmovementinput{axisdata: 'axisdata', axis: 'z'}
.row.padding-bottom
.small-6.columns
%stopbutton
.small-6.columns
.medium-6.small-7.columns.medium-offset-1
%stopbutton.left
.medium-4.small-5.columns.end
%button.full-width.green.button-like{ng_click: 'manualMovement()'} GO