cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add srcset to img tags inside picture elements

Browse source 
Some browsers (in particular Safari on iOS) don't support picture
yet but do support srcset on the img tag.
This commit is contained in:
Holger Jeromin 2015-09-14 16:52:39 +02:00 • committed by Tom Hughes
parent 9aaea24702
commit 37a4fc6dd1
5 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.rubocop_todo.yml
View file

@ -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.

2
app/helpers/user_roles_helper.rb
View file

@ -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

6
app/views/layouts/_flash.html.erb
View file

@ -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>

2
app/views/layouts/_header.html.erb
View file

@ -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>

16
test/helpers/user_roles_helper_test.rb
View file

@ -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