VN::List: Add list widget to cards & grid mode

2 files changed, 26 insertions, 19 deletions

diff --git a/css/v2.css b/css/v2.css
index c8143748..02048334 100644
--- a/css/v2.css
+++ b/css/v2.css
@@ -641,17 +641,19 @@ div#vntags                    { margin: 0 30px 0 30px; border-top: 1px solid $bo
 .vncards > div { padding: 2px 2px 10px 2px; display: flex; flex: 1; min-width: 380px }
 .vncards > div:hover { background-color: $secbg }
 .vncards > div > div:first-child { flex-shrink: 0; width: 90px; height: 120px; text-align: center }
-.vncards > div > div:nth-child(2) { height: 120px; padding-left: 5px; overflow-y: hidden }
+.vncards > div > div:nth-child(2) { height: 120px; padding-left: 5px; overflow-y: hidden; width: 100% }
 .vncards table td { padding: 0 5px 0 0 }
+.vncards .ulist-widget-icon { float: right; margin: 2px 5px 0 5px!important }
 
 .vngrid { padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-evenly }
-.vngrid > a { margin: 5px 10px 15px 10px; flex: 1 0 200px; max-width: 256px; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: top }
-.vngrid > a > div { display: none }
-.vngrid > a:hover, .vngrid > a.noimage { border-bottom: none }
-.vngrid > a:hover > div, .vngrid > a.noimage > div { box-sizing: border-box; padding: 5px; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); color: $maintext }
-.vngrid > a > div > span:first-child { display: block; font-weight: bold }
+.vngrid > div { margin: 5px 10px 15px 10px; flex: 1 0 200px; max-width: 256px; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: top }
+.vngrid > div > a { display: none }
+.vngrid > div > a:hover { border-bottom: none }
+.vngrid > div:hover > a, .vngrid > div.noimage > a { box-sizing: border-box; padding: 5px; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); color: $maintext }
+.vngrid > div > a > span:first-child { display: block; font-weight: bold }
 .vngrid table { margin: 10px 0 }
 .vngrid table td { padding: 0 5px 0 0 }
+.vngrid .ulist-widget-icon { float: right; margin: 280px 0 -300px -20px!important; padding: 3px; width: 20px; height: 20px } /* Horrible hacks everywhere */
 
 
 
diff --git a/lib/VNWeb/VN/List.pm b/lib/VNWeb/VN/List.pm
index 0c28a1c4..03caf8b9 100644
--- a/lib/VNWeb/VN/List.pm
+++ b/lib/VNWeb/VN/List.pm
@@ -72,6 +72,16 @@ sub listing_ {
 
     my sub url { '?'.query_encode %$opt, @_ }
 
+    my sub widget_ {
+        my($v) = @_;
+        elm_ 'UList.Widget', $VNWeb::ULists::Elm::WIDGET, {
+            uid    => auth->uid,
+            vid    => $v->{id},
+            labels => $v->{on_vnlist} ? $v->{vnlist_labels} : undef,
+            full   => undef,
+        } if auth;
+    }
+
     paginate_ \&url, $opt->{p}, [$count, $opt->{s}->results], 't', sub { $opt->{s}->elm_ };
 
     div_ class => 'mainbox browse vnbrowse', sub {
@@ -96,14 +106,7 @@ sub listing_ {
                         a_ href => "/$_->{id}", title => $_->{original}||$_->{name}, $_->{name};
                     }, sort { $a->{name} cmp $b->{name} || $a->{id} <=> $b->{id} } $_->{developers}->@*;
                 } if $opt->{s}->vis('developer');
-                td_ class => 'tc_ulist', sub {
-                    elm_ 'UList.Widget', $VNWeb::ULists::Elm::WIDGET, {
-                        uid    => auth->uid,
-                        vid    => $_->{id},
-                        labels => $_->{on_vnlist} ? $_->{vnlist_labels} : undef,
-                        full   => undef,
-                    } if auth;
-                };
+                td_ class => 'tc_ulist', sub { widget_ $_ };
                 td_ class => 'tc_plat',  sub { join_ '', sub { platform_ $_ if $_ ne 'unk' }, sort $_->{platforms}->@* };
                 td_ class => 'tc_lang',  sub { join_ '', sub { abbr_ class => "icons lang $_", title => $LANGUAGE{$_}, '' }, reverse sort $_->{lang}->@* };
                 td_ class => 'tc_rel',   sub { rdate_ $_->{c_released} };
@@ -176,15 +179,17 @@ sub listing_ {
                     txt_ 'no image';
                 }
             };
-            div_ sub { infoblock_ 1 };
+            div_ sub {
+                widget_ $_;
+                infoblock_ 1;
+            };
         } for @$list;
     } if $opt->{s}->cards;
 
     div_ class => 'mainbox vngrid', sub {
-        a_ href => "/$_->{id}", title => $_->{original}||$_->{title},
-            !$_->{image} || image_hidden($_->{image}) ? (class => 'noimage') : (style => 'background-image: url("'.imgurl($_->{image}{id}).'")'),
-        sub {
-            div_ sub { infoblock_ 0 };
+        div_ !$_->{image} || image_hidden($_->{image}) ? (class => 'noimage') : (style => 'background-image: url("'.imgurl($_->{image}{id}).'")'), sub {
+            widget_ $_;
+            a_ href => "/$_->{id}", title => $_->{original}||$_->{title}, sub { infoblock_ 0 };
         } for @$list;
     } if $opt->{s}->grid;