From e54acddc52a2fdbca1bde836ad1eaa751f98be3c Mon Sep 17 00:00:00 2001 From: Israel Ogbole Date: Fri, 8 Jul 2016 00:39:52 +0100 Subject: [PATCH] heroku_and_production_mode_friendly --- .ruby-version | 1 + Gemfile | 4 + Gemfile.lock | 9 +++ app/assets/javascripts/application.js | 4 +- .../{application.css => application.scss} | 31 ++++---- app/assets/stylesheets/pace.css | 76 +++++++++++++++++++ config/environments/production.rb | 12 ++- 7 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 .ruby-version rename app/assets/stylesheets/{application.css => application.scss} (50%) create mode 100644 app/assets/stylesheets/pace.css diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 0000000..5859406 --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +2.2.3 diff --git a/Gemfile b/Gemfile index 37bc11c..076f69d 100644 --- a/Gemfile +++ b/Gemfile @@ -14,6 +14,10 @@ gem 'coffee-rails', '~> 4.1.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby +gem "font-awesome-rails" + +gem 'bootstrap-sass', '~> 3.3.6' + # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks diff --git a/Gemfile.lock b/Gemfile.lock index dd98f6b..bab1ddd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -37,8 +37,13 @@ GEM thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) arel (6.0.3) + autoprefixer-rails (6.3.6.1) + execjs binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) + bootstrap-sass (3.3.6) + autoprefixer-rails (>= 5.2.1) + sass (>= 3.3.4) builder (3.2.2) byebug (8.2.4) coffee-rails (4.1.1) @@ -52,6 +57,8 @@ GEM debug_inspector (0.0.2) erubis (2.7.0) execjs (2.6.0) + font-awesome-rails (4.6.3.1) + railties (>= 3.2, < 5.1) globalid (0.3.6) activesupport (>= 4.1.0) i18n (0.7.0) @@ -143,8 +150,10 @@ PLATFORMS ruby DEPENDENCIES + bootstrap-sass (~> 3.3.6) byebug coffee-rails (~> 4.1.0) + font-awesome-rails jbuilder (~> 2.0) jquery-rails rails (= 4.2.4) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4e1b8c4..fed0a02 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,6 +11,8 @@ // about supported directives. // //= require jquery +//= require bootstrap-sprockets + //= require jquery_ujs //= require turbolinks @@ -24,8 +26,6 @@ //= require js/flot/curvedLines.js //= require js/flot/jquery.flot.resize.js -//= require js/bootstrap.min.js - //= require js/progressbar/bootstrap-progressbar.min.js //= require js/icheck/icheck.min.js diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.scss similarity index 50% rename from app/assets/stylesheets/application.css rename to app/assets/stylesheets/application.scss index 855afe8..4d1cd19 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.scss @@ -1,5 +1,5 @@ /* - * This is a manifest file that'll be compiled into application.css, which will include all the files + * This is a manifest file that'll be compiled into application, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, @@ -9,22 +9,23 @@ * 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 + ** * require fonts/css/font-awesome.min + + * + - *= require css/bootstrap.min.css - *= require fonts/css/font-awesome.min.css - *= require css/animate.min.css - *= require css/custom.css - *= require css/maps/jquery-jvectormap-2.0.3.css - *= require css/icheck/flat/green.css - *= require css/floatexamples.css - *= require css/normalize.css - *= require css/nprogress.css - *= require css/ion.rangeSlider.css - *= require css/ion.rangeSlider.skinFlat.css */ +@import "bootstrap-sprockets"; +@import "bootstrap"; +@import "font-awesome"; +@import "css/animate.min"; +@import "css/custom"; +@import "css/icheck/flat/green"; +@import "css/floatexamples"; +@import "css/normalize"; +@import "css/ion.rangeSlider"; +@import "css/ion.rangeSlider.skinFlat"; +@import "pace"; diff --git a/app/assets/stylesheets/pace.css b/app/assets/stylesheets/pace.css new file mode 100644 index 0000000..0b98773 --- /dev/null +++ b/app/assets/stylesheets/pace.css @@ -0,0 +1,76 @@ +.pace { + -webkit-pointer-events: none; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.pace-inactive { + display: none; +} + +.pace .pace-progress { + background: #29d; + position: fixed; + z-index: 2000; + top: 0; + right: 100%; + width: 100%; + height: 2px; +} + +.pace .pace-progress-inner { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px #29d, 0 0 5px #29d; + opacity: 1.0; + -webkit-transform: rotate(3deg) translate(0px, -4px); + -moz-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + -o-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +.pace .pace-activity { + display: block; + position: fixed; + z-index: 2000; + top: 15px; + right: 15px; + width: 14px; + height: 14px; + border: solid 2px transparent; + border-top-color: #29d; + border-left-color: #29d; + border-radius: 10px; + -webkit-animation: pace-spinner 400ms linear infinite; + -moz-animation: pace-spinner 400ms linear infinite; + -ms-animation: pace-spinner 400ms linear infinite; + -o-animation: pace-spinner 400ms linear infinite; + animation: pace-spinner 400ms linear infinite; +} + +@-webkit-keyframes pace-spinner { + 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } +} +@-moz-keyframes pace-spinner { + 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } +} +@-o-keyframes pace-spinner { + 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } +} +@-ms-keyframes pace-spinner { + 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } +} +@keyframes pace-spinner { + 0% { transform: rotate(0deg); transform: rotate(0deg); } + 100% { transform: rotate(360deg); transform: rotate(360deg); } +} diff --git a/config/environments/production.rb b/config/environments/production.rb index 5c1b32e..a20901f 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -22,14 +22,20 @@ Rails.application.configure do # Disable serving static files from the `/public` folder by default since # Apache or NGINX already handles this. - config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present? + #config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present? + # change this to true to load images from the public folder in production for non-NGNIX setup, like PUMA + config.serve_static_files = true - # Compress JavaScripts and CSS. + # Compress JavaScripts and CSS. config.assets.js_compressor = :uglifier # config.assets.css_compressor = :sass # Do not fallback to assets pipeline if a precompiled asset is missed. - config.assets.compile = false + #config.assets.compile = false + # feel free to change it back to false, but it had to be true to make glyphs work in my case. + # I am not really sure why that is at the moment + config.assets.compile = true + # Asset digests allow you to set far-future HTTP expiration dates on all assets, # yet still be able to expire them through the digest params.