diff --git a/Gemfile b/Gemfile index fe1b1e9..8a038ee 100644 --- a/Gemfile +++ b/Gemfile @@ -22,6 +22,7 @@ group :assets do end gem 'jquery-rails' +# gem 'jquery-ui-rails' group :development do gem 'better_errors' diff --git a/Gemfile.lock b/Gemfile.lock index fe558d2..2f86ccd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -74,6 +74,9 @@ GEM jquery-rails (2.2.1) railties (>= 3.0, < 5.0) thor (>= 0.14, < 2.0) + jquery-ui-rails (4.0.2) + jquery-rails + railties (>= 3.1.0) json (1.7.7) kgio (2.8.0) listen (1.0.3) @@ -198,6 +201,7 @@ DEPENDENCIES geocoder guard-rspec jquery-rails + jquery-ui-rails meta_request nyan-cat-formatter pg diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 9097d83..14ac5b4 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,5 +11,10 @@ // GO AFTER THE REQUIRES BELOW. // //= require jquery -//= require jquery_ujs +//= require rangeslider/jquery-1.7.1.min +//= require rangeslider/jquery-ui-1.8.16.custom.min + //= require_tree . +//= require rangeslider/jquery.mousewheel.min +//= require rangeslider/jQRangeSlider-min + diff --git a/app/assets/javascripts/timeSlider.js b/app/assets/javascripts/timeSlider.js new file mode 100644 index 0000000..b1b28c0 --- /dev/null +++ b/app/assets/javascripts/timeSlider.js @@ -0,0 +1,18 @@ +$("#slider").rangeSlider({ + range: {min: 60, max: false }, + bounds: {min: 0, max: 1439}, + step: 1, + formatter:function(val){ + var hour = (val/60 < 1) ? 12 : Math.floor(val/60) + var meridiem = hour < 13 ? "AM" : "PM" + var minutes = val % 60 + var time = ((hour > 12 ) ? hour - 12 : hour) + ":" + ((minutes < 10) ? (minutes + "0") : minutes) + " " + meridiem + return time + } +}); + + +$("#slider").bind("valuesChanging", function(e, data){ + console.log("Max:" + data.values.max); + console.log("Min: " + data.values.min); +}); \ No newline at end of file diff --git a/app/assets/stylesheets/iThing-min.css b/app/assets/stylesheets/iThing-min.css new file mode 100644 index 0000000..2b8648e --- /dev/null +++ b/app/assets/stylesheets/iThing-min.css @@ -0,0 +1 @@ +.ui-rangeSlider-withArrows .ui-rangeSlider-container{margin:0 15px;-webkit-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);-moz-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5)}.ui-rangeSlider-noArrow .ui-rangeSlider-container{-moz-border-radius:4px;border-radius:4px;border-left:solid 1px #515862;border-right:solid 1px #515862;-webkit-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);-moz-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5)}.ui-rangeSlider-container{height:30px;border-top:solid 1px #232a32;border-bottom:solid 1px #6a7179;background:#67707F;background:-moz-linear-gradient(top,#67707F 0,#888DA0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#67707F),color-stop(100%,#888DA0))}.ui-rangeSlider-arrow{width:14px;height:30px;border-top:solid 1px #232a32;border-bottom:solid 1px #6a7179;background:#67707F;cursor:pointer;box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);-webkit-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);-moz-box-shadow:inset 0 4px 6px -2px RGBA(0,0,0,.5);background:-moz-linear-gradient(top,#67707F 0,#888DA0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#67707F),color-stop(100%,#888DA0))}.ui-rangeSlider-leftArrow{border-radius:4px 0 0 4px;border-left:solid 1px #515862}.ui-rangeSlider-rightArrow{border-radius:0 4px 4px 0;border-right:solid 1px #515862}.ui-rangeSlider-arrow-inner{position:absolute;top:50%;border:10px solid transparent;width:0;height:0;margin-top:-10px}.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner{border-right:10px solid #a4a8b7;left:0;margin-left:-8px}.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{border-right:10px solid #b3b6c2}.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner{border-left:10px solid #a4a8b7;right:0;margin-right:-8px}.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{border-left:10px solid #b3b6c2}.ui-rangeSlider-innerBar{width:110%;height:100%;left:-10px;overflow:hidden}.ui-rangeSlider-bar{background:#68a1d6;height:29px;margin:1px 0;-moz-border-radius:4px;border-radius:4px;cursor:move;cursor:grab;cursor:-moz-grab;-webkit-box-shadow:inset 0 2px 6px RGBA(0,0,0,.5);-moz-box-shadow:inset 0 2px 6px RGBA(0,0,0,.5);box-shadow:inset 0 2px 6px RGBA(0,0,0,.5)}.ui-rangeSlider-handle{width:10px;height:30px;background:transparent;cursor:col-resize}.ui-rangeSlider-label{background:#888DA0;background:-moz-linear-gradient(top,#67707F 0,#888DA0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#67707F),color-stop(100%,#888DA0));padding:5px 10px;bottom:10px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 0 #c2c5d6;-moz-box-shadow:0 1px 0 #c2c5d6;box-shadow:0 1px 0 #c2c5d6;color:#fff;font-size:15px;cursor:col-resize}.ui-editRangeSlider .ui-rangeSlider-label{}.ui-rangeSlider-label-inner{position:absolute;top:100%;left:50%;display:block;z-index:99;border-left:10px solid transparent;border-right:10px solid transparent;margin-left:-10px;border-top:10px solid #888DA0}.ui-editRangeSlider-inputValue{width:2em;text-align:center;font-size:15px}.ui-rangeSlider .ui-ruler-scale{position:absolute;top:0;left:0;bottom:0;right:10px}.ui-rangeSlider .ui-ruler-tick{float:left}.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{color:#fff;margin-top:1px;border-left:1px solid white;height:29px;padding-left:2px;position:relative}.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{position:absolute;bottom:6px}.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{border-left:1px solid white;margin-top:25px;height:5px} \ No newline at end of file diff --git a/app/assets/stylesheets/iThing.css b/app/assets/stylesheets/iThing.css new file mode 100644 index 0000000..40f1136 --- /dev/null +++ b/app/assets/stylesheets/iThing.css @@ -0,0 +1,193 @@ +/** + * Theme for jQRangeSlider + * Inspired by http://cssdeck.com/item/381/itunes-10-storage-bar + * and http://cssdeck.com/item/276/pure-css-arrow-with-border-tooltip + */ + +.ui-rangeSlider-withArrows .ui-rangeSlider-container{ + margin: 0 15px; + -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); +} + +.ui-rangeSlider-noArrow .ui-rangeSlider-container{ + -moz-border-radius: 4px; + border-radius: 4px; + border-left: solid 1px #515862; + border-right: solid 1px #515862; + + -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); +} + +.ui-rangeSlider-container{ + height: 30px; + border-top: solid 1px #232a32; + border-bottom: solid 1px #6a7179; + background: #67707F; + background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0)); +} + + +.ui-rangeSlider-arrow{ + width:14px; + height:30px; + border-top: solid 1px #232a32; + border-bottom: solid 1px #6a7179; + background: #67707F; + cursor:pointer; + + box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5); + background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0)); +} + +.ui-rangeSlider-leftArrow{ + border-radius:4px 0 0 4px; + border-left: solid 1px #515862; +} + +.ui-rangeSlider-rightArrow{ + border-radius:0 4px 4px 0; + border-right: solid 1px #515862; +} + +.ui-rangeSlider-arrow-inner{ + position: absolute; + top: 50%; + border: 10px solid transparent; + width:0; + height:0; + + margin-top: -10px; +} + +.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner{ + border-right:10px solid #a4a8b7; + left: 0; + margin-left: -8px; +} + +.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{ + border-right:10px solid #b3b6c2; +} + +.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner{ + border-left:10px solid #a4a8b7; + right: 0; + margin-right: -8px; +} + +.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{ + border-left:10px solid #b3b6c2; +} + +.ui-rangeSlider-innerBar{ + width: 110%; + height: 100%; + left: -10px; + overflow: hidden; +} + +.ui-rangeSlider-bar{ + background: #68a1d6; + height: 29px; + margin:1px 0; + -moz-border-radius: 4px; + border-radius: 4px; + cursor:move; + cursor:grab; + cursor: -moz-grab; + + -webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5); + -moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5); + box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);; + } + +.ui-rangeSlider-handle{ + width:10px; + height:30px; + background: transparent; + cursor:col-resize; +} + +.ui-rangeSlider-label{ + background: #888DA0; + background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0)); + padding: 5px 10px; + bottom:10px; + + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-box-shadow: 0px 1px 0px #c2c5d6; + -moz-box-shadow: 0px 1px 0px #c2c5d6; + box-shadow: 0px 1px 0px #c2c5d6; + + color:white; + font-size:15px; + + cursor:col-resize; +} + +.ui-editRangeSlider .ui-rangeSlider-label{ +} + +.ui-rangeSlider-label-inner{ + + position: absolute; + top: 100%; + left: 50%; + display: block; + z-index:99; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + + margin-left: -10px; + border-top: 10px solid #888DA0; +} + +.ui-editRangeSlider-inputValue{ + width:2em; + text-align:center; + font-size:15px; +} + +.ui-rangeSlider .ui-ruler-scale{ + position:absolute; + top:0; + left:0; + bottom:0; + /* Handle width */ + right:10px; +} + +.ui-rangeSlider .ui-ruler-tick { + float: left; +} + +.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{ + color:white; + margin-top:1px; + border-left: 1px solid white; + height:29px; + padding-left:2px; + position:relative; +} + +.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{ + position:absolute; + bottom: 6px; +} + +.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{ + border-left:1px solid white; + margin-top: 25px; + height: 5px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/icons-classic/label.png b/app/assets/stylesheets/icons-classic/label.png new file mode 100644 index 0000000..faa370d Binary files /dev/null and b/app/assets/stylesheets/icons-classic/label.png differ diff --git a/app/assets/stylesheets/icons-classic/resultset_next.png b/app/assets/stylesheets/icons-classic/resultset_next.png new file mode 100644 index 0000000..ce9e413 Binary files /dev/null and b/app/assets/stylesheets/icons-classic/resultset_next.png differ diff --git a/app/assets/stylesheets/icons-classic/resultset_previous.png b/app/assets/stylesheets/icons-classic/resultset_previous.png new file mode 100644 index 0000000..7c4812a Binary files /dev/null and b/app/assets/stylesheets/icons-classic/resultset_previous.png differ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ffd8b50..397f138 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,6 +12,8 @@ <%= yield %> + <%= javascript_include_tag "application" %> + diff --git a/app/views/session/index.html.erb b/app/views/session/index.html.erb index 6b83a9f..4a412d4 100644 --- a/app/views/session/index.html.erb +++ b/app/views/session/index.html.erb @@ -1,4 +1,5 @@
+