Update components

This commit is contained in:
Daniel Supernault 2021-01-28 20:08:06 -07:00
parent 4abfe76a49
commit f38d2a09a4
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 63 additions and 15 deletions

View file

@ -1,14 +1,26 @@
<template>
<div v-if="status.sensitive == true">
<details class="details-animated">
<summary>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p>
</summary>
<div class="max-hide-overflow" :title="status.media_attachments[0].description">
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="altText(status)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</div>
</details>
<div class="text-light content-label">
<p class="text-center">
<i class="far fa-eye-slash fa-2x"></i>
</p>
<p class="h4 font-weight-bold text-center">
Sensitive Content
</p>
<p class="text-center py-2">
This photo contains sensitive content which <br/>
some people may find offsensive or disturbing.
</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>
</p>
</div>
<blur-hash-image
width="32"
height="32"
punch="1"
:hash="status.media_attachments[0].blurhash"
:alt="altText(status)"/>
</div>
<div v-else>
<div :title="status.media_attachments[0].description">
@ -22,6 +34,14 @@
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.content-label {
margin: 0;
position: absolute;
top:45%;
left:50%;
z-index: 999;
transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript">