Merge pull request #3675 from pixelfed/staging

Staging

CHANGELOG.md

@@ -89,6 +89,8 @@
 - Update ApiV1Controller, add collection_ids parameter to /api/v1/statuses endpoint ([7ae21fc3](https://github.com/pixelfed/pixelfed/commit/7ae21fc3))
 - Update ApiV1Controller, add comments_disabled param to /api/v1/statuses endpoint ([95b58610](https://github.com/pixelfed/pixelfed/commit/95b58610))
 - Update ap helpers to handle disabled comments ([92f56c9b](https://github.com/pixelfed/pixelfed/commit/92f56c9b))
+- Update CollectionController, limit max title and description length ([6e76cf4b](https://github.com/pixelfed/pixelfed/commit/6e76cf4b))
+- Update collection components, fix title/description padding/overflow bug and add title/description limit and input counter ([6e4272a8](https://github.com/pixelfed/pixelfed/commit/6e4272a8))
 -  ([](https://github.com/pixelfed/pixelfed/commit/))
 
 ## [v0.11.3 (2022-05-09)](https://github.com/pixelfed/pixelfed/compare/v0.11.2...v0.11.3)

app/Http/Controllers/Api/ApiV1Controller.php

@@ -2648,6 +2648,9 @@ class ApiV1Controller extends Controller
 			        	$status->id,
 			        	$count
 			        );
+                    $collection->updated_at = now();
+                    $collection->save();
+                    CollectionService::setCollection($collection->id, $collection);
 				});
 		}
 

app/Http/Controllers/CollectionController.php

@@ -65,8 +65,8 @@ class CollectionController extends Controller
     {
         abort_if(!Auth::check(), 403);
         $this->validate($request, [
-            'title'         => 'nullable',
-            'description'   => 'nullable',
+            'title'         => 'nullable|max:50',
+            'description'   => 'nullable|max:500',
             'visibility'    => 'nullable|string|in:public,private,draft'
         ]);
 
@@ -84,8 +84,8 @@ class CollectionController extends Controller
     {
         abort_if(!Auth::check(), 403);
         $this->validate($request, [
-            'title'         => 'nullable',
-            'description'   => 'nullable',
+            'title'         => 'nullable|max:50',
+            'description'   => 'nullable|max:500',
             'visibility'    => 'required|alpha|in:public,private,draft'
         ]);
         $profile = Auth::user()->profile;   
@@ -168,6 +168,10 @@ class CollectionController extends Controller
         	$count
         );
 
+        $collection->updated_at = now();
+        $collection->save();
+        CollectionService::setCollection($collection->id, $collection);
+
         return StatusService::get($status->id);
     }
 
@@ -175,6 +179,11 @@ class CollectionController extends Controller
     {
 		$user = $request->user();
 		$collection = CollectionService::getCollection($id);
+
+        if(!$collection) {
+            return response()->json([], 404);
+        }
+
 		if($collection['published_at'] == null || $collection['visibility'] != 'public') {
 			abort_unless($user, 404);
 			if($user->profile_id != $collection['pid']) {
@@ -192,6 +201,11 @@ class CollectionController extends Controller
     {
     	$user = $request->user();
     	$collection = CollectionService::getCollection($id);
+
+        if(!$collection) {
+            return response()->json([], 404);
+        }
+
         if($collection['published_at'] == null || $collection['visibility'] != 'public') {
 			abort_unless($user, 404);
 			if($user->profile_id != $collection['pid']) {
@@ -295,6 +309,10 @@ class CollectionController extends Controller
 
         $item->delete();
 
+        $collection->updated_at = now();
+        $collection->save();
+        CollectionService::setCollection($collection->id, $collection);
+
         return 200;
     }
 }

app/Services/CollectionService.php

@@ -79,17 +79,23 @@ class CollectionService
 			return [
 				'id' => (string) $collection->id,
 				'pid' => (string) $collection->profile_id,
-				'username' => $account['username'],
 				'visibility' => $collection->visibility,
 				'title' => $collection->title,
 				'description' => $collection->description,
-				'thumb' => '/storage/no-preview.png',
+				'thumb' => url('/storage/no-preview.png'),
 				'url' => $collection->url(),
-				'published_at' => $collection->published_at
+				'updated_at' => $collection->updated_at,
+				'published_at' => $collection->published_at,
 			];
 		});
 
 		if($collection) {
+			$account = AccountService::get($collection['pid']);
+			if(!$account) {
+				return false;
+			}
+			$collection['avatar'] = $account['avatar'];
+			$collection['username'] = $account['username'];
 			$collection['thumb'] = self::getThumb($id);
 			$collection['post_count'] = self::count($id);
 		}
@@ -106,13 +112,13 @@ class CollectionService
 		$res = [
 			'id' => (string) $collection->id,
 			'pid' => (string) $collection->profile_id,
-			'username' => $account['username'],
 			'visibility' => $collection->visibility,
 			'title' => $collection->title,
 			'description' => $collection->description,
 			'thumb' => self::getThumb($id),
 			'url' => $collection->url(),
-			'published_at' => $collection->published_at
+			'updated_at' => $collection->updated_at,
+			'published_at' => $collection->published_at,
 		];
 		Cache::put(self::CACHE_KEY . 'get:' . $id, $res, 86400);
 		$res['post_count'] = self::count($id);
@@ -129,15 +135,15 @@ class CollectionService
 	{
 		$item = self::getItems($id, 0, 1);
 		if(!$item || empty($item)) {
-			return '/storage/no-preview.png';
+			return url('/storage/no-preview.png');
 		}
 		$status = StatusService::get($item[0]);
 		if(!$status) {
-			return '/storage/no-preview.png';
+			return url('/storage/no-preview.png');
 		}
 
 		if(!isset($status['media_attachments']) || empty($status['media_attachments'])) {
-			return '/storage/no-preview.png';
+			return url('/storage/no-preview.png');
 		}
 
 		return $status['media_attachments'][0]['url'];

resources/assets/js/components/CollectionComponent.vue

@@ -25,11 +25,11 @@
 
 		<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 style="z-index:500;position: absolute;" class="text-white">
-					<p class="display-4 text-center pt-3">{{title || 'Untitled Collection'}}</p>
-					<p class="lead text-center mb-3">{{description}}</p>
+				<div style="z-index:500;position: absolute;" class="text-white mx-5">
+					<p class="text-center pt-3 text-break" style="font-size: 3rem;line-height: 3rem;">{{title || 'Untitled Collection'}}</p>
+					<div class="text-center mb-3 text-break read-more" style="overflow-y: hidden">{{description}}</div>
 					<p class="text-center">
 
 						<span v-if="owner && collection.visibility != 'public'">
@@ -77,7 +77,7 @@
 					 style="width:100%; height: 400px; object-fit: cover;"
 				>
 				<div v-else class="bg-info" style="width:100%; height: 400px;"></div>
-			</picture>
+			</div>
 		</div>
 		<div class="col-12 p-0">
 			<!-- <masonry
@@ -166,11 +166,17 @@
 		<form>
 			<div class="form-group">
 				<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 class="form-group">
 				<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 class="form-group">
 				<label for="visibility" class="font-weight-bold text-muted">Visibility</label>
@@ -350,6 +356,10 @@ export default {
 		this.fetchCollection();
 	},
 
+    updated() {
+        this.initReadMore();
+    },
+
 	methods: {
 		enterIntersect() {
 			if(this.isIntersecting) {
@@ -636,7 +646,23 @@ export default {
 			}
 
 			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>

resources/assets/js/components/CollectionCompose.vue

@@ -13,12 +13,18 @@
 						<form>
 							<div class="form-group">
 								<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 class="form-group">
 								<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>
+                                <div class="text-right small text-muted">
+                                    <span>{{collection.description ? collection.description.length : 0}}/500</span>
+                                </div>
 							</div>
 							<div class="form-group">
 								<label for="visibility" class="font-weight-bold text-muted">Visibility</label>