CSS: Less hacky .maintabs

Flexbox instead of floats. Apart from that, it's still very hacky. Uses
relative positioning in order to overlay 1px over the .mainbox.

This should fix the ages-old 'bottom tabs overlay next mainbox' bug and
provide more flexibility with adding a top-level <fieldset> or centered
buttons.

4 files changed, 47 insertions, 111 deletions

diff --git a/lib/VNDB/Handler/VNPage.pm b/lib/VNDB/Handler/VNPage.pm
index 4255a221..87c9244c 100644
--- a/lib/VNDB/Handler/VNPage.pm
+++ b/lib/VNDB/Handler/VNPage.pm
@@ -505,15 +505,19 @@ sub page {
   my $chars = $self->dbCharGet(vid => $v->{id}, what => "seiyuu vns($v->{id})".($char ? ' extended traits' : ''), results => 500);
   if(@$chars || $self->authCan('edit')) {
     clearfloat; # fix tabs placement when tags are hidden
-    ul class => 'maintabs notfirst';
-     if(@$chars) {
-       li class => 'left '.(!$char ? ' tabselected' : ''); a href => "/v$v->{id}#main", name => 'main', 'main'; end;
-       li class => 'left '.($char  ? ' tabselected' : ''); a href => "/v$v->{id}/chars#chars", name => 'chars', 'characters'; end;
-     }
-     if($self->authCan('edit')) {
-       li; a href => "/c/new?vid=$v->{id}", 'add character'; end;
-       li; a href => "/v$v->{id}/add", 'add release'; end;
-     }
+    div class => 'maintabs';
+     ul;
+      if(@$chars) {
+        li class => (!$char ? ' tabselected' : ''); a href => "/v$v->{id}#main", name => 'main', 'main'; end;
+        li class => ($char  ? ' tabselected' : ''); a href => "/v$v->{id}/chars#chars", name => 'chars', 'characters'; end;
+      }
+     end;
+     ul;
+      if($self->authCan('edit')) {
+        li; a href => "/v$v->{id}/add", 'add release'; end;
+        li; a href => "/c/new?vid=$v->{id}", 'add character'; end;
+      }
+     end;
     end;
   }
 
diff --git a/lib/VNDB/Util/BrowseHTML.pm b/lib/VNDB/Util/BrowseHTML.pm
index 24e657ae..7846d5c0 100644
--- a/lib/VNDB/Util/BrowseHTML.pm
+++ b/lib/VNDB/Util/BrowseHTML.pm
@@ -94,31 +94,35 @@ sub htmlBrowseNavigate {
   $url .= $url =~ /\?/ ? ';p=' : '?p=' unless $na;
 
   my $tab = sub {
-    my($left, $page, $label) = @_;
-    li $left ? (class => 'left') : ();
+    my($page, $label) = @_;
+    li;
      a href => $url.$page; lit $label; end;
     end;
   };
   my $ell = sub {
     use utf8;
-    li class => 'ellipsis'.(shift() ? ' left' : '');
+    li class => 'ellipsis';
      b '⋯';
     end;
   };
   my $nc = 5; # max. number of buttons on each side
 
-  ul class => 'maintabs browsetabs ' . ($al eq 't' ? 'notfirst' : 'bottom');
-   $p > 2     and ref $np and $tab->(1, 1, '« first');
-   $p > $nc+1 and ref $np and $ell->(1);
-   $p > $_    and ref $np and $tab->(1, $p-$_, $p-$_) for (reverse 2..($nc>$p-2?$p-2:$nc-1));
-   $p > 1                 and $tab->(1, $p-1, '‹ previous');
-
-   my $l = ceil($cnt/$pp)-$p+1;
-   $l > 2     and $tab->(0, $l+$p-1, 'last »');
-   $l > $nc+1 and $ell->(0);
-   $l > $_    and $tab->(0, $p+$_, $p+$_) for (reverse 2..($nc>$l-2?$l-2:$nc-1));
-   $l > 1     and $tab->(0, $p+1, 'next ›');
-  end 'ul';
+  div class => 'maintabs browsetabs '.($al eq 't' ? '' : 'bottom');
+   ul;
+    $p > 2     and ref $np and $tab->(1, '« first');
+    $p > $nc+1 and ref $np and $ell->();
+    $p > $_    and ref $np and $tab->($p-$_, $p-$_) for (reverse 2..($nc>$p-2?$p-2:$nc-1));
+    $p > 1                 and $tab->($p-1, '‹ previous');
+   end;
+
+   ul;
+    my $l = ceil($cnt/$pp)-$p+1;
+    $l > 1     and $tab->($p+1, 'next ›');
+    $l > $_    and $tab->($p+$_, $p+$_) for (2..($nc>$l-2?$l-2:$nc-1));
+    $l > $nc+1 and $ell->();
+    $l > 2     and $tab->($l+$p-1, 'last »');
+   end;
+  end 'div';
 }
 
 
diff --git a/lib/VNDB/Util/CommonHTML.pm b/lib/VNDB/Util/CommonHTML.pm
index c6986c1c..9472f53d 100644
--- a/lib/VNDB/Util/CommonHTML.pm
+++ b/lib/VNDB/Util/CommonHTML.pm
@@ -21,83 +21,9 @@ our @EXPORT = qw|
 # Arguments: u/v/r/p/g/i/c/d, object, currently selected item (empty=main)
 sub htmlMainTabs {
   my($self, $type, $obj, $sel) = @_;
-  $sel ||= '';
-  my $id = $type.$obj->{id};
-
-  return if $type eq 'g' && !$self->authCan('tagmod');
-
-  ul class => 'maintabs';
-   if($type =~ /[uvrpcsd]/) {
-     li $sel eq 'hist' ? (class => 'tabselected') : ();
-      a href => "/$id/hist", 'history';
-     end;
-   }
-
-   if($type =~ /[uvp]/) {
-     my $cnt = $self->dbThreadCount($type, $obj->{id});
-     li $sel eq 'disc' ? (class => 'tabselected') : ();
-      a href => "/t/$id", "discussions ($cnt)";
-     end;
-   }
-
-   if($type eq 'u') {
-     li $sel eq 'posts' ? (class => 'tabselected') : ();
-      a href => "/$id/posts", 'posts';
-     end;
-   }
-
-   if($type eq 'u' && (!$obj->{hide_list} || ($self->authInfo->{id} && $self->authInfo->{id} == $obj->{id}) || $self->authCan('usermod'))) {
-     li $sel eq 'wish' ? (class => 'tabselected') : ();
-      a href => "/$id/wish", 'wishlist';
-     end;
-
-     li $sel eq 'votes' ? (class => 'tabselected') : ();
-      a href => "/$id/votes", 'votes';
-     end;
-
-     li $sel eq 'list' ? (class => 'tabselected') : ();
-      a href => "/$id/list", 'list';
-     end;
-   }
-
-   if($type eq 'v' && $self->authCan('tag') && !$obj->{hidden}) {
-     li $sel eq 'tagmod' ? (class => 'tabselected') : ();
-      a href => "/$id/tagmod", 'modify tags';
-     end;
-   }
-
-   if($type =~ /[rc]/ && $self->authCan('edit')) {
-     li $sel eq 'copy' ? (class => 'tabselected') : ();
-      a href => "/$id/copy", 'copy';
-     end;
-   }
-
-   if(   $type eq 'u'      && ($self->authInfo->{id} && $obj->{id} == $self->authInfo->{id} || $self->authCan('usermod'))
-      || $type =~ /[vrpcs]/ && $self->authCan('edit') && ((!$obj->{locked} && !$obj->{hidden}) || $self->authCan('dbmod'))
-      || $type =~ /[gi]/   && $self->authCan('tagmod')
-      || $type eq 'd'      && $self->authCan('dbmod')
-   ) {
-     li $sel eq 'edit' ? (class => 'tabselected') : ();
-      a href => "/$id/edit", 'edit';
-     end;
-   }
-
-   if($type eq 'v') {
-    li $sel eq 'releases' ? (class => 'tabselected') : ();
-    a href => "/$id/releases", 'releases';
-    end;
-   }
-
-   if($type =~ /[vp]/ && $obj->{rgraph}) {
-     li $sel eq 'rg' ? (class => 'tabselected') : ();
-      a href => "/$id/rg", 'relations';
-     end;
-   }
-
-   li !$sel ? (class => 'tabselected') : ();
-    a href => "/$id", $id;
-   end;
-  end 'ul';
+  $obj->{entry_hidden} = $obj->{hidden};
+  $obj->{entry_locked} = $obj->{locked};
+  VNWeb::HTML::_maintabs_({ type => $type, dbobj => $obj, tab => $sel||''});
 }
 
 
diff --git a/lib/VNDB/Util/FormHTML.pm b/lib/VNDB/Util/FormHTML.pm
index 1a1313e8..85b7fab9 100644
--- a/lib/VNDB/Util/FormHTML.pm
+++ b/lib/VNDB/Util/FormHTML.pm
@@ -209,16 +209,18 @@ sub htmlForm {
 
   # tabs
   if(@subs > 2) {
-    ul class => 'maintabs notfirst', id => 'jt_select';
-     for (0..$#subs/2) {
-       li class => 'left';
-        a href => "#$subs[$_*2]", id => "jt_sel_$subs[$_*2]", $subs[$_*2+1][0];
-       end;
-     }
-     li class => 'left';
-      a href => '#all', id => 'jt_sel_all', 'All items';
-     end;
-    end 'ul';
+    div class => 'maintabs left';
+     ul id => 'jt_select';
+      for (0..$#subs/2) {
+        li class => 'left';
+         a href => "#$subs[$_*2]", id => "jt_sel_$subs[$_*2]", $subs[$_*2+1][0];
+        end;
+      }
+      li class => 'left';
+       a href => '#all', id => 'jt_sel_all', 'All items';
+      end;
+     end 'ul';
+    end 'div';
   }
 
   # form subs