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 @@