Add nsfw mask for status media
authorr <r@freesoftwareextremist.com>
Sun, 22 Dec 2019 04:25:56 +0000 (04:25 +0000)
committerr <r@freesoftwareextremist.com>
Sun, 22 Dec 2019 04:25:56 +0000 (04:25 +0000)
static/main.css
templates/status.tmpl

index 89bb9cda9a3b283e0a54ac151d7166b8275b80fc..2dcb4a6effed2b048b1eb657c8737bbfd685389f 100644 (file)
@@ -97,6 +97,7 @@
        max-height: 180px;
        max-width: 220px;
        width: auto;
+       vertical-align: bottom;
 }
 
 .page-title {
 
 .img-link {
        display: inline-block;
+       position: relative;
+}
+
+.status-nsfw-overlay {
+       height: 100%;
+       width: 100%;
+       background: black;
+       position: absolute;
+       top: 0;
+       left: 0;
+}
+
+.img-link:hover .status-nsfw-overlay {
+       display: none;
+}
+
+.status-video-container {
+       display: inline-block;
+       position: relative;
+}
+
+.status-video-container:hover .status-nsfw-overlay {
+       display: none;
 }
index 7ec7d291a17b0b2d358685e70e863d0162470b24..e62296d255bf0cda578074d3972f748927f26a7d 100644 (file)
@@ -61,6 +61,9 @@
                        {{if eq .Type "image"}}
                        <a class="img-link" href="{{.URL}}" target="_blank">
                                <img class="status-image" src="{{.URL}}" alt="status-image" />
+                               {{if $.Sensitive}}
+                               <div class="status-nsfw-overlay"></div>
+                               {{end}}
                        </a>
                        {{else if eq .Type "audio"}}
                        <audio class="status-audio" controls preload="none">
                                <p> Your browser doesn't support HTML5 audio </p>
                        </audio>
                        {{else if eq .Type "video"}}
-                       <video class="status-video" controls preload="none">
-                               <source src="{{.URL}}">
-                               <p> Your browser doesn't support HTML5 video </p>
-                       </video>
+                       <div class="status-video-container">
+                               <video class="status-video" controls preload="none">
+                                       <source src="{{.URL}}">
+                                       <p> Your browser doesn't support HTML5 video </p>
+                               </video>
+                               {{if $.Sensitive}}
+                               <div class="status-nsfw-overlay"></div>
+                               {{end}}
+                       </div>
                        {{else}}
                        <a href="{{.URL}}" target="_blank"> attachment </a>
                        {{end}}