diff --git a/public/assets/css/bootstrap-modal-bs3patch.css b/public/assets/css/bootstrap-modal-bs3patch.css new file mode 100644 index 0000000..fedb608 --- /dev/null +++ b/public/assets/css/bootstrap-modal-bs3patch.css @@ -0,0 +1,29 @@ +/*! + * Bootstrap Modal + * + * Copyright Jordan Schroter + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Boostrap 3 patch for for bootstrap-modal. Include BEFORE bootstrap-modal.css! + */ + +body.modal-open, +.modal-open .navbar-fixed-top, +.modal-open .navbar-fixed-bottom { + margin-right: 0; +} + +.modal { + left: 50%; + bottom: auto; + right: auto; + padding: 0; + width: 500px; + margin-left: -250px; + background-clip: padding-box; +} + +.modal.container { + max-width: none; +} diff --git a/public/assets/css/bootstrap-modal.css b/public/assets/css/bootstrap-modal.css new file mode 100644 index 0000000..27e0ba1 --- /dev/null +++ b/public/assets/css/bootstrap-modal.css @@ -0,0 +1,214 @@ +/*! + * Bootstrap Modal + * + * Copyright Jordan Schroter + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + */ + +.modal-open { + overflow: hidden; +} + + +/* add a scroll bar to stop page from jerking around */ +.modal-open.page-overflow .page-container, +.modal-open.page-overflow .page-container .navbar-fixed-top, +.modal-open.page-overflow .page-container .navbar-fixed-bottom, +.modal-open.page-overflow .modal-scrollable { + overflow-y: scroll; +} + +@media (max-width: 979px) { + .modal-open.page-overflow .page-container .navbar-fixed-top, + .modal-open.page-overflow .page-container .navbar-fixed-bottom { + overflow-y: visible; + } +} + + +.modal-scrollable { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: auto; +} + +.modal { + outline: none; + position: absolute; + margin-top: 0; + top: 50%; + overflow: visible; /* allow content to popup out (i.e tooltips) */ +} + +.modal.fade { + top: -100%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; +} + +.modal.fade.in { + top: 50%; +} + +.modal-body { + max-height: none; + overflow: visible; +} + +.modal.modal-absolute { + position: absolute; + z-index: 950; +} + +.modal .loading-mask { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #fff; + border-radius: 6px; +} + +.modal-backdrop.modal-absolute{ + position: absolute; + z-index: 940; +} + +.modal-backdrop, +.modal-backdrop.fade.in{ + opacity: 0.7; + filter: alpha(opacity=70); + background: #3F3E3A; +} + +.modal.container { + width: 940px; + margin-left: -470px; +} + +/* Modal Overflow */ + +.modal-overflow.modal { + top: 1%; +} + +.modal-overflow.modal.fade { + top: -100%; +} + +.modal-overflow.modal.fade.in { + top: 1%; +} + +.modal-overflow .modal-body { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +/* Responsive */ + +@media (min-width: 1200px) { + .modal.container { + width: 1170px; + margin-left: -585px; + } +} + +@media (max-width: 979px) { + .modal, + .modal.container, + .modal.modal-overflow { + top: 1%; + right: 1%; + left: 1%; + bottom: auto; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + } + + .modal.fade.in, + .modal.container.fade.in, + .modal.modal-overflow.fade.in { + top: 1%; + bottom: auto; + } + + .modal-body, + .modal-overflow .modal-body { + position: static; + margin: 0; + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + .modal-footer, + .modal-overflow .modal-footer { + position: static; + } +} + +.loading-spinner { + position: absolute; + top: 50%; + left: 50%; + margin: -12px 0 0 -12px; +} + +/* +Animate.css - http://daneden.me/animate +Licensed under the ☺ license (http://licence.visualidiot.com/) + +Copyright (c) 2012 Dan Eden*/ + +.animated { + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes shake { + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} +} + +@-moz-keyframes shake { + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} +} + +@-o-keyframes shake { + 0%, 100% {-o-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} +} + +@keyframes shake { + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} +} + +.shake { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css index d2c0666..92efe1d 100644 --- a/public/assets/css/picoreflow.css +++ b/public/assets/css/picoreflow.css @@ -1,101 +1,127 @@ @font-face{ - font-family: "LCDN"; - src: url('/picoreflow/assets/fonts/LCDN.eot'); - src: local("LCD Normal"), - url('/picoreflow/assets/fonts/LCDN.woff') format("woff"), - url('/picoreflow/assets/fonts/LCDN.ttf') format("truetype"); + font-family: "LCDN"; + src: url('/picoreflow/assets/fonts/LCDN.eot'); + src: local("LCD Normal"), + url('/picoreflow/assets/fonts/LCDN.woff') format("woff"), + url('/picoreflow/assets/fonts/LCDN.ttf') format("truetype"); } @font-face{ - font-family: "NoticeStd"; - src: url('/picoreflow/assets/fonts/noticestd-webfont.eot'); - src: local("NoticeStd Regular"), - url('/picoreflow/assets/fonts/noticestd-webfont.woff') format("woff"), - url('/picoreflow/assets/fonts/noticestd-webfont.ttf') format("truetype"); + font-family: "NoticeStd"; + src: url('/picoreflow/assets/fonts/noticestd-webfont.eot'); + src: local("NoticeStd Regular"), + url('/picoreflow/assets/fonts/noticestd-webfont.woff') format("woff"), + url('/picoreflow/assets/fonts/noticestd-webfont.ttf') format("truetype"); } body { - background: #b9b6af; + background: #b9b6af; } .display { -display: inline-block; -text-align: right; -padding-right: 10px; -font-size: 20px; -height: 35px; -line-height: 35px; -width: 80px; -vertical-align: middle; -color: #d8d3c5; -font-weight: normal; --webkit-border-radius: 5px; --moz-border-radius: 5px; -border-radius: 5px; -background: #1F1E1A; --moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; --webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; -box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; -border-color: #000000; + display: inline-block; + text-align: right; + padding-right: 10px; + font-size: 20px; + height: 35px; + line-height: 35px; + width: 80px; + vertical-align: middle; + color: #d8d3c5; + font-weight: normal; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + background: #1F1E1A; + -moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; + -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; + box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000; + border-color: #000000; } .ds-num { - font-family: "LCDN"; - line-height: 38px; + font-family: "LCDN"; + line-height: 38px; } .ds-led { - font-family: "NoticeStd"; - font-size: 28px; - font-weight: 400; - text-align: center; - color: #1F1E1A; - padding-right: 1px; + font-family: "NoticeStd"; + font-size: 28px; + font-weight: 400; + text-align: center; + color: #1F1E1A; + padding-right: 1px; } #main_status { -margin-top: 15px; -color: #d8d3c5; -font-weight: normal; --webkit-border-radius: 7px; --moz-border-radius: 7px; -border-radius: 7px; -background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat; --moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; --webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; -box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; -border-color: #282828; -height: 97px; + margin-top: 15px; + color: #d8d3c5; + font-weight: normal; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; + background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat; + -moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; + -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; + box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000; + border-color: #282828; + height: 97px; } .panel-default { --webkit-border-radius: 7px; --moz-border-radius: 7px; -border-radius: 7px; --moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); --webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55); -box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); -margin-top: 15px; -background: #3F3E3A; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; + -moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); + -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55); + box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); + margin-top: 15px; + background: #3F3E3A; } .panel-heading { - background: #fafafa url('/picoreflow/assets/images/page_bg.png') repeat-x; + background: #fafafa url('/picoreflow/assets/images/page_bg.png') repeat-x; overflow: hidden; + padding: 10px; + -webkit-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-radius-topleft: 5px; + -moz-border-radius-topright: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } - +#profile_selector { + border: 1px solid rgb(194, 194, 194); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + background: rgb(229,229,229); + background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,1))); + background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); + background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); + background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); + background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); + padding: 5px; + padding-bottom: 3px; + padding-top: 3px; + -moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.05),inset 0 0 9px 2px #000; + -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.05),inset 0 0 0 0 #000; + box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.05),inset 0 0 0 0 #000; +} .select2-container { position: relative; top: -3px; - width: 195px; + width: 190px; height: 34px; } .select2-container .select2-choice { -line-height: 32px; + line-height: 32px; } .progress { @@ -117,14 +143,14 @@ line-height: 32px; } .btn-success { -background: rgb(164,179,87); -background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); -background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); + background: rgb(164,179,87); + background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); + background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); background-color: #75890c; } @@ -162,36 +188,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', end } .alert-success { -background: rgb(164,179,87); -background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); -background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); + background: rgb(164,179,87); + background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); + background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); color: #fff; } .alert-error { -background: rgb(206,57,20); -background: -moz-linear-gradient(top, rgba(206,57,20,1) 0%, rgba(163,38,0,1) 100%); -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,57,20,1)), color-stop(100%,rgba(163,38,0,1))); -background: -webkit-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); -background: -o-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); -background: -ms-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); -background: linear-gradient(to bottom, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', endColorstr='#a32600',GradientType=0 ); + background: rgb(206,57,20); + background: -moz-linear-gradient(top, rgba(206,57,20,1) 0%, rgba(163,38,0,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,57,20,1)), color-stop(100%,rgba(163,38,0,1))); + background: -webkit-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); + background: -o-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); + background: -ms-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); + background: linear-gradient(to bottom, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', endColorstr='#a32600',GradientType=0 ); color: #fff; } .graph { - width: 100%; - height: 300px; - font-size: 14px; - line-height: 1.2em; + width: 100%; + height: 300px; + font-size: 14px; + line-height: 1.2em; } td { - width: 50%; + width: 50%; } diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js index 4c3cd05..8da94d4 100644 --- a/public/assets/js/picoreflow.js +++ b/public/assets/js/picoreflow.js @@ -65,15 +65,24 @@ function updateProgress(percentage) function updateProfileTable() { - var html = ""; + var html = '

Profile Points

'; for(var i=0; i'; - html += '
'; + html += '
'; + html += '' + i + ''; + html += ''; + html += '
'; + html += '' + i + ''; + html += ''; + html += '
'; + html += '' + i + ''; + html += ''; + html += '
' } + html += '
'; + $('#profile_table').html(html); } @@ -104,7 +113,7 @@ function enterNewMode() state="EDIT" $('#main_status').slideUp(); $('#edit').show(); - $('#selectp').hide(); + $('#profile_selector').hide(); $('#btn_controls').hide(); $('#form_profile_name').attr('value', ''); $('#form_profile_name').attr('placeholder', 'Please enter a name'); @@ -120,7 +129,7 @@ function enterEditMode() state="EDIT" $('#main_status').slideUp(); $('#edit').show(); - $('#selectp').hide(); + $('#profile_selector').hide(); $('#btn_controls').hide(); $('#form_profile_name').attr('value', profiles[selected_profile].name); graph.profile.points.show = true; @@ -133,7 +142,7 @@ function leaveEditMode() { state="IDLE"; $('#edit').hide(); - $('#selectp').show(); + $('#profile_selector').show(); $('#btn_controls').show(); $('#main_status').slideDown(); $('#profile_table').slideUp(); @@ -488,7 +497,8 @@ $(document).ready(function() $("#e2").select2( { placeholder: "Select Profile", - allowClear: false + allowClear: false, + minimumResultsForSearch: -1 }); diff --git a/public/index.html b/public/index.html index 43af738..139d653 100644 --- a/public/index.html +++ b/public/index.html @@ -17,6 +17,8 @@ + + @@ -48,15 +50,17 @@
- -
- - - +
+ + +
- +
@@ -94,7 +98,7 @@
-