Merge pull request #944 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/PublicApiController.php

@@ -209,8 +209,8 @@ class PublicApiController extends Controller
 
         $this->validate($request,[
           'page'        => 'nullable|integer|max:40',
-          'min_id'      => 'nullable|integer',
+          'min_id'      => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
-          'max_id'      => 'nullable|integer',
+          'max_id'      => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
           'limit'       => 'nullable|integer|max:20'
         ]);
 
@@ -252,10 +252,10 @@ class PublicApiController extends Controller
                         'local',
                         'created_at',
                         'updated_at'
-                      )->whereIn('type', ['photo', 'photo:album', 'video', 'video:album'])
+                      )->where('id', $dir, $id)
+                      ->whereIn('type', ['photo', 'photo:album', 'video', 'video:album'])
                       ->whereLocal(true)
                       ->whereNull('uri')
-                      ->where('id', $dir, $id)
                       ->whereNotIn('profile_id', $filtered)
                       ->whereNull('in_reply_to_id')
                       ->whereNull('reblog_of_id')
@@ -303,8 +303,8 @@ class PublicApiController extends Controller
 
         $this->validate($request,[
           'page'        => 'nullable|integer|max:40',
-          'min_id'      => 'nullable|integer',
+          'min_id'      => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
-          'max_id'      => 'nullable|integer',
+          'max_id'      => 'nullable|integer|min:0|max:' . PHP_INT_MAX,
           'limit'       => 'nullable|integer|max:20'
         ]);
 

resources/assets/js/components/DiscoverComponent.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="container">
 
-  <section class="mb-5 pb-3 px-2 d-flex" style="overflow-x: hidden;" v-if="categories.length > 0">
+  <section class="mb-5 pb-3 px-2 d-xs-none d-md-block" style="overflow-x: hidden;" v-if="categories.length > 0">
     <a class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow" style="width:160px;height:100px;" href="/discover/personal">
       <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;border-bottom: 2px solid #fff;">For You</p>
     </a>

resources/assets/js/components/PostComponent.vue

@@ -277,10 +277,6 @@ export default {
         }
       }
 
-      if(this.status) {
-        let title = this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes';
-        $('head title').text(title);
-      }
     },
 
     methods: {
@@ -338,6 +334,7 @@ export default {
                 $('.postComponent').removeClass('d-none');
                 $('.postPresenterLoader').addClass('d-none');
                 $('.postPresenterContainer').removeClass('d-none');
+                $('head title').text(this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes');
             }).catch(error => {
               if(!error.response) {
                 $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occurred, cannot fetch media. Please try again later.');

resources/assets/js/components/Timeline.vue

@@ -437,17 +437,20 @@
 			},
 
 			fetchTimelineApi() {
-				let homeTimeline = '/api/v1/timelines/home?page=1';
+				let homeTimeline = '/api/v1/timelines/home';
-				let localTimeline = '/api/v1/timelines/public?page=1';
+				let localTimeline = '/api/v1/timelines/public';
 				let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
-				axios.get(apiUrl).then(res => {
+				axios.get(apiUrl, {
+					params: {
+						max_id: 0,
+						limit: 4
+					}
+				}).then(res => {
 					let data = res.data;
 					this.feed.push(...data);
 					let ids = data.map(status => status.id);
-					this.min_id = Math.min(...ids);
+					this.min_id = Math.max(...ids);
-					if(this.page == 1) {
+					this.max_id = Math.min(...ids);
-						this.max_id = Math.max(...ids);
-					}
 					$('.timeline .pagination').removeClass('d-none');
 					this.loading = false;
 					this.fetchNotifications();
@@ -461,17 +464,16 @@
 				let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
 				axios.get(apiUrl, {
 					params: {
-						page: this.page,
+						max_id: this.max_id,
+						limit: 4
 					},
 				}).then(res => {
 					if (res.data.length && this.loading == false) {
 						let data = res.data;
 						this.feed.push(...data);
 						let ids = data.map(status => status.id);
-						this.min_id = Math.min(...ids);
+						this.min_id = Math.max(...ids);
-						if(this.page == 1) {
+						this.max_id = Math.min(...ids);
-							this.max_id = Math.max(...ids);
-						}
 						this.page += 1;
 						$state.loaded();
 						this.loading = false;