Use old-fashioned <img> tags for platform icons

I don't like the platforms listing in CSS much, after all, and I've
never been a big fan of the <abbr> hacks. Been experimenting with sprite
sheets and inline <svg><use..>, but for now I think the simplest
solution of just using <img> tags still seems the best.

Until I change my mind again and can't resist the allure of throwing all
icons in a single nicely compressed file.

8 files changed, 19 insertions, 11 deletions

diff --git a/lib/VNWeb/HTML.pm b/lib/VNWeb/HTML.pm
index 80dae4b6..8ec6ea85 100644
--- a/lib/VNWeb/HTML.pm
+++ b/lib/VNWeb/HTML.pm
@@ -14,6 +14,7 @@ use JSON::XS;
 use VNDB::Config;
 use VNDB::BBCode;
 use VNDB::Skins;
+use VNDB::Types;
 use VNWeb::Auth;
 use VNWeb::Validation;
 use VNWeb::DB;
@@ -21,6 +22,7 @@ use VNDB::Func 'fmtdate';
 
 our @EXPORT = qw/
     clearfloat_
+    platform_
     debug_
     join_
     user_ user_displayname
@@ -42,6 +44,12 @@ our @EXPORT = qw/
 sub clearfloat_ { div_ class => 'clearfloat', '' }
 
 
