diff options
-rw-r--r-- | data/js/misc.js | 19 | ||||
-rw-r--r-- | data/style.css | 20 | ||||
-rw-r--r-- | lib/VNDB/Handler/VNPage.pm | 27 |
3 files changed, 35 insertions, 31 deletions
diff --git a/data/js/misc.js b/data/js/misc.js index 81f2890f..57c40ba5 100644 --- a/data/js/misc.js +++ b/data/js/misc.js @@ -79,25 +79,6 @@ if(byId('listsel')) ulist_redirect('[rv]', '/list', this.name, 'e='+this.options[this.selectedIndex].value); }; - -// NSFW VN image toggle (/v+) -(function() { - var msg = byId('nsfw_show'); - if(msg) { - var img = byId('nsfw_hid'); - byName(msg, 'a')[0].onclick = function() { - setClass(msg, 'hidden', true); - setClass(img, 'hidden', false); - return false; - }; - img.onclick = function() { - setClass(msg, 'hidden', false); - setClass(img, 'hidden', true); - }; - } -})(); - - // NSFW toggle for screenshots (/v+) if(byId('nsfwhide')) byId('nsfwhide').onclick = function() { diff --git a/data/style.css b/data/style.css index e29302bc..4b979bad 100644 --- a/data/style.css +++ b/data/style.css @@ -1,13 +1,17 @@ * { margin: 0; padding: 0; } body, td { font: 12px "Tahoma", "Arial", sans-serif; } body { $_bodybg$; color: $maintext$ } -a { color: $link$; text-decoration: none; } -a:hover { border-bottom: 1px dotted $maintext$; } table { border-collapse: collapse; } table td, table th { vertical-align: top; padding: 3px; } img { border: none; } +a, +.fake_link { color: $link$; text-decoration: none; cursor:pointer; } + +a:hover, +.fake_link:hover { border-bottom: 1px dotted $maintext$; } + table tr.odd, table.stripe tbody tr:nth-child(odd):not(.nostripe), .docs table tbody tr:nth-child(odd) { background: url($_boxbg$) repeat; } @@ -38,6 +42,14 @@ table.stripe tbody tr:nth-child(odd):not(.nostripe), #debug h2 { color: #f00!important; font-size: 20px; } #debug, #debug a { color: #fff!important; } +.visuallyhidden { + position: absolute !important; + left: 0; + height: 1px; width: 1px; + border: 0; padding: 0; + overflow: hidden; + clip: rect(1px 1px 1px 1px); +} /* Warning/Notice Box */ div.warning, div.notice { margin: 5px 10%; padding: 15px; background-color: $warnbg$; border: 1px solid $warnborder$; } @@ -337,6 +349,10 @@ h1.boxtitle, h1.boxtitle a { /***** VN page *******/ +#nsfw_chk:checked ~ * { cursor: pointer; } +#nsfw_chk:checked ~ * > #nsfw_show { display: none; } +#nsfw_chk:not(:checked) ~ * > #nsfw_hid { display: none; } + div.vndetails { margin: 0 auto; max-width: 820px; } div.vnimg { float: left; width: 250px; margin: 0 10px; } div.vnimg i { display: block; width: 100%; text-align: center; font-size: 11px; } diff --git a/lib/VNDB/Handler/VNPage.pm b/lib/VNDB/Handler/VNPage.pm index 0bf9ec4d..6dfcdcd6 100644 --- a/lib/VNDB/Handler/VNPage.pm +++ b/lib/VNDB/Handler/VNPage.pm @@ -367,18 +367,25 @@ sub page { if(!$v->{image}) { p 'No image uploaded yet'; } else { - p $v->{img_nsfw} ? (id => 'nsfw_hid', $self->authPref('show_nsfw') ? () : (class => 'hidden')) : (); - img src => imgurl(cv => $v->{image}), alt => $v->{title}; - i 'Flagged as NSFW' if $v->{img_nsfw}; - end; if($v->{img_nsfw}) { - p id => 'nsfw_show', $self->authPref('show_nsfw') ? (class => 'hidden') : (); - txt 'This image has been flagged as Not Safe For Work.'; - br; br; - a href => '#', 'Show me anyway'; - br; br; - txt '(This warning can be disabled in your account)'; + p class => 'nsfw_pic'; + input id => 'nsfw_chk', type => 'checkbox', class => 'visuallyhidden', $self->authPref('show_nsfw') ? (checked => 'checked') : (); + label for => 'nsfw_chk'; + span id => 'nsfw_show'; + txt 'This image has been flagged as Not Safe For Work.'; + br; br; + span class => 'fake_link', 'Show me anyway'; + br; br; + txt '(This warning can be disabled in your account)'; + end; + span id => 'nsfw_hid'; + img src => imgurl(cv => $v->{image}), alt => $v->{title}; + i 'Flagged as NSFW'; + end; + end; end; + } else { + img src => imgurl(cv => $v->{image}), alt => $v->{title}; } } end 'div'; # /vnimg |