summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2019-11-27 11:10:23 +0100
committerYorhel <git@yorhel.nl>2019-11-27 11:23:48 +0100
commit7cb953265e54a731eb8a5c6bb0d4a45ea337fa80 (patch)
tree0d66fa4bbd92b464f3b5fad75fcea981e8198473
parent09c967c73c473d0bfbeacdb712d3b5158c0757c6 (diff)
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.
-rw-r--r--data/style.css49
-rw-r--r--lib/VNDB/Handler/VNPage.pm22
-rw-r--r--lib/VNDB/Util/BrowseHTML.pm34
-rw-r--r--lib/VNDB/Util/CommonHTML.pm80
-rw-r--r--lib/VNDB/Util/FormHTML.pm22
-rw-r--r--lib/VNWeb/HTML.pm95
6 files changed, 115 insertions, 187 deletions
diff --git a/data/style.css b/data/style.css
index 7f00f5e8..37adbb63 100644
--- a/data/style.css
+++ b/data/style.css
@@ -238,7 +238,7 @@ div.mainbox, table.mainbox td {
padding: 5px;
background: $boxbg$;
}
-div.mainbox-overflow-hack { overflow: hidden; width: 100% }
+div.mainbox-overflow-hack { overflow: hidden; width: 100%; box-sizing: border-box }
.mainbox h1 { color: $boxtitle$; font-size: 24px; margin: -5px 0 15px 0; }
.mainbox h2.alttitle { color: $alttitle$; margin: -17px 0 15px 15px; font-weight: normal; }
.mainbox p { margin: 3px 20px; }
@@ -259,37 +259,22 @@ a.addnew, p.addnew { float: right; margin: 0 }
/***** main tabs *****/
-ul.maintabs { display: inline; margin: 0; }
-ul.maintabs.notfirst { display: block; height: 20px }
-ul.maintabs li { display: inline; list-style-type: none }
-ul.maintabs li a, ul.maintabs li b {
- float: right;
- display: block;
- height: 14px;
- padding: 1px 7px 5px 7px;
- margin: 0 0 0 10px;
-}
-ul.maintabs li a {
- border: 1px solid $border$;
- border-bottom: none;
- background-color: $tabbg$;
- color: $grayedout$;
-}
-ul.maintabs.notfirst li a,
-ul.maintabs.notfirst li b { margin-top: 20px }
-ul.maintabs.bottom li a,
-ul.maintabs.bottom li b { margin-top: 10px; padding: 4px 7px 2px 7px }
-ul.maintabs.bottom li a { border-bottom: 1px solid $border$; border-top: none }
-ul.maintabs li.left a,
-ul.maintabs li.left b { float: left; margin-left: 0; margin-right: 10px }
-ul.maintabs li b { margin-left: -2px; margin-right: -7px }
-ul.maintabs li.left b { margin-left: -7px; margin-right: -2px }
-ul.maintabs li.tabselected a,
-ul.maintabs li a:hover { background: $_blendbg$; color: $maintext$; padding-bottom: 6px }
-ul.maintabs.bottom li.tabselected a,
-ul.maintabs.bottom li a:hover { padding-bottom: 2px; padding-top: 5px; margin-top: 9px }
-ul.maintabs.browsetabs li a { margin-left: 5px; color: $maintext$ }
-ul.maintabs.browsetabs li.left a { margin-left: 0; margin-right: 5px }
+div.maintabs { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 }
+#maincontent div:nth-child(1).maintabs { margin-top: 0 }
+div.maintabs.right { justify-content: flex-end }
+div.maintabs.left { justify-content: flex-start }
+div.maintabs ul { margin: 0; padding: 0; list-style-type: none }
+div.maintabs li { display: inline-block; margin: 0 0 0 10px }
+div.maintabs ul li:nth-child(1) { margin-left: 0!important }
+div.maintabs li a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $grayedout$; }
+div.maintabs li.tabselected a,
+div.maintabs li a:hover { background: $_blendbg$; color: $maintext$; height: 22px }
+div.maintabs.browsetabs li a { color: $maintext$ }
+div.maintabs.browsetabs li { margin-left: 5px }
+div.maintabs.bottom { margin-top: 10px; /* WHY!? */ margin-bottom: -10px }
+div.maintabs.bottom li a { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border$; border-top: none }
+div.maintabs.bottom li.tabselected a,
+div.maintabs.bottom li a:hover { padding-top: 5px; height: 22px; margin-top: -1px }
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, '&laquo; 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, '&lsaquo; previous');
-
- my $l = ceil($cnt/$pp)-$p+1;
- $l > 2 and $tab->(0, $l+$p-1, 'last &raquo;');
- $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 &rsaquo;');
- end 'ul';
+ div class => 'maintabs browsetabs '.($al eq 't' ? '' : 'bottom');
+ ul;
+ $p > 2 and ref $np and $tab->(1, '&laquo; 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, '&lsaquo; previous');
+ end;
+
+ ul;
+ my $l = ceil($cnt/$pp)-$p+1;
+ $l > 1 and $tab->($p+1, 'next &rsaquo;');
+ $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 &raquo;');
+ 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
diff --git a/lib/VNWeb/HTML.pm b/lib/VNWeb/HTML.pm
index c35a2518..a9ab5f67 100644
--- a/lib/VNWeb/HTML.pm
+++ b/lib/VNWeb/HTML.pm
@@ -325,38 +325,41 @@ sub _maintabs_ {
};
};
- ul_ class => 'maintabs', sub {
- t hist => "/$id/hist", 'history' if $t =~ /[uvrpcsd]/;
-
- if($t =~ /[uvp]/) {
- my $cnt = tuwf->dbVali(q{
- SELECT COUNT(*)
- FROM threads_boards tb
- JOIN threads t ON t.id = tb.tid
- WHERE tb.type =}, \$t, 'AND tb.iid =', \$o->{id}, 'AND', VNWeb::Discussions::Lib::sql_visible_threads());
- t disc => "/t/$id", "discussions ($cnt)";
- };
- t posts => "/$id/posts", 'posts' if $t eq 'u';
-
- do {
- t wish => "/$id/wish", 'wishlist';
- t votes => "/$id/votes", 'votes';
- t list => "/$id/list", 'list';
- } if $t eq 'u' && (
- auth->permUsermod || (auth && auth->uid == $o->{id})
- || !($o->{hide_list} // tuwf->dbVali('SELECT hide_list FROM users WHERE id =', \$o->{id}))
- );
-
- t tagmod => "/$id/tagmod", 'modify tags' if $t eq 'v' && auth->permTag && !$o->{entry_hidden};
- t copy => "/$id/copy", 'copy' if $t =~ /[rc]/ && can_edit $t, $o;
- t edit => "/$id/edit", 'edit' if can_edit $t, $o;
- t releases => "/$id/releases", 'releases' if $t eq 'v';
-
- t rgraph => "/$id/rg", 'relations'
- if $t =~ /[vp]/ && (exists $o->{rgraph} ? $o->{rgraph}
- : tuwf->dbVali('SELECT rgraph FROM', $t eq 'v' ? 'vn' : 'producers', 'WHERE id =', \$o->{id}));
+ div_ class => 'maintabs right', sub {
+ ul_ sub {
+ t '' => "/$id", $id;
+
+ t rg => "/$id/rg", 'relations'
+ if $t =~ /[vp]/ && (exists $o->{rgraph} ? $o->{rgraph}
+ : tuwf->dbVali('SELECT rgraph FROM', $t eq 'v' ? 'vn' : 'producers', 'WHERE id =', \$o->{id}));
+
+ t releases => "/$id/releases", 'releases' if $t eq 'v';
+ t edit => "/$id/edit", 'edit' if can_edit $t, $o;
+ t copy => "/$id/copy", 'copy' if $t =~ /[rc]/ && can_edit $t, $o;
+ t tagmod => "/$id/tagmod", 'modify tags' if $t eq 'v' && auth->permTag && !$o->{entry_hidden};
+
+ do {
+ t list => "/$id/list", 'list';
+ t votes => "/$id/votes", 'votes';
+ t wish => "/$id/wish", 'wishlist';
+ } if $t eq 'u' && (
+ auth->permUsermod || (auth && auth->uid == $o->{id})
+ || !($o->{hide_list} // tuwf->dbVali('SELECT hide_list FROM users WHERE id =', \$o->{id}))
+ );
+
+ t posts => "/$id/posts", 'posts' if $t eq 'u';
+
+ if($t =~ /[uvp]/) {
+ my $cnt = tuwf->dbVali(q{
+ SELECT COUNT(*)
+ FROM threads_boards tb
+ JOIN threads t ON t.id = tb.tid
+ WHERE tb.type =}, \$t, 'AND tb.iid =', \$o->{id}, 'AND', VNWeb::Discussions::Lib::sql_visible_threads());
+ t disc => "/t/$id", "discussions ($cnt)";
+ };
- t '' => "/$id", $id;
+ t hist => "/$id/hist", 'history' if $t =~ /[uvrpcsd]/;
+ }
}
}
@@ -670,8 +673,8 @@ sub paginate_ {
return if $p == 1 && $cnt <= $pp;
my sub tab_ {
- my($left, $page, $label) = @_;
- li_ mkclass(left => $left), sub {
+ my($page, $label) = @_;
+ li_ sub {
local $_ = $page;
my $u = $url->(p => $page);
a_ href => $u, $label;
@@ -683,17 +686,21 @@ sub paginate_ {
}
my $nc = 5; # max. number of buttons on each side
- ul_ class => 'maintabs browsetabs ' . ($al eq 't' ? 'notfirst' : 'bottom'), sub {
- $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 ›';
+ div_ class => 'maintabs browsetabs '.($al eq 't' ? '' : 'bottom'), sub {
+ ul_ sub {
+ $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';
+ };
+
+ ul_ sub {
+ 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 »';
+ };
}
}