+# Platform icon
+sub platform_ {
+    img_ src => config->{url_static}.'/f/plat/'.$_[0].'.svg', class => 'platicon', title => $PLATFORM{$_[0]}, undef;
+}
+
+
 # Throw any data structure on the page for inspection.
 sub debug_ {
     return if !tuwf->debug;
diff --git a/lib/VNWeb/Misc/HomePage.pm b/lib/VNWeb/Misc/HomePage.pm
index b3495643..22d81df6 100644
--- a/lib/VNWeb/Misc/HomePage.pm
+++ b/lib/VNWeb/Misc/HomePage.pm
@@ -189,7 +189,7 @@ sub releases_ {
             span_ sub {
                 rdate_ $_->{released};
                 txt_ ' ';
-                abbr_ class => "icons plat $_", title => $PLATFORM{$_}, '' for $_->{plat}->@*;
+                platform_ $_ for $_->{plat}->@*;
                 abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' for $_->{lang}->@*;
                 txt_ ' ';
                 a_ href => "/$_->{id}", title => $_->{original}||$_->{title}, $_->{title};
diff --git a/lib/VNWeb/Releases/Lib.pm b/lib/VNWeb/Releases/Lib.pm
index a20d1339..e14933e5 100644
--- a/lib/VNWeb/Releases/Lib.pm
+++ b/lib/VNWeb/Releases/Lib.pm
@@ -106,7 +106,7 @@ sub release_row_ {
         td_ class => 'tc1', sub { rdate_ $r->{released} };
         td_ class => 'tc2', defined $r->{minage} ? minage $r->{minage} : '';
         td_ class => 'tc3', sub {
-            abbr_ class => "icons plat $_", title => $PLATFORM{$_}, '' for $r->{platforms}->@*;
+            platform_ $_ for $r->{platforms}->@*;
             if($opt->{lang}) {
                 abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' for $r->{lang}->@*;
             }
diff --git a/lib/VNWeb/Releases/Page.pm b/lib/VNWeb/Releases/Page.pm
index 1f29ad48..36d2f383 100644
--- a/lib/VNWeb/Releases/Page.pm
+++ b/lib/VNWeb/Releases/Page.pm
@@ -108,7 +108,7 @@ sub _infotable_ {
             td_ 'Platform'.($r->{platforms}->@* == 1 ? '' : 's');
             td_ sub {
                 join_ \&br_, sub {
-                    abbr_ class => "icons plat $_", title => $PLATFORM{$_}, ' ';
+                    platform_ $_;
                     txt_ ' '.$PLATFORM{$_};
                 }, $r->{platforms}->@*;
             }
diff --git a/lib/VNWeb/Releases/VNTab.pm b/lib/VNWeb/Releases/VNTab.pm
index 36c69c27..604f2415 100644
--- a/lib/VNWeb/Releases/VNTab.pm
+++ b/lib/VNWeb/Releases/VNTab.pm
@@ -59,7 +59,7 @@ my @rel_cols = (
     default       => 1,
     has_data      => sub { !!@{$_[0]{platforms}} },
     draw          => sub {
-        join_ \&br_, sub { abbr_ class => "icons plat $_", title => $PLATFORM{$_}, ''; }, $_[0]{platforms}->@*;
+        join_ \&br_, sub { platform_ $_ }, $_[0]{platforms}->@*;
         txt_ 'Unknown' if !$_[0]{platforms}->@*;
     },
   }, { # Media
@@ -158,17 +158,17 @@ sub buttons_ {
     };
 
     my sub pl {
-        my($row, $option, $txt, $csscat) = @_;
+        my($row, $option, $txt, $icon) = @_;
         my %opts = map +($_,1), map $_->{$row}->@*, @$r;
         return if !keys %opts;
         p_ class => 'browseopts', sub {
             a_ href => $url->($option, $_), $_ eq $opt->{$option} ? (class => 'optselected') : (), sub {
-                $_ eq 'all' ? txt_ 'All' : abbr_ class => "icons $csscat $_", title => $txt->{$_}, '';
+                $_ eq 'all' ? txt_ 'All' : $icon->($_);
             } for ('all', sort keys %opts);
         }
     };
-    pl 'platforms', 'os', \%PLATFORM, ''     if $opt->{pla};
-    pl 'lang',     'lang',\%LANGUAGE, 'lang' if $opt->{lan};
+    pl 'platforms', 'os', \%PLATFORM, \&platform_ if $opt->{pla};
+    pl 'lang',     'lang',\%LANGUAGE, sub { abbr_ class => "icons lang $_[0]", title => $LANGUAGE{$_[0]}, '' } if $opt->{lan};
 }
 
 
diff --git a/lib/VNWeb/Reviews/Page.pm b/lib/VNWeb/Reviews/Page.pm
index e6d78e4c..d32e4f94 100644
--- a/lib/VNWeb/Reviews/Page.pm
+++ b/lib/VNWeb/Reviews/Page.pm
@@ -36,7 +36,7 @@ sub review_ {
                 a_ href => "/$w->{vid}", $w->{title};
                 if($w->{rid}) {
                     br_;
-                    abbr_ class => "icons plat $_", title => $PLATFORM{$_}, '' for $w->{platforms}->@*;
+                    platform_ $_ for $w->{platforms}->@*;
                     abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' for $w->{lang}->@*;
                     abbr_ class => "icons rt$w->{rtype}", title => $w->{rtype}, '';
                     a_ href => "/$w->{rid}", title => $w->{roriginal}||$w->{rtitle}, $w->{rtitle};
diff --git a/lib/VNWeb/VN/List.pm b/lib/VNWeb/VN/List.pm
index cf710fbd..422e8b1b 100644
--- a/lib/VNWeb/VN/List.pm
+++ b/lib/VNWeb/VN/List.pm
@@ -33,7 +33,7 @@ sub listing_ {
                     abbr_ title => join(', ', $_->{vnlist_labels}->@*), scalar $_->{vnlist_labels}->@* if $_->{vnlist_labels} && $_->{vnlist_labels}->@*;
                     abbr_ title => 'No labels', ' ' if $_->{vnlist_labels} && !$_->{vnlist_labels}->@*;
                 };
-                td_ class => 'tc2', sub { join_ '', sub { abbr_ class => "icons plat $_", title => $PLATFORM{$_}, '' if $_ ne 'unk' }, sort $_->{platforms}->@* };
+                td_ class => 'tc2', sub { join_ '', sub { platform_ $_ if $_ ne 'unk' }, sort $_->{platforms}->@* };
                 td_ class => 'tc3', sub { join_ '', sub { abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' }, reverse sort $_->{lang}->@* };
                 td_ class => 'tc4', sub { rdate_ $_->{c_released} };
                 td_ class => 'tc5', sprintf '%.2f', ($_->{c_popularity}||0)*100;
diff --git a/lib/VNWeb/VN/Page.pm b/lib/VNWeb/VN/Page.pm
index 052d645f..d865f85f 100644
--- a/lib/VNWeb/VN/Page.pm
+++ b/lib/VNWeb/VN/Page.pm
@@ -697,7 +697,7 @@ sub screenshots_ {
         for my $r (grep $rel{$_->{id}}, $v->{releases}->@*) {
             p_ class => 'rel', sub {
                 abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' for $r->{languages}->@*;
-                abbr_ class => "icons plat $_", title => $PLATFORM{$_}, '' for $r->{platforms}->@*;
+                platform_ $_ for $r->{platforms}->@*;
                 a_ href => "/$r->{id}", $r->{title};
             };
             div_ class => 'scr', sub {