Update UI, use svg with nokogiri

jwo · Sep 22, 2014 · 4e29351 · 4e29351
1 parent a94910c
commit 4e29351
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 64 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-gem 'rails', '3.2.15'
+gem 'rails', '3.2.19'
 gem 'foundation-rails'
 gem "simple_form", :git => "git://github.com/jwo/simple_form.git", :branch=>"zurb_integration"
 gem "haml-rails"
@@ -9,10 +9,10 @@ gem 'jquery-rails'
 gem "compass-rails", ">=0.12"
 gem "paper_trail", '~> 2'
 gem "has_tokens", "1.0.1"
-gem "airbrake"
 gem "activegist"
 gem "puma"
 gem "pg"
+gem 'nokogiri'
 
 group :assets do
   gem 'coffee-rails', '~> 3.2.1'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -10,12 +10,12 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (3.2.15)
-      actionpack (= 3.2.15)
+    actionmailer (3.2.19)
+      actionpack (= 3.2.19)
       mail (~> 2.5.4)
-    actionpack (3.2.15)
-      activemodel (= 3.2.15)
-      activesupport (= 3.2.15)
+    actionpack (3.2.19)
+      activemodel (= 3.2.19)
+      activesupport (= 3.2.19)
       builder (~> 3.0.0)
       erubis (~> 2.7.0)
       journey (~> 1.0.4)
@@ -27,23 +27,20 @@ GEM
       activemodel (~> 3.1)
       activesupport (~> 3.1)
       rest-client (~> 1.6.7)
-    activemodel (3.2.15)
-      activesupport (= 3.2.15)
+    activemodel (3.2.19)
+      activesupport (= 3.2.19)
       builder (~> 3.0.0)
-    activerecord (3.2.15)
-      activemodel (= 3.2.15)
-      activesupport (= 3.2.15)
+    activerecord (3.2.19)
+      activemodel (= 3.2.19)
+      activesupport (= 3.2.19)
       arel (~> 3.0.2)
       tzinfo (~> 0.3.29)
-    activeresource (3.2.15)
-      activemodel (= 3.2.15)
-      activesupport (= 3.2.15)
-    activesupport (3.2.15)
+    activeresource (3.2.19)
+      activemodel (= 3.2.19)
+      activesupport (= 3.2.19)
+    activesupport (3.2.19)
       i18n (~> 0.6, >= 0.6.4)
       multi_json (~> 1.0)
-    airbrake (4.0.0)
-      builder
-      multi_json
     arel (3.0.3)
     builder (3.0.4)
     chunky_png (1.3.1)
@@ -61,6 +58,11 @@ GEM
     compass-rails (2.0.0)
       compass (>= 0.12.2)
     diff-lcs (1.2.5)
+    dotenv (0.11.1)
+      dotenv-deployment (~> 0.0.2)
+    dotenv-deployment (0.0.2)
+    dotenv-rails (0.11.1)
+      dotenv (= 0.11.1)
     erubis (2.7.0)
     execjs (2.2.1)
     fakeweb (1.3.0)
@@ -84,12 +86,14 @@ GEM
       thor (>= 0.14, < 2.0)
     json (1.8.1)
     libv8 (3.16.14.3)
-    mail (2.4.4)
-      i18n (>= 0.4.0)
+    mail (2.5.4)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
     mime-types (1.25.1)
+    mini_portile (0.6.0)
     multi_json (1.10.1)
+    nokogiri (1.6.3.1)
+      mini_portile (= 0.6.0)
     paper_trail (2.7.2)
       activerecord (~> 3.0)
       railties (~> 3.0)
@@ -106,17 +110,17 @@ GEM
       rack
     rack-test (0.6.2)
       rack (>= 1.0)
-    rails (3.2.15)
-      actionmailer (= 3.2.15)
-      actionpack (= 3.2.15)
-      activerecord (= 3.2.15)
-      activeresource (= 3.2.15)
-      activesupport (= 3.2.15)
+    rails (3.2.19)
+      actionmailer (= 3.2.19)
+      actionpack (= 3.2.19)
+      activerecord (= 3.2.19)
+      activeresource (= 3.2.19)
+      activesupport (= 3.2.19)
       bundler (~> 1.0)
-      railties (= 3.2.15)
-    railties (3.2.15)
-      actionpack (= 3.2.15)
-      activesupport (= 3.2.15)
+      railties (= 3.2.19)
+    railties (3.2.19)
+      actionpack (= 3.2.19)
+      activesupport (= 3.2.19)
       rack-ssl (~> 1.3.2)
       rake (>= 0.8.7)
       rdoc (~> 3.4)
@@ -165,7 +169,7 @@ GEM
     treetop (1.4.15)
       polyglot
       polyglot (>= 0.3.1)
-    tzinfo (0.3.40)
+    tzinfo (0.3.41)
     uglifier (2.5.3)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
@@ -176,7 +180,6 @@ PLATFORMS
 
 DEPENDENCIES
   activegist
-  airbrake
   coffee-rails (~> 3.2.1)
   compass-rails (>= 0.12)
   dotenv-rails
@@ -185,11 +188,12 @@ DEPENDENCIES
   haml-rails
   has_tokens (= 1.0.1)
   jquery-rails
+  nokogiri
   paper_trail (~> 2)
   pg
   puma
   quiet_assets
