chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update collection components, fix title/description padding/overflow bug and add title/description limit and input counter

Browse source
This commit is contained in:
Daniel Supernault 2022-10-01 03:48:38 -06:00
parent 6e76cf4b68
commit 6e4272a8ff
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
resources/assets/js/components/CollectionComponent.vue
View file

@ -25,11 +25,11 @@
<div class="col-12 p-0 mb-3"> <div class="col-12 p-0 mb-3">
<picture class="d-flex align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center overflow-hidden">
<div class="dims"></div> <div class="dims"></div>
<div style="z-index:500;position: absolute;" class="text-white"> <div style="z-index:500;position: absolute;" class="text-white mx-5">
<p class="display-4 text-center pt-3">{{title || 'Untitled Collection'}}</p> <p class="text-center pt-3 text-break" style="font-size: 3rem;line-height: 3rem;">{{title || 'Untitled Collection'}}</p>
<p class="lead text-center mb-3">{{description}}</p> <div class="text-center mb-3 text-break read-more" style="overflow-y: hidden">{{description}}</div>
<p class="text-center"> <p class="text-center">
<span v-if="owner && collection.visibility != 'public'"> <span v-if="owner && collection.visibility != 'public'">
@ -77,7 +77,7 @@
style="width:100%; height: 400px; object-fit: cover;" style="width:100%; height: 400px; object-fit: cover;"
> >
<div v-else class="bg-info" style="width:100%; height: 400px;"></div> <div v-else class="bg-info" style="width:100%; height: 400px;"></div>
</picture> </div>
</div> </div>
<div class="col-12 p-0"> <div class="col-12 p-0">
<!-- <masonry <!-- <masonry
@ -166,11 +166,17 @@
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="title" class="font-weight-bold text-muted">Title</label> <label for="title" class="font-weight-bold text-muted">Title</label>
<input type="text" class="form-control" id="title" placeholder="Untitled Collection" v-model="title"> <input type="text" class="form-control" id="title" placeholder="Untitled Collection" v-model="title" maxlength="50">
<div class="text-right small text-muted">
<span>{{title ? title.length : 0}}/50</span>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="description" class="font-weight-bold text-muted">Description</label> <label for="description" class="font-weight-bold text-muted">Description</label>
<textarea class="form-control" id="description" placeholder="Add a description here ..." v-model="description" rows="3"></textarea> <textarea class="form-control" id="description" placeholder="Add a description here ..." v-model="description" rows="3" maxlength="500"></textarea>
<div class="text-right small text-muted">
<span>{{description ? description.length : 0}}/500</span>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="visibility" class="font-weight-bold text-muted">Visibility</label> <label for="visibility" class="font-weight-bold text-muted">Visibility</label>
@ -350,6 +356,10 @@ export default {
this.fetchCollection(); this.fetchCollection();
}, },
updated() {
this.initReadMore();
},
methods: { methods: {
enterIntersect() { enterIntersect() {
if(this.isIntersecting) { if(this.isIntersecting) {
@ -636,7 +646,23 @@ export default {
} }
return media.preview_url; return media.preview_url;
} },
initReadMore() {
$('.read-more').each(function(k,v) {
let el = $(this);
let attr = el.attr('data-readmore');
if(typeof attr !== typeof undefined && attr !== false) {
return;
}
el.readmore({
collapsedHeight: 38,
heightMargin: 38,
moreLink: '<a href="#" class="d-block text-center small font-weight-bold mt-n3 mb-2" style="color: rgba(255, 255, 255, 0.5)">Show more</a>',
lessLink: '<a href="#" class="d-block text-center small font-weight-bold mt-n3 mb-2" style="color: rgba(255, 255, 255, 0.5)">Show less</a>',
});
});
}
} }
} }
</script> </script>

10
resources/assets/js/components/CollectionCompose.vue
View file

@ -13,12 +13,18 @@
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="title" class="font-weight-bold text-muted">Title</label> <label for="title" class="font-weight-bold text-muted">Title</label>
<input type="text" class="form-control" id="title" placeholder="Collection Title" v-model="collection.title"> <input type="text" class="form-control" id="title" placeholder="Collection Title" v-model="collection.title" maxlength="50">
<div class="text-right small text-muted">
<span>{{collection.title ? collection.title.length : 0}}/50</span>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="description" class="font-weight-bold text-muted">Description</label> <label for="description" class="font-weight-bold text-muted">Description</label>
<textarea class="form-control" id="description" placeholder="Example description here" v-model="collection.description" rows="3"> <textarea class="form-control" id="description" placeholder="Example description here" v-model="collection.description" rows="3" maxlength="500">
</textarea> </textarea>
<div class="text-right small text-muted">
<span>{{collection.description ? collection.description.length : 0}}/500</span>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="visibility" class="font-weight-bold text-muted">Visibility</label> <label for="visibility" class="font-weight-bold text-muted">Visibility</label>