Add srcset to img tags inside picture elements
authorHolger Jeromin <mailgithub@katur.de>
Mon, 14 Sep 2015 14:52:39 +0000 (16:52 +0200)
committerTom Hughes <tom@compton.nu>
Tue, 15 Sep 2015 07:48:50 +0000 (08:48 +0100)
Some browsers (in particular Safari on iOS) don't support picture
yet but do support srcset on the img tag.

.rubocop_todo.yml
app/helpers/user_roles_helper.rb
app/views/layouts/_flash.html.erb
app/views/layouts/_header.html.erb
test/helpers/user_roles_helper_test.rb

index 03c2e3d..287fcd9 100644 (file)
@@ -75,7 +75,7 @@ Metrics/CyclomaticComplexity:
 # Offense count: 2535
 # Configuration parameters: AllowURI, URISchemes.
 Metrics/LineLength:
 # Offense count: 2535
 # Configuration parameters: AllowURI, URISchemes.
 Metrics/LineLength:
-  Max: 878
+  Max: 962
 
 # Offense count: 628
 # Configuration parameters: CountComments.
 
 # Offense count: 628
 # Configuration parameters: CountComments.
index 2d3d49d..b6961cd 100644 (file)
@@ -26,7 +26,7 @@ module UserRolesHelper
 
     if image
       svg_icon = tag("source", :srcset => image_path("#{image}.svg"), :type => "image/svg+xml")
 
     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
       icon = content_tag("picture", svg_icon + png_icon)
       icon = link_to(icon, url, :method => :post, :confirm => confirm) if url
     end
index 2ba8ee9..dc458fd 100644 (file)
@@ -2,7 +2,7 @@
   <div class="flash error">
     <picture>
       <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
   <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>
     </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">
   <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>
     </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">
   <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>
     </picture>
     <div class="message"><%= flash[:notice] %></div>
   </div>
index 7e4dd96..f5cfd20 100644 (file)
@@ -3,7 +3,7 @@
     <a href="<%= root_path %>" class="geolink">
       <picture>
         <source srcset="<%= image_path "osm_logo.svg" %>" type="image/svg+xml">
     <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>
       </picture>
       <%= t 'layouts.project_name.h1' %>
     </a>
index ad9a6ed..53169b7 100644 (file)
@@ -10,17 +10,17 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "", icon
 
     icon = role_icon(users(:moderator_user), "moderator")
     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")
   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")
 
     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
   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 "  ", 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))
 
     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))
   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))
 
     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))
 
     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
   end
 end