fediport/pixelfed
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update Hashtag.vue, add nsfw toggle. Fixes #2225

Browse source
This commit is contained in:
Daniel Supernault 2020-08-05 01:50:34 -06:00
parent 6375bf4a28
commit e5aa506c5a
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Transformer/Api/StatusHashtagTransformer.php
View file

@ -18,7 +18,7 @@ class StatusHashtagTransformer extends Fractal\TransformerAbstract
'id' => (int) $status->id, 'id' => (int) $status->id,
'type' => $status->type, 'type' => $status->type,
'url' => $status->url(), 'url' => $status->url(),
'thumb' => $status->thumb(), 'thumb' => $status->thumb(true),
'filter' => $status->firstMedia()->filter_class, 'filter' => $status->firstMedia()->filter_class,
'sensitive' => (bool) $status->is_nsfw, 'sensitive' => (bool) $status->is_nsfw,
'like_count' => $status->likes_count, 'like_count' => $status->likes_count,

31
resources/assets/js/components/Hashtag.vue
View file

@ -4,7 +4,7 @@
<div class="profile-header row my-5"> <div class="profile-header row my-5">
<div class="col-12 col-md-3"> <div class="col-12 col-md-3">
<div class="profile-avatar"> <div class="profile-avatar">
<div class="bg-pixelfed mb-3 d-flex align-items-center justify-content-center display-4 font-weight-bold text-white" style="width: 172px; height: 172px; border-radius: 100%">#</div> <div class="bg-primary mb-3 d-flex align-items-center justify-content-center display-4 font-weight-bold text-white" style="width: 172px; height: 172px; border-radius: 100%">#</div>
</div> </div>
</div> </div>
<div class="col-12 col-md-9 d-flex align-items-center"> <div class="col-12 col-md-9 d-flex align-items-center">
@ -12,14 +12,20 @@
<div class="username-bar pb-2"> <div class="username-bar pb-2">
<p class="tag-header mb-0">#{{hashtag}}</p> <p class="tag-header mb-0">#{{hashtag}}</p>
<p class="lead"><span class="font-weight-bold">{{tags.length ? hashtagCount : '0'}}</span> posts</p> <p class="lead"><span class="font-weight-bold">{{tags.length ? hashtagCount : '0'}}</span> posts</p>
<p v-if="authenticated && tags.length" class="pt-3"> <div class="d-flex justify-content-between align-items-center">
<button v-if="!following" type="button" class="btn btn-primary font-weight-bold py-1 px-5" @click="followHashtag"> <p v-if="authenticated && tags.length" class="pt-3 mr-4">
Follow <button v-if="!following" type="button" class="btn btn-primary font-weight-bold py-1 px-5" @click="followHashtag">
</button> Follow
<button v-else type="button" class="btn btn-outline-secondary font-weight-bold py-1 px-5" @click="unfollowHashtag"> </button>
Unfollow <button v-else type="button" class="btn btn-outline-secondary font-weight-bold py-1 px-5" @click="unfollowHashtag">
</button> Unfollow
</p> </button>
</p>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="nsfwSwitch" v-model="forceNsfw">
<label class="custom-control-label font-weight-bold text-muted" for="nsfwSwitch">Show NSFW Content</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -30,7 +36,8 @@
<div v-for="(tag, index) in top" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square"> <div v-for="(tag, index) in top" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
<a class="card info-overlay card-md-border-0" :href="tag.status.url"> <a class="card info-overlay card-md-border-0" :href="tag.status.url">
<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']"> <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
<div class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div> <div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
<div class="info-overlay-text"> <div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold"> <h5 class="text-white m-auto font-weight-bold">
<span class="pr-4"> <span class="pr-4">
@ -50,7 +57,8 @@
<div v-for="(tag, index) in tags" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square"> <div v-for="(tag, index) in tags" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
<a class="card info-overlay card-md-border-0" :href="tag.status.url"> <a class="card info-overlay card-md-border-0" :href="tag.status.url">
<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']"> <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
<div class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div> <div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
<div class="info-overlay-text"> <div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold"> <h5 class="text-white m-auto font-weight-bold">
<span class="pr-4"> <span class="pr-4">
@ -105,6 +113,7 @@
following: false, following: false,
tags: [], tags: [],
top: [], top: [],
forceNsfw: false,
} }
}, },
beforeMount() { beforeMount() {