From 5e9fa05be5e5c38e16f9094a292bf01e327affb3 Mon Sep 17 00:00:00 2001
From: eai04191 <eai@mizle.net>
Date: Mon, 13 Jan 2020 11:23:20 +0900
Subject: [PATCH] =?UTF-8?q?spoiler=E3=82=92=E7=94=BB=E5=83=8F=E3=81=AB?=
 =?UTF-8?q?=E3=81=A0=E3=81=91=E9=81=A9=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/app.js                    |  6 +++--
 .../assets/sass/components/_link-card.scss    | 23 +++++++++++--------
 .../views/components/link-card.blade.php      |  9 +++++---
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 3daf978..c64e522 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -96,9 +96,11 @@ $(() => {
         }
     });
 
-    $(document).on('click', '.card-spoiler-overlay', function (event) {
+    $(document).on('click', '.card-spoiler-wrap', function (event) {
         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();
     });
 });
diff --git a/resources/assets/sass/components/_link-card.scss b/resources/assets/sass/components/_link-card.scss
index f5f7268..277a135 100644
--- a/resources/assets/sass/components/_link-card.scss
+++ b/resources/assets/sass/components/_link-card.scss
@@ -31,15 +31,25 @@
     white-space: pre-line;
   }
 
-  .card-spoiler-overlay {
+  .card-spoiler-wrap {
     position: absolute;
     z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     width: 100%;
     height: 100%;
     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 {
       padding: 10px;
@@ -48,9 +58,4 @@
       border-radius: 5px;
     }
   }
-
-  .card-spoiler {
-    z-index: 1;
-    filter: blur(15px) grayscale(100%);
-  }
 }
diff --git a/resources/views/components/link-card.blade.php b/resources/views/components/link-card.blade.php
index 57eda2d..9444546 100644
--- a/resources/views/components/link-card.blade.php
+++ b/resources/views/components/link-card.blade.php
@@ -1,12 +1,15 @@
 <div class="card link-card mb-2 px-0 col-12 d-none" style="font-size: small;">
     @if ($is_too_sensitive)
-        <div class="card-spoiler-overlay">
-            <span class="warning-text">クリックまたはタップで表示</span>
-        </div>
+        <div class="card-spoiler-wrap"> </div>
     @endif
     <a class="text-dark card-link {{ $is_too_sensitive ? 'card-spoiler' : '' }}" href="{{ $link }}" target="_blank" rel="noopener">
         <div class="row no-gutters">
             <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">
             </div>
             <div class="col-12 col-md-6">