VN::Page: Change styling of "alternative titles" expand option

The table is looking much better now but the CSS to make this work is an
abomination. :(

2 files changed, 36 insertions, 25 deletions

diff --git a/css/v2.css b/css/v2.css
index 9242ce8f..19c0d6cf 100644
--- a/css/v2.css
+++ b/css/v2.css
@@ -502,10 +502,14 @@ div.vnimg p                   { text-align: center; padding: 0px; margin: 0; }
 div.vndetails h2              { margin: 5px 0 0 0; }
 .vndesc p                     { padding: 0 0 0 5px; }
 div.vndetails > table         { float: left; width: 100%; max-width: 500px; }
-div.vndetails > table td.key  { width: 90px; }
+div.vndetails td.key,
+div.vndetails > table > tbody > tr > td:first-child  { width: 90px; }
 div.vndetails > table dt      { float: left; font-style: italic; }
 div.vndetails > table dd      { margin-left: 90px; }
-div.vndetails td.title td     { padding: 0 0px }
+div.vndetails td.titles div    { display: inline-block }
+div.vndetails td.titles summary table  { margin-top: -18px }
+div.vndetails td.titles table  { margin-left: 96px }
+div.vndetails tr.title td     { padding: 0 0px }
 div.vndetails td.relations dt { float: none; font-style: normal; }
 div.vndetails td.relations dd { margin-left: 15px; }
 div.vndetails td.anime b      { font-size: 10px; font-weight: normal; padding-right: 4px; }
diff --git a/lib/VNWeb/VN/Page.pm b/lib/VNWeb/VN/Page.pm
index cad82b80..66fd4d28 100644
--- a/lib/VNWeb/VN/Page.pm
+++ b/lib/VNWeb/VN/Page.pm
@@ -379,6 +379,23 @@ sub infobox_tags_ {
 # Also used by Chars::VNTab & Reviews::VNTab
 sub infobox_ {
     my($v, $notags) = @_;
+
+    sub tlang_ {
+        my($t) = @_;
+        tr_ class => 'title', class => $t->{official}?undef:'grayedout', sub {
+            td_ sub {
+                abbr_ class => "icons lang $t->{lang}", title => $LANGUAGE{$t->{lang}}, '';
+            };
+            td_ sub {
+                span_ lang_attr($t->{lang}), $t->{title};
+                if($t->{latin}) {
+                    br_;
+                    txt_ $t->{latin};
+                }
+            }
+        }
+    }
+
     div_ class => 'mainbox', sub {
         itemmsg_ $v;
         h1_ $v->{title};
@@ -389,35 +406,24 @@ sub infobox_ {
 
             table_ class => 'stripe', sub {
                 tr_ sub {
-                    td_ class => 'key', sub{
-                        txt_ $v->{titles}->@* > 1 ? 'Titles' : 'Title';
-                        debug_ $v;
+                    td_ 'Title';
+                    td_ sub {
+                        table_ sub { tlang_ $v->{titles}[0] };
                     };
-                    td_ class => 'title', sub {
-                        sub tlang_ {
-                            my($t) = @_;
-                            tr_ class => $t->{official}?undef:'grayedout', sub {
-                                td_ sub {
-                                    abbr_ class => "icons lang $t->{lang}", title => $LANGUAGE{$t->{lang}}, '';
-                                };
-                                td_ sub {
-                                    span_ lang_attr($t->{lang}), $t->{title};
-                                    if($t->{latin}) {
-                                        br_;
-                                        txt_ $t->{latin};
-                                    }
-                                }
-                            }
-                        }
-                        table_ sub { tlang_ grep $_->{lang} eq $v->{olang}, $v->{titles}->@* };
+                } if $v->{titles}->@* == 1;
+                tr_ sub {
+                    td_ class => 'titles', colspan => 2, sub {
                         details_ sub {
-                            summary_ 'Alternative titles...';
+                            summary_ sub {
+                                div_ 'Titles';
+                                table_ sub { tlang_ grep $_->{lang} eq $v->{olang}, $v->{titles}->@* };
+                            };
                             table_ sub {
                                 tlang_ $_ for grep $_->{lang} ne $v->{olang}, sort { $b->{official} cmp $a->{official} || $a->{lang} cmp $b->{lang} } $v->{titles}->@*;
                             };
-                        } if $v->{titles}->@* > 1;
+                        };
                     };
-                };
+                } if $v->{titles}->@* > 1;
 
                 tr_ sub {
                     td_ 'Aliases';
@@ -447,6 +453,7 @@ sub infobox_ {
                     td_ class => 'vndesc', colspan => 2, sub {
                         h2_ 'Description';
                         p_ sub { lit_ $v->{desc} ? bb_format $v->{desc} : '-' };
+                        debug_ $v;
                     }
                 }
             }