diff --git a/Gemfile b/Gemfile index 378da4e..478cdff 100644 --- a/Gemfile +++ b/Gemfile @@ -7,7 +7,11 @@ gem 'activeadmin', github: 'gregbell/active_admin' gem 'haml-rails' gem 'sass-rails', '~> 4.0.3' -gem 'bootstrap-sass' + +# gem 'bootstrap-sass' +gem 'twitter-bootstrap-rails' +gem 'less-rails' + gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 888d868..127306d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -55,8 +55,6 @@ GEM erubis (>= 2.6.6) binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) - bootstrap-sass (3.1.1.1) - sass (~> 3.2) bourbon (3.2.1) sass (~> 3.2) thor @@ -84,6 +82,7 @@ GEM execjs coffee-script-source (1.7.0) columnize (0.8.9) + commonjs (0.2.7) daemons (1.1.9) database_cleaner (1.2.0) debug_inspector (0.0.2) @@ -169,6 +168,11 @@ GEM activesupport (>= 3.0.0) launchy (2.4.2) addressable (~> 2.3) + less (2.5.0) + commonjs (~> 0.2.7) + less-rails (2.5.0) + actionpack (>= 3.1) + less (~> 2.5.0) libv8 (3.16.14.3) listen (2.7.4) celluloid (>= 0.15.2) @@ -313,6 +317,11 @@ GEM polyglot (>= 0.3.1) turbolinks (2.2.2) coffee-rails + twitter-bootstrap-rails (2.2.8) + actionpack (>= 3.1) + execjs + rails (>= 3.1) + railties (>= 3.1) tzinfo (1.1.0) thread_safe (~> 0.1) uglifier (2.5.0) @@ -332,7 +341,6 @@ DEPENDENCIES awesome_print better_errors binding_of_caller - bootstrap-sass cancan capybara coffee-rails (~> 4.0.0) @@ -349,6 +357,7 @@ DEPENDENCIES inherited_resources jquery-rails launchy + less-rails mysql2 pry-debugger pry-rails @@ -370,4 +379,5 @@ DEPENDENCIES therubyracer thin turbolinks + twitter-bootstrap-rails uglifier (>= 1.3.0) diff --git a/Guardfile b/Guardfile new file mode 100644 index 0000000..b8f35fa --- /dev/null +++ b/Guardfile @@ -0,0 +1,45 @@ +# A sample Guardfile +# More info at https://github.com/guard/guard#readme + +guard :bundler do + watch('Gemfile') + # Uncomment next line if your Gemfile contains the `gemspec' command. + # watch(/^.+\.gemspec/) +end + +guard 'livereload' do + watch(%r{app/views/.+\.(erb|haml|slim)$}) + watch(%r{app/helpers/.+\.rb}) + watch(%r{public/.+\.(css|js|html)}) + watch(%r{config/locales/.+\.yml}) + # Rails Assets Pipeline + watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" } +end + +guard 'rails' do + watch('Gemfile.lock') + watch(%r{^(config|lib)/.*\.([^.]+)$}) { |m| m[0] if m[2] != 'yml' && !m[0]['locales'] } +end + + +guard :rspec do + watch(%r{^spec/.+_spec\.rb$}) + watch(%r{^lib/(.+)\.rb$}) { |m| "spec/lib/#{m[1]}_spec.rb" } + watch('spec/spec_helper.rb') { "spec" } + + # Rails example + watch(%r{^app/(.+)\.rb$}) { |m| "spec/#{m[1]}_spec.rb" } + watch(%r{^app/(.*)(\.erb|\.haml|\.slim)$}) { |m| "spec/#{m[1]}#{m[2]}_spec.rb" } + watch(%r{^app/controllers/(.+)_(controller)\.rb$}) { |m| ["spec/routing/#{m[1]}_routing_spec.rb", "spec/#{m[2]}s/#{m[1]}_#{m[2]}_spec.rb", "spec/acceptance/#{m[1]}_spec.rb"] } + watch(%r{^spec/support/(.+)\.rb$}) { "spec" } + watch('config/routes.rb') { "spec/routing" } + watch('app/controllers/application_controller.rb') { "spec/controllers" } + + # Capybara features specs + watch(%r{^app/views/(.+)/.*\.(erb|haml|slim)$}) { |m| "spec/features/#{m[1]}_spec.rb" } + + # Turnip features and steps + watch(%r{^spec/acceptance/(.+)\.feature$}) + watch(%r{^spec/acceptance/steps/(.+)_steps\.rb$}) { |m| Dir[File.join("**/#{m[1]}.feature")][0] || 'spec/acceptance' } +end + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index a443db3..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..a443db3 --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1,15 @@ +/* + * This is a manifest file that'll be compiled into application.css, which will include all the files + * listed below. + * + * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, + * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. + * + * You're free to add application-wide styles to this file and they'll appear at the bottom of the + * compiled file so the styles you add here take precedence over styles defined in any styles + * defined in the other CSS/SCSS files in this directory. It is generally better to create a new + * file per style scope. + * + *= require_tree . + *= require_self + */ diff --git a/app/assets/stylesheets/bootstrap.css.less b/app/assets/stylesheets/bootstrap.css.less new file mode 100644 index 0000000..1efa307 --- /dev/null +++ b/app/assets/stylesheets/bootstrap.css.less @@ -0,0 +1,420 @@ +@import "twitter/bootstrap/bootstrap"; +@import "twitter/bootstrap/responsive"; + +@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png'); +@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png'); + +@navbarBackground: #DDD; +@navbarBackgroundHighlight: #DDD; +@navbarLinkColor: #000; +@navbarLinkColorHover: #AAA; + +@linkColor: #888; +@linkColorHover: darken(@linkColor, 15%); + + +body{ + margin-top:80px; +} + +footer { + background-color: #d6d6d6; + text-align:center; + padding:2%; + -moz-box-shadow: 10px 10px 5px #888; + -webkit-box-shadow: 10px 10px 5px #888; + box-shadow: 10px 10px 5px #888; +} + +#order_chart_user{ + height:300px; + width:700px; + margin-left:150px; +} +.center_box{ + margin-left:10%; + width:100%; +} + +.inputs{ width:300px; } +.navbar .brand { + color:#000; +} +.video{ + width:auto; + padding-left:220px; +} + +.left{ + padding:0px; + float:left; + width:480px; + height:400px; + +} + +.login{ + min-width:250px; + padding:5%; + margin-left:35%; + margin-right:35%; + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +.login h2{ + background-color:#FFF; + color:#000; + text-align:center; + margin-bottom:10px; + -moz-box-shadow: 0 0 5px 5px #CCC; + -webkit-box-shadow: 0 0 5px 5px#CCC; + box-shadow: 0 0 5px 5px #CCC; +} + +.login h3{ + text-align:center; + color:#BBB; + text-shadow: 1px 1px #AAA; +} + +.upload{ + width: 100%; + height: 480px; + text-align:center; +} + +.upload a{ + text-align:center; +} + +.center{ + text-align:center; +} + +.attention{ + background:#FFF; + color:#0000FF; + padding:0.4%; +} + +.attention:hover{ + background:#000; + color:#FFF; +} + +.error{ + background:#A60707; + width:100%; + padding:0.4%; + color:#FFF; + text-decoration:none; + -moz-box-shadow: 0 0 5px 5px #CCC; + -webkit-box-shadow: 0 0 5px 5px #CCC; + box-shadow: 0 0 5px 5px #CCC; + text-align:center; +} + +.bold{ + font-weight:bold; + font-size:15px; +} + +.field{ + margin-bottom:20px; +} + +.horizontal-form{ + padding-top:20px; +} + +.actions{ + margin-top:10px; +} + +.radio{ + font-size:15px; +} + +label{ + font-size:18px; +} + +#upload{ + margin-top:10px; + background-color:#DDD; + height:100px; + text-transform:uppercase; + color:#000; + text-align:center; + + -moz-box-shadow: 0 0 1px 1px #888; + -webkit-box-shadow: 0 0 1px 1px#888; + box-shadow: 0 0 1px 1px #888; +} + +#player{ + display:block; + width:600px; + height:300px; + float:right; + + + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +#player2{ + display:block; + width:200px; + height:150px; + + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +#player3{ + display:block; + width:200px; + height:150px; + + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +#player4{ + display:block; + width:200px; + height:150px; + + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +#player5{ + display:block; + width:500px; + height:380px; + + -moz-box-shadow: 0 0 5px 5px #888; + -webkit-box-shadow: 0 0 5px 5px#888; + box-shadow: 0 0 5px 5px #888; +} + +input{ + display: inline-block; + *display: inline; + padding: 4px 12px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 14px; + line-height: 20px; + *line-height: 20px; + color: #333333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + cursor: pointer; + background-color: #DDD; + *background-color: #e6e6e6; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); + background-repeat: repeat-x; + border: 1px solid #bbbbbb; + border: 0; + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-bottom-color: #DDDDDD; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + + +} + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} + +button, +input { + *overflow: visible; + line-height: normal; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +label, +input, +button, +select, +textarea { + font-size: 14px; + font-weight: normal; + line-height: 20px; +} + +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +label { + display: block; + margin-bottom: 5px; +} + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +input, +textarea, +.uneditable-input { + width: 206px; +} + +textarea { + height: auto; +} + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: #f56a30; + outline: 0; + outline: thin dotted 9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #DDDDDD; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #DDDDDD; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #DDDDDD; +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px 9; + *margin-top: 0; + line-height: normal; + cursor: pointer; +} + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; +} + +select, +input[type="file"] { + height: 30px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 30px; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 4e6d930..56d144a 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,14 +1,90 @@
-