revise logo

app/assets/stylesheets/screen.css

@@ -207,3 +207,7 @@ img.lock {
   opacity: 0.8;
   filter: alpha(opacity=80); /* For IE8 and earlier */
 }
+
+#adopt-a-hydrant-logo {
+  width: 220px;
+}

app/assets/xml/browserconfig.xml.erb

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<% environment.context_class.instance_eval { include ApplicationHelper } %>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="<%= namespaced_png_favicon_path('mstile',70) %>"/>
+      <square150x150logo src="<%= namespaced_png_favicon_path('mstile',150) %>"/>
+      <square310x310logo src="<%= namespaced_png_favicon_path('mstile',310) %>"/>
+      <wide310x150logo src="<%= favicon_path('mstile-310x150.png') %>"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

app/helpers/application_helper.rb

@@ -56,4 +56,32 @@ def us_states # rubocop:disable MethodLength
       ['Wyoming', 'WY'],
     ]
   end
+
+  def dimensions(dimension)
+    "#{dimension}x#{dimension}"
+  end
+
+  def favicon_path(file)
+    image_path "logos/favicons/#{file}?v=#{Rails.application.config.assets.version}"
+  end
+
+  def favicon_attrs(rel, type = 'image/png')
+    {rel: rel, type: type}
+  end
+
+  def namespaced_png_favicon_path(namespace, dimension)
+    favicon_path("#{namespace}-#{dimensions(dimension)}.png")
+  end
+
+  def namespaced_png_favicon_link_tag(namespace, dimension, rel)
+    favicon_link_tag namespaced_png_favicon_path(namespace, dimension), favicon_attrs(rel).merge(sizes: dimensions(dimension))
+  end
+
+  def favicon_link_tags(namespace, dimensions, rel = 'icon')
+    favicon_link_tags = dimensions.map do |dimension|
+      namespaced_png_favicon_link_tag(namespace, dimension, rel).html_safe
+    end
+
+    safe_join favicon_link_tags
+  end
 end

app/views/layouts/application.html.haml

@@ -4,23 +4,32 @@
     %title
       = t("titles.main", :thing => t("defaults.thing").titleize)
     = csrf_meta_tag
+    = favicon_link_tags('apple-touch-icon', [57, 60, 72, 76, 114, 120, 144, 152, 180], 'apple-touch-icon')
+    = favicon_link_tags('favicon', [16, 32, 96])
+    = favicon_link_tags('android-chrome', [36, 48, 72])
+    = favicon_link_tag favicon_path('safari-pinned-tab.svg'), favicon_attrs('mask-icon', 'image/svg+xml')
+    = favicon_link_tag favicon_path('favicon.ico')
+    %meta{name: 'msapplication-TileColor', content: '#da532c'}
+    %meta{name: 'msapplication-TileImage', content: "#{namespaced_png_favicon_path('mstile', 144)}"}
+    %meta{name: 'msapplication-config', content: "#{asset_path('browserconfig.xml')}"}
+    %meta{name: 'theme-color', content: '#ffffff'}
     %meta{:name => "viewport", :content => "width=800, user-scalable=no"}
-    / HTML5 shim, for IE6-8 support of HTML5 elements
-    /[if lt IE 9]
-      = javascript_include_tag "//html5shim.googlecode.com/svn/trunk/html5.js"
-    = javascript_include_tag "//maps.google.com/maps/api/js?sensor=false&language=#{I18n.locale}"
-    = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"
-    = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
-    = javascript_include_tag "application"
-    - if Rails.env.production? && ENV['GOOGLE_ANALYTICS_ID'].present?
-      %script{:type => "text/javascript"}
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-        ga('create', '#{ENV['GOOGLE_ANALYTICS_ID']}', '#{ENV['GOOGLE_ANALYTICS_DOMAIN']}');
-        ga('send', 'pageview');
     = stylesheet_link_tag "application"
   %body
     = yield
+  / HTML5 shim, for IE6-8 support of HTML5 elements
+  /[if lt IE 9]
+    = javascript_include_tag "//html5shim.googlecode.com/svn/trunk/html5.js"
+  = javascript_include_tag "//maps.google.com/maps/api/js?sensor=false&language=#{I18n.locale}"
+  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"
+  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
+  = javascript_include_tag "application"
+  - if Rails.env.production? && ENV['GOOGLE_ANALYTICS_ID'].present?
+    %script{:type => "text/javascript"}
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', '#{ENV['GOOGLE_ANALYTICS_ID']}', '#{ENV['GOOGLE_ANALYTICS_DOMAIN']}');
+      ga('send', 'pageview');

app/views/main/index.html.haml

@@ -2,7 +2,7 @@
   .table-row
     .table-cell.sidebar
       %h1
-        = image_tag "logos/adopt-a-hydrant.png", :alt => t("titles.main", :thing => t("defaults.thing").titleize), :title => t("titles.main", :thing => t("defaults.thing").titleize)
+        = image_tag 'logos/adopt-a-hydrant.png', alt: t('titles.main', thing: t('defaults.thing').titleize), title: t('titles.main', thing: t('defaults.thing').titleize), id: 'adopt-a-hydrant-logo'
       %p.alert-message.block-message#tagline
         = t("defaults.tagline")
       #content

test/helpers/application_helper.rb

@@ -0,0 +1,45 @@
+require 'test_helper'
+
+class ApplicationHelperTest < ActionView::TestCase
+  include ApplicationHelper
+
+  setup do
+    @namespace = 'android-chrome'
+    @dimension = 96
+    @assets_version = Rails.application.config.assets.version
+    @path = "/images/logos/favicons/#{@namespace}-#{dimensions(@dimension)}.png?v=" << @assets_version
+    @rel = 'icon'
+  end
+
+  test 'should return dimensions' do
+    assert_equal('96x96', dimensions(@dimension))
+  end
+
+  test "should return a favicon's path" do
+    file = 'test.png'
+    path = "/images/logos/favicons/#{file}?v=" << @assets_version
+
+    assert_equal(path, favicon_path(file))
+  end
+
+  test 'should return favicon attributes' do
+    assert_equal({rel: @rel, type: 'image/png'}, favicon_attrs(@rel))
+  end
+
+  test 'should return favicon attributes for a given type' do
+    rel = 'mask-icon'
+    type = 'image/svg+xml'
+
+    assert_equal({rel: rel, type: type}, favicon_attrs(rel, type))
+  end
+
+  test "should return a namespaced png favicon's path" do
+    assert_equal(@path, namespaced_png_favicon_path(@namespace, @dimension))
+  end
+
+  test "should return a namespaced png favicon's link tag" do
+    favicon_link_tag = "<link rel=\"#{@rel}\" type=\"image/png\" href=\"" << @path << "\" sizes=\"#{dimensions(@dimension)}\" />"
+
+    assert_equal(favicon_link_tag, namespaced_png_favicon_link_tag(@namespace, @dimension, @rel))
+  end
+end