Update components, improve content warnings

resources/assets/js/components/PostComponent.vue

@@ -53,7 +53,7 @@
                   </div>
                 </div>
                 <div v-else-if="status.pf_type === 'photo'" class="w-100">
-                  <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
+                  <photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
                 </div>
 
                 <div v-else-if="status.pf_type === 'video'" class="w-100">
@@ -113,12 +113,12 @@
               <div class="card-body status-comments pt-0">
                 <div v-if="status.pf_type != 'text'" class="status-comment">
                   <div v-if="status.content.length" class="pt-3">
-                    <div v-if="showCaption != true">
+                    <div v-if="status.sensitive">
                       <span class="py-3">
                         <a class="text-dark font-weight-bold mr-1" :href="status.account.url" v-bind:title="status.account.username">{{truncate(status.account.username,15)}}</a>
                         <span class="text-break">
                           <span class="font-italic text-muted">This comment may contain sensitive material</span>
-                          <span class="text-primary cursor-pointer pl-1" @click="showCaption = true">Show</span>
+                          <span class="text-primary cursor-pointer pl-1" @click="status.sensitive = false">Show</span>
                         </span>
                       </span>
                     </div>

resources/assets/js/components/Timeline.vue

@@ -167,7 +167,7 @@
 							</div>
 
 							<div v-else-if="status.pf_type === 'photo'" class="w-100">
-								<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
+								<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
 							</div>
 
 							<div v-else-if="status.pf_type === 'video'" class="w-100">
@@ -227,7 +227,7 @@
 								<span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
 							</div>
 							<div v-if="status.pf_type != 'text'" class="caption">
-								<p class="mb-2 read-more" style="overflow: hidden;">
+								<p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
 									<span class="username font-weight-bold">
 										<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
 									</span>

resources/assets/js/components/presenter/PhotoPresenter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="status.sensitive == true">
+	<div v-if="status.sensitive == true" class="content-label-wrapper">
 		<div class="text-light content-label">
 			<p class="text-center">
 				<i class="far fa-eye-slash fa-2x"></i>
@@ -8,17 +8,16 @@
 				Sensitive Content
 			</p>
 			<p class="text-center py-2">
-				This photo contains sensitive content which <br/>
-				some people may find offsensive or disturbing.
+				{{ status.spoiler_text ? status.spoiler_text : 'This post may contain sensitive content.'}}
 			</p>
 			<p class="mb-0">
-				<button @click="status.sensitive = false" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Photo</button>
+				<button @click="toggleContentWarning()" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</button>
 			</p>
 		</div>
 		<blur-hash-image
 			width="32"
 			height="32"
-			punch="1"
+			:punch="1"
 			:hash="status.media_attachments[0].blurhash"
 			:alt="altText(status)"/>
 	</div>
@@ -37,10 +36,18 @@
   .content-label {
   	margin: 0;
   	position: absolute;
-  	top:45%;
+  	top:50%;
   	left:50%;
-  	z-index: 999;
+  	z-index: 2;
   	transform: translate(-50%, -50%);
+  	display: flex;
+  	flex-direction: column;
+  	align-items: center;
+  	justify-content: center;
+  	width: 100%;
+  	height: 100%;
+  	z-index: 2;
+  	background: rgba(0, 0, 0, 0.2)
   }
 </style>
 
@@ -56,6 +63,10 @@
 				}
 
 				return 'Photo was not tagged with any alt text.';
+			},
+
+			toggleContentWarning(status) {
+				this.$emit('togglecw');
 			}
 		}
 	}