pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

spoilerを画像にだけ適用するように変更

Browse Source
This commit is contained in:
eai04191 2020-01-13 11:23:20 +09:00
parent 9f565798c0
commit 5e9fa05be5
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/js/app.js vendored
View File

@ -96,9 +96,11 @@ $(() => {
} }
}); });
$(document).on('click', '.card-spoiler-overlay', function (event) { $(document).on('click', '.card-spoiler-wrap', function (event) {
const $this = $(this); const $this = $(this);
$this.siblings(".card-link").removeClass("card-spoiler"); const $card = $this.siblings(".card-link");
$card.removeClass("card-spoiler");
$card.find('.card-img-spoiler-overlay').remove();
$this.remove(); $this.remove();
}); });
}); });

23
resources/assets/sass/components/_link-card.scss vendored
View File

@ -31,15 +31,25 @@
white-space: pre-line; white-space: pre-line;
} }
.card-spoiler-overlay { .card-spoiler-wrap {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
}
.card-spoiler img{
z-index: 1;
filter: blur(15px) grayscale(100%);
}
.card-img-spoiler-overlay {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
.warning-text { .warning-text {
padding: 10px; padding: 10px;
@ -48,9 +58,4 @@
border-radius: 5px; border-radius: 5px;
} }
} }
.card-spoiler {
z-index: 1;
filter: blur(15px) grayscale(100%);
}
} }

9
resources/views/components/link-card.blade.php
View File

@ -1,12 +1,15 @@
<div class="card link-card mb-2 px-0 col-12 d-none" style="font-size: small;"> <div class="card link-card mb-2 px-0 col-12 d-none" style="font-size: small;">
@if ($is_too_sensitive) @if ($is_too_sensitive)
<div class="card-spoiler-overlay"> <div class="card-spoiler-wrap"> </div>
<span class="warning-text">クリックまたはタップで表示</span>
</div>
@endif @endif
<a class="text-dark card-link {{ $is_too_sensitive ? 'card-spoiler' : '' }}" href="{{ $link }}" target="_blank" rel="noopener"> <a class="text-dark card-link {{ $is_too_sensitive ? 'card-spoiler' : '' }}" href="{{ $link }}" target="_blank" rel="noopener">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col-12 col-md-6 justify-content-center align-items-center"> <div class="col-12 col-md-6 justify-content-center align-items-center">
@if ($is_too_sensitive)
<div class="card-img-spoiler-overlay">
<span class="warning-text">クリックまたはタップで表示</span>
</div>
@endif
<img src="" alt="Thumbnail" class="w-100 bg-secondary"> <img src="" alt="Thumbnail" class="w-100 bg-secondary">
</div> </div>
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">