From: Holger Jeromin <mailgithub@katur.de>
Date: Mon, 14 Sep 2015 14:52:39 +0000 (+0200)
Subject: Add srcset to img tags inside picture elements
X-Git-Tag: live~4548
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/37a4fc6dd14dfedc0c44a8d7bf6453df0db9e1b5?hp=9aaea24702d0d36038422e6a0c77d526f04e61d5

Add srcset to img tags inside picture elements

Some browsers (in particular Safari on iOS) don't support picture
yet but do support srcset on the img tag.
---

diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml
index 03c2e3d6f..287fcd9f9 100644
--- a/.rubocop_todo.yml
+++ b/.rubocop_todo.yml
@@ -75,7 +75,7 @@ Metrics/CyclomaticComplexity:
 # Offense count: 2535
 # Configuration parameters: AllowURI, URISchemes.
 Metrics/LineLength:
-  Max: 878
+  Max: 962
 
 # Offense count: 628
 # Configuration parameters: CountComments.
diff --git a/app/helpers/user_roles_helper.rb b/app/helpers/user_roles_helper.rb
index 2d3d49d77..b6961cd8b 100644
--- a/app/helpers/user_roles_helper.rb
+++ b/app/helpers/user_roles_helper.rb
@@ -26,7 +26,7 @@ module UserRolesHelper
 
     if image
       svg_icon = tag("source", :srcset => image_path("#{image}.svg"), :type => "image/svg+xml")
-      png_icon = image_tag("#{image}.png", :size => "20x20", :border => 0, :alt => alt, :title => title)
+      png_icon = image_tag("#{image}.png", :srcset => image_path("#{image}.svg"), :size => "20x20", :border => 0, :alt => alt, :title => title)
       icon = content_tag("picture", svg_icon + png_icon)
       icon = link_to(icon, url, :method => :post, :confirm => confirm) if url
     end
diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index 2ba8ee95d..dc458fdcf 100644
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -2,7 +2,7 @@
   <div class="flash error">
     <picture>
       <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
-      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
     </picture>
     <div class="message"><%= flash[:error] %></div>
   </div>
@@ -12,7 +12,7 @@
   <div class="flash warning">
     <picture>
       <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
-      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
     </picture>
     <div class="message"><%= flash[:warning] %></div>
   </div>
@@ -22,7 +22,7 @@
   <div class="flash notice">
     <picture>
       <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
-      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
     </picture>
     <div class="message"><%= flash[:notice] %></div>
   </div>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 7e4dd96d3..f5cfd205b 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -3,7 +3,7 @@
     <a href="<%= root_path %>" class="geolink">
       <picture>
         <source srcset="<%= image_path "osm_logo.svg" %>" type="image/svg+xml">
-        <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
+        <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
       </picture>
       <%= t 'layouts.project_name.h1' %>
     </a>
diff --git a/test/helpers/user_roles_helper_test.rb b/test/helpers/user_roles_helper_test.rb
index ad9a6ed63..53169b75a 100644
--- a/test/helpers/user_roles_helper_test.rb
+++ b/test/helpers/user_roles_helper_test.rb
@@ -10,17 +10,17 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "", icon
 
     icon = role_icon(users(:moderator_user), "moderator")
-    assert_dom_equal '<picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icon
+    assert_dom_equal '<picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icon
   end
 
   def test_role_icon_administrator
     @user = users(:administrator_user)
 
     icon = role_icon(users(:normal_user), "moderator")
-    assert_dom_equal '<a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icon
+    assert_dom_equal '<a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icon
 
     icon = role_icon(users(:moderator_user), "moderator")
-    assert_dom_equal '<a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icon
+    assert_dom_equal '<a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icon
   end
 
   def test_role_icons_normal
@@ -30,22 +30,22 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "  ", icons
 
     icons = role_icons(users(:moderator_user))
-    assert_dom_equal '  <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
+    assert_dom_equal '  <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
 
     icons = role_icons(users(:super_user))
-    assert_dom_equal ' <picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img border="0" alt="This user is an administrator" title="This user is an administrator" src="/images/roles/administrator.png" width="20" height="20" /></picture> <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
+    assert_dom_equal ' <picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img srcset="/images/roles/administrator.svg" border="0" alt="This user is an administrator" title="This user is an administrator" src="/images/roles/administrator.png" width="20" height="20" /></picture> <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
   end
 
   def test_role_icons_administrator
     @user = users(:administrator_user)
 
     icons = role_icons(users(:normal_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img srcset="/images/roles/blank_administrator.svg" border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icons
 
     icons = role_icons(users(:moderator_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img srcset="/images/roles/blank_administrator.svg" border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
 
     icons = role_icons(users(:super_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to revoke the role `administrator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/administrator/revoke"><picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img border="0" alt="Revoke administrator access" title="Revoke administrator access" src="/images/roles/administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to revoke the role `administrator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/administrator/revoke"><picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img srcset="/images/roles/administrator.svg" border="0" alt="Revoke administrator access" title="Revoke administrator access" src="/images/roles/administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
   end
 end