summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzx14 <zx14@vndb.org>2018-10-22 08:30:53 +0700
committerAlexander-- <alexander.r@gmx.com>2018-10-23 00:04:14 +0700
commit22b070a421fd15435cd10d4084fea05526660c11 (patch)
treed9a07b5173f63f266510f1937f2d4ec529f3fb3e
parentca1117d0d6476b94466eb99a79571e495071a90a (diff)
Add JS-less NSFW toggle
-rw-r--r--data/js/misc.js19
-rw-r--r--data/style.css20
-rw-r--r--lib/VNDB/Handler/VNPage.pm27
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