-  rails (= 3.2.15)
+  rails (= 3.2.19)
   rspec-rails (>= 2.9.0)
   sass-rails (~> 3.2.3)
   shoulda-matchers

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -12,10 +12,10 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require jquery-ui-1.8.18.custom.min
 //= require foundation
 //= require codemirror
 //= require ruby
 //= require vim
 //= require emacs
 //= require riddle
+//= require svg
diff --git a/app/assets/javascripts/jquery-ui-1.8.18.custom.min.js b/app/assets/javascripts/jquery-ui-1.8.18.custom.min.js
diff --git a/app/assets/javascripts/svg.js b/app/assets/javascripts/svg.js
@@ -0,0 +1,5 @@
+if (!Modernizr.svg) {
+  $('img[src$=".svg"]').each(function() {
+    $(this).attr('src', $(this).data('fallbackImage'));
+  });
+}
diff --git a/app/assets/stylesheets/app.css.scss.erb b/app/assets/stylesheets/app.css.scss.erb
@@ -306,3 +306,5 @@ footer {
   height: 100px; /* choose any height */
 
 }
+
+
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -14,6 +14,7 @@
  *= require navbar
  *= require codemirror
  *= require rubyblue
+ *= require svg
  *= require font-awesome
 */
 
diff --git a/app/assets/stylesheets/navbar.scss.erb b/app/assets/stylesheets/navbar.scss.erb
@@ -1,11 +1,10 @@
 @import "compass/css3/images";
 @import "compass/css3/border-radius";
 @import "compass/css3/box-shadow";
-@import url(http://fonts.googleapis.com/css?family=Ubuntu);
 
 #navBar {
   font-family: 'Ubuntu', sans-serif;
-  @include background(radial-gradient(#9B111E, #841B2D));
+  @include background(#9B111E);
   @include box-shadow;
 
   .row {

diff --git a/app/assets/stylesheets/svg.scss b/app/assets/stylesheets/svg.scss
@@ -0,0 +1,7 @@
+.tool {
+  display: block;
+  margin: 0 auto;
+  fill: #3498db;
+  width: 5em;
+  height: 5em;
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,2 +1,17 @@
 module ApplicationHelper
+  def embedded_svg filename, options={}
+    file = File.read(Rails.root.join('app', 'assets', 'images', filename))
+    doc = Nokogiri::HTML::DocumentFragment.parse file
+    svg = doc.at_css 'svg'
+
+    if options[:class].present?
+      svg['class'] = options[:class]
+    end
+
+    if options["data-fallback-image"].present?
+      svg['data-fallback-image'] = options["data-fallback-image"]
+    end
+
+    doc.to_html.html_safe
+  end
 end
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -8,17 +8,16 @@
   / <![endif]
   %head
     %meta{:charset => "utf-8"}/
-    / Uncomment to make IE8 render like IE7
-    / <meta http-equiv="X-UA-Compatible" content="IE=7" />
-    / Set the viewport width to device width for mobile
     %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
     %title= content_for?(:title) ? yield(:title) : "Ruby Fiddle | Ruby Snippets in the Browser"
     = stylesheet_link_tag    "application"
     = javascript_include_tag "application"
     /[if lt IE 9]
       %script(src="http://html5shiv.googlecode.com/svn/trunk/html5.js")
     = csrf_meta_tags
+    %link{:href => "//fonts.googleapis.com/css?family=Open+Sans:300,600,700|Montserrat:700|Nunito:300|Ubuntu:300"}/
     %link{:href => "//fonts.googleapis.com/css?family=Open+Sans:300,600,700|Montserrat:700|Nunito:300"}/
+    =javascript_include_tag "//oss.maxcdn.com/modernizr/2.8.3/modernizr.min.js"
   %body
     =render partial: "layouts/navbar"
     =render partial: "layouts/flash"

diff --git a/app/views/riddles/_form.html.erb b/app/views/riddles/_form.html.erb
@@ -2,25 +2,25 @@
 <%= simple_form_for(@riddle, url: play_path, :remote => true, :method => :post, disable_with: "Running That Ruby!", :html=>{:id=>"riddle_form"}) do |f| %>
 <div class="icon-bar three-up">
   <%= link_to "#", id: "run_riddle" do %>
-    <%= image_tag 'icon_1541.svg'   %>
+    <%= embedded_svg 'icon_1541.svg', class: "tool"%>
     <label>Run</label>
   <% end %>
 
   <% if @riddle.new_record? %>
     <%= link_to "#", id: "save_riddle" do %>
-      <%= image_tag 'icon_14215.svg' %>
+      <%= embedded_svg 'icon_14215.svg', class: "tool" %>
       <label>Save</label>
     <% end %>
 
   <% else %>
 
     <%= link_to "#", :id=>"update_riddle", "data-update-url" => url_for(@riddle), title: "Save a new version", :class=> "item" do %>
-      <%= image_tag 'icon_15866.svg' %>
+      <%= embedded_svg 'icon_15866.svg', class: "tool" %>
       <label>Bookmark</label>
     <% end %>
 
     <%=link_to "#", :id=>"fork_riddle", "data-fork-url" => url_for([:fork, @riddle]), title: "Fork your own version", :class=> "item" do %>
-      <%= image_tag 'icon_15866.svg' %>
+      <%= embedded_svg 'icon_15866.svg', class: "tool" %>
       <label>Fork</label>
     <% end %>