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

Frontend ui refactor

app/Http/Controllers/DiscoverController.php

@@ -19,8 +19,12 @@ class DiscoverController extends Controller
         $this->middleware('auth');
     }
 
-    public function home()
+    public function home(Request $request)
     {
+        $this->validate($request, [
+          'page' => 'nullable|integer|max:50'
+        ]);
+
         $pid = Auth::user()->profile->id;
 
         $following = Cache::remember('feature:discover:following:'.$pid, 15, function() use($pid) {
@@ -52,9 +56,11 @@ class DiscoverController extends Controller
           ->whereHas('profile', function($q) {
             $q->where('is_private', false);
           })
+          ->whereIsNsfw(false)
           ->whereVisibility('public')
           ->where('profile_id', '!=', $pid)
           ->whereNotIn('profile_id', $following)
+          ->withCount(['comments', 'likes'])
           ->orderBy('created_at', 'desc')
           ->simplePaginate(21);
 

resources/views/discover/home.blade.php

@@ -36,7 +36,8 @@
   </section>
   <section class="pt-5 mt-5">
     <p class="lead text-muted font-weight-bold">Explore</p>
-    <div class="profile-timeline row">
+    <div class="profile-timeline">
+      <div class="row">
         @foreach($posts as $status)
         <div class="col-4 p-0 p-sm-2 p-md-3">
           <a class="card info-overlay card-md-border-0" href="{{$status->url()}}">
@@ -56,6 +57,7 @@
           </a>
         </div>
         @endforeach
+      </div>
 
       @if($posts->count() == 0)
       <div class="col-12 text-center text-muted">
@@ -63,12 +65,46 @@
       </div>
       @endif
 
+      <div class="page-load-status" style="display: none;">
+        <div class="infinite-scroll-request" style="display: none;">
+          <div class="fixed-top loading-page"></div>
+        </div>
+        <div class="infinite-scroll-error" style="display: none;">
+          <h3>Whoops, an error</h3>
+          <p class="text-muted">
+            Try reloading the page
+          </p>
+        </div>
+      </div>
     </div>
   </section>
+    <div class="pagination-container">
+    <div class="d-flex justify-content-center">
+      {{$posts->links()}}
+    </div>
+  </div>
 </div>
 
 @endsection
 
 @push('meta')
-<meta property="og:description" content="Discover People!">
+<meta property="og:description" content="Discover">
+@endpush
+
+@push('scripts')
+<script type="text/javascript">
+$(document).ready(function() {
+  $('.pagination-container').hide();
+  $('.pagination').hide();
+  let elem = document.querySelector('.profile-timeline');
+  let infScroll = new InfiniteScroll( elem, {
+    path: '.pagination__next',
+    append: '.profile-timeline',
+    status: '.page-load-status',
+    checkLastPage: '.pagination__next',
+    history: false,
+  });
+});
+</script>
+
 @endpush