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

Frontend ui refactor

config/pixelfed.php

@@ -23,7 +23,7 @@ return [
     | This value is the version of your PixelFed instance.
     |
     */
-    'version' => '0.1.3',
+    'version' => '0.1.4',
 
     /*
     |--------------------------------------------------------------------------

resources/views/discover/tags/show.blade.php

@@ -7,7 +7,7 @@
   <div class="profile-header row my-5">
     <div class="col-12 col-md-3">
       <div class="profile-avatar">
-        <img class="img-thumbnail" src="https://placehold.it/300x300" style="border-radius:100%;" width="172px">
+        <img class="rounded-circle card" src="{{$posts->last()->thumb()}}" width="172px" height="172px">
       </div>
     </div>
     <div class="col-12 col-md-9 d-flex align-items-center">
@@ -16,13 +16,13 @@
           <span class="h1">{{$tag->name}}</span>
         </div>
         <p class="font-weight-bold">
-          {{$count}} posts
+          {{$tag->posts_count}} posts
         </p>
       </div>
     </div>
   </div>
 
-  <div class="profile-timeline mt-5 row">
+  <div class="tag-timeline row">
     @foreach($posts as $status)
     <div class="col-12 col-md-4 mb-4">
       <a class="card" href="{{$status->url()}}">
@@ -31,7 +31,9 @@
     </div>
     @endforeach
   </div>
-
+  <div class="d-flex justify-content-center pagination-container mt-4">
+    {{$posts->links()}}
+  </div>
 </div>
 
 @endsection
@@ -39,3 +41,21 @@
 @push('meta')
 <meta property="og:description" content="Discover {{$tag->name}}">
 @endpush
+
+@push('scripts')
+<script type="text/javascript">
+
+  $(document).ready(function() {
+    $('.pagination-container').hide();
+    $('.pagination').hide();
+    let elem = document.querySelector('.tag-timeline');
+    let infScroll = new InfiniteScroll( elem, {
+      path: '.pagination__next',
+      append: '.tag-timeline',
+      status: '.page-load-status',
+      history: true,
+    });
+  });
+
+</script>
+@endpush