Merge pull request #202 from dansup/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/FederationController.php

@@ -94,7 +94,7 @@ class FederationController extends Controller
           'outbound' => []
         ],
         'software' => [
-          'name' => 'PixelFed',
+          'name' => 'pixelfed',
           'version' => config('pixelfed.version')
         ],
         'usage' => [

resources/assets/sass/custom.scss

@@ -71,9 +71,12 @@ body, button, input, textarea {
   margin: auto !important;
 }
 
-.card.status-container .status-comments {
-  overflow-y: scroll;
-  border-bottom:1px solid rgba(0, 0, 0, 0.1);
+@media (min-width: map-get($grid-breakpoints, "md")) {
+  .card.status-container .status-comments {
+    overflow-y:scroll;
+    border-bottom:1px solid rgba(0,0,0,.1);
+    height: 200px;
+  }
 }
 
 .no-caret.dropdown-toggle {
@@ -163,6 +166,12 @@ body, button, input, textarea {
     background-position: 50%;
 }
 
+@media (max-width: map-get($grid-breakpoints, "md")) {
+ .border-md-left-0 {
+  border-left:0!important
+ }
+}
+
 .fas, .far {
   font-size: 25px !important;
 }
@@ -177,4 +186,19 @@ body, button, input, textarea {
 }
 
 .fas.fa-heart {
-}
+}
+
+@media (max-width: map-get($grid-breakpoints, "md")) {
+  .border-md-left-0 {
+    border-left:0!important
+  }
+  .card.status-container .status-comments {
+    border-top:1px solid rgba(0,0,0,.1);
+  }
+  .sticky-md-bottom {
+    position:-webkit-sticky;
+    position:sticky;
+    bottom:0;
+    z-index:1020
+  }
+}

resources/lang/fi/auth.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'Nämä kirjautumistiedot eivät vastaa tallennettuja',
+    'throttle' => 'Liian monta kirjautumisyritystä. Yrityä uudelleen :seconds sekuntin kuluttua.',
+
+];

resources/lang/fi/notification.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+
+  'likedPhoto' => 'tykkäsi kuvastasi.',
+  'startedFollowingYou' => 'alkoi seuraamaan sinua.',
+
+];

resources/lang/fi/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Edellinen',
+    'next' => 'Seuraava &raquo;',
+
+];

resources/lang/fi/passwords.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'password' => 'Salasanan täytyy olla vähintään kuusi merkkiä ja vastata vahvistusta.',
+    'reset' => 'Salasanasi on nollattu!',
+    'sent' => 'Olemme lähettäneet salasanan nollauslinkin sähköpostitse!',
+    'token' => 'Tämä salasanan nollauslinkki ei ole toimiva.',
+    'user' => "Emme löydä käyttäjää tuolla sähköpostiosoitteella.",
+
+];

resources/lang/fi/profile.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+  'emptyTimeline' => 'Tällä käyttäjällä ei ole vielä päivityksiä!',
+  'emptyFollowers' => 'Tällä käyttäjällä ei ole vielä seuraajia!',
+  'emptyFollowing' => 'Tämä käyttäjä ei vielä seuraa ketään!',
+  'savedWarning'  => 'Only you can see what you\'ve saved',
+  'savedWarning'  => 'Vain sinä voit nähdä, mitä olet tallentanut',
+];

resources/lang/fi/timeline.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+
+  'emptyPersonalTimeline' => 'Aikajanasi on tyhjä.'
+
+];

resources/lang/fr/notification.php

@@ -1,4 +1,5 @@
 <?php
 return [
   'likedPhoto' => 'a aimé votre photo.',
+  'startedFollowingYou' => 'a commencé à vous suivre.',
 ];

resources/lang/fr/profile.php

@@ -1,4 +1,7 @@
 <?php
 return [
   'emptyTimeline' => 'Cet utilisateur n\'a pas encore de messages !',
+  'emptyFollowers' => 'Cet utilisateur n`\'a pas encore d\'abonné-e-s!',
+  'emptyFollowing' => 'Cet utilisateur ne suit pas encore quelqu\'un!',
+  'savedWarning'  => 'Vous seul pouvez voir ce que vous avez enregistré',
 ];

resources/lang/fr/timeline.php

@@ -0,0 +1,4 @@
+<?php
+return [
+  'emptyPersonalTimeline' => 'Votre chronologie est vide.'
+];

resources/lang/sv/auth.php

@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'failed' => 'Dessa autentiseringsuppgifter matchar inte de i vårt register.',
+    'failed' => 'Dessa autentiseringsuppgifter matchar inte vårt register.',
     'throttle' => 'För många inloggningsförsök. Var god försök igen om :seconds sekunder.',
 
 ];

resources/lang/sv/validation.php

@@ -17,9 +17,9 @@ return [
     'active_url'           => ':attribute är inte en giltig URL.',
     'after'                => ':attribute måste vara ett datum efter :date.',
     'after_or_equal'       => ':attribute måste vara ett datum efter eller samma som :date.',
-    'alpha'                => ':attribute får endast intehålla bokstäver.',
-    'alpha_dash'           => ':attribute får endast intehålla bokstäver, nummer, och bindestreck.',
-    'alpha_num'            => ':attribute får endast intehålla bokstäver och nummer.',
+    'alpha'                => ':attribute får endast innehålla bokstäver.',
+    'alpha_dash'           => ':attribute får endast innehålla bokstäver, nummer, och bindestreck.',
+    'alpha_num'            => ':attribute får endast innehålla bokstäver och nummer.',
     'array'                => ':attribute måste vara en array.',
     'before'               => ':attribute måste vara ett datum före :date.',
     'before_or_equal'      => ':attribute måste vara ett datum före eller samma som :date.',
@@ -51,10 +51,10 @@ return [
     'ipv6'                 => ':attribute måste vara en giltig IPv6 adress.',
     'json'                 => ':attribute måste vara en giltig JSON string.',
     'max'                  => [
-        'numeric' => ':attribute får inte vara större than :max.',
-        'file'    => ':attribute får inte vara större than :max kilobyte.',
-        'string'  => ':attribute får inte vara större than :max tecken.',
-        'array'   => ':attribute får inte ha mer än :max objekt.',
+        'numeric' => ':attribute får inte vara större än :max.',
+        'file'    => ':attribute får inte vara större än :max kilobyte.',
+        'string'  => ':attribute får inte vara större än :max tecken.',
+        'array'   => ':attribute får inte ha fler än :max objekt.',
     ],
     'mimes'                => ':attribute måste vara en fil av typ: :values.',
     'mimetypes'            => ':attribute måste vara en fil av typ: :values.',
@@ -62,7 +62,7 @@ return [
         'numeric' => ':attribute måste vara åtminstone :min.',
         'file'    => ':attribute måste vara åtminstone :min kilobyte.',
         'string'  => ':attribute måste vara åtminstone :min tecken.',
-        'array'   => ':attribute måste have åtminstone :min objekt.',
+        'array'   => ':attribute måste innehålla åtminstone :min objekt.',
     ],
     'not_in'               => 'vald :attribute är ogiltig.',
     'not_regex'            => ':attribute formatet är ogiltigt.',
@@ -74,7 +74,7 @@ return [
     'required_unless'      => ':attribute fält krävs om inte :other är i :values.',
     'required_with'        => ':attribute fält krävs när :values finns.',
     'required_with_all'    => ':attribute fält krävs när :values finns.',
-    'required_without'     => ':attribute fält krvävs när :values inte finns.',
+    'required_without'     => ':attribute fält krävs när :values inte finns.',
     'required_without_all' => ':attribute fält krävs när inga av :values finns.',
     'same'                 => ':attribute och :other måste matcha.',
     'size'                 => [

resources/views/profile/followers.blade.php

@@ -2,46 +2,9 @@
 
 @section('content')
 
-<div class="container following-page" style="min-height: 60vh;">
-
-  <div class="profile-header row my-5">
-    <div class="col-12 col-md-4 d-flex">
-      <div class="profile-avatar mx-auto">
-        <img class="img-thumbnail" src="{{$profile->avatarUrl()}}" style="border-radius:100%;" width="172px">
-      </div>
-    </div>
-    <div class="col-12 col-md-8 d-flex align-items-center">
-      <div class="profile-details">
-        <div class="username-bar pb-2 d-flex align-items-center">
-          <span class="font-weight-ultralight h1">{{$profile->username}}</span>
-        </div>
-        <div class="profile-stats pb-3 d-inline-flex lead">
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url()}}">
-              <span class="font-weight-bold">{{$profile->statuses()->whereNull('in_reply_to_id')->count()}}</span> 
-              Posts
-            </a>
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url('/followers')}}">
-              <span class="font-weight-bold">{{$profile->followerCount(true)}}</span> 
-              Followers
-            </a>
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url('/following')}}">
-              <span class="font-weight-bold">{{$profile->followingCount(true)}}</span> 
-              Following
-            </a>
-          </div>
-        </div>
-        <p class="lead font-weight-bold">
-          {{$profile->name}}
-        </p>
-      </div>
-    </div>
-  </div>
+@include('profile.partial.user-info')
 
+<div class="container following-page" style="min-height: 60vh;">
   <div class="col-12 col-md-8 offset-md-2">
     @if($followers->count() !== 0)
     <ul class="list-group mt-4">

resources/views/profile/following.blade.php

@@ -2,46 +2,9 @@
 
 @section('content')
 
-<div class="container following-page" style="min-height: 60vh;">
-
-  <div class="profile-header row my-5">
-    <div class="col-12 col-md-4 d-flex">
-      <div class="profile-avatar mx-auto">
-        <img class="img-thumbnail" src="{{$profile->avatarUrl()}}" style="border-radius:100%;" width="172px">
-      </div>
-    </div>
-    <div class="col-12 col-md-8 d-flex align-items-center">
-      <div class="profile-details">
-        <div class="username-bar pb-2  d-flex align-items-center">
-          <span class="font-weight-ultralight h1">{{$profile->username}}</span>
-        </div>
-        <div class="profile-stats pb-3 d-inline-flex lead">
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url()}}">
-              <span class="font-weight-bold">{{$profile->statuses()->whereNull('in_reply_to_id')->count()}}</span> 
-              Posts
-            </a>
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url('/followers')}}">
-              <span class="font-weight-bold">{{$profile->followerCount(true)}}</span> 
-              Followers
-            </a>
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$profile->url('/following')}}">
-              <span class="font-weight-bold">{{$profile->followingCount(true)}}</span> 
-              Following
-            </a>
-          </div>
-        </div>
-        <p class="lead font-weight-bold">
-          {{$profile->name}}
-        </p>
-      </div>
-    </div>
-  </div>
+@include('profile.partial.user-info')
 
+<div class="container following-page" style="min-height: 60vh;">
   <div class="col-12 col-md-8 offset-md-2">
     @if($following->count() !== 0)
     <ul class="list-group mt-4">

resources/views/profile/partial/user-info.blade.php

@@ -0,0 +1,79 @@
+<div class="bg-white py-5">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-4 d-flex">
+        <div class="profile-avatar mx-auto">
+          <img class="img-thumbnail" src="{{$user->avatarUrl()}}" style="border-radius:100%;" width="172px">
+        </div>
+      </div>
+      <div class="col-12 col-md-8 d-flex align-items-center">
+        <div class="profile-details">
+          <div class="username-bar pb-2  d-flex align-items-center">
+            <span class="font-weight-ultralight h1">{{$user->username}}</span>
+            @if($owner == true)
+            <span class="h5 pl-2 b-0">
+            <a class="icon-settings text-muted" href="{{route('settings')}}"></a>
+            </span>
+            @elseif ($following == true)
+            <span class="pl-4">
+              <form class="follow-form" method="post" action="/i/follow" style="display: inline;" data-id="{{$user->id}}" data-action="unfollow">
+                @csrf
+                <input type="hidden" name="item" value="{{$user->id}}">
+                <button class="btn btn-outline-secondary font-weight-bold px-4 py-0" type="submit">Unfollow</button>
+              </form>
+            </span>
+            @elseif ($following == false)
+            <span class="pl-4">
+              <form class="follow-form" method="post" action="/i/follow" style="display: inline;" data-id="{{$user->id}}" data-action="follow">
+                @csrf
+                <input type="hidden" name="item" value="{{$user->id}}">
+                <button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
+              </form>
+            </span>
+            @endif
+            {{-- TODO: Implement action dropdown
+            <span class="pl-4">
+              <div class="dropdown">
+                <button class="btn btn-secondary dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="icon-options"></i>
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <a class="dropdown-item" href="#">Report User</a>
+                  <a class="dropdown-item" href="#">Block User</a>
+                </div>
+              </div>
+            </span>
+            --}}
+          </div>
+          <div class="profile-stats pb-3 d-inline-flex lead">
+            <div class="font-weight-light pr-5">
+              <a class="text-dark" href="{{$user->url()}}">
+              <span class="font-weight-bold">{{$user->statuses()->whereNull('in_reply_to_id')->count()}}</span> 
+              Posts
+              </a>
+            </div>
+            <div class="font-weight-light pr-5">
+              <a class="text-dark" href="{{$user->url('/followers')}}">
+              <span class="font-weight-bold">{{$user->followerCount(true)}}</span> 
+              Followers
+              </a>
+            </div>
+            <div class="font-weight-light pr-5">
+              <a class="text-dark" href="{{$user->url('/following')}}">
+              <span class="font-weight-bold">{{$user->followingCount(true)}}</span> 
+              Following
+              </a>
+            </div>
+          </div>
+          <p class="lead">
+            <span class="font-weight-bold">{{$user->name}}</span> 
+            @if($user->remote_url)
+            <span class="badge badge-info">REMOTE PROFILE</span>
+            @endif
+            {{$user->bio}}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/views/profile/show.blade.php

@@ -2,134 +2,59 @@
 
 @section('content')
 
-<div class="container">
-  
-  <div class="profile-header row my-5">
-    <div class="col-12 col-md-4 d-flex">
-      <div class="profile-avatar mx-auto">
-        <img class="img-thumbnail" src="{{$user->avatarUrl()}}" style="border-radius:100%;" width="172px">
-      </div>
-    </div>
-    <div class="col-12 col-md-8 d-flex align-items-center">
-      <div class="profile-details">
-        <div class="username-bar pb-2  d-flex align-items-center">
-          <span class="font-weight-ultralight h1">{{$user->username}}</span>
-          @if($owner == true)
-          <span class="h5 pl-2 b-0">
-            <a class="icon-settings text-muted" href="{{route('settings')}}"></a>
-          </span>
-          @elseif ($following == true)
-          <span class="pl-4">
-            <form class="follow-form" method="post" action="/i/follow" style="display: inline;" data-id="{{$user->id}}" data-action="unfollow">
-              @csrf
-              <input type="hidden" name="item" value="{{$user->id}}">
-              <button class="btn btn-outline-secondary font-weight-bold px-4 py-0" type="submit">Unfollow</button>
-            </form>
-          </span>
-          @elseif ($following == false)
-          <span class="pl-4">
-            <form class="follow-form" method="post" action="/i/follow" style="display: inline;" data-id="{{$user->id}}" data-action="follow">
-              @csrf
-              <input type="hidden" name="item" value="{{$user->id}}">
-              <button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
-            </form>
-          </span>
-          @endif
-          {{-- TODO: Implement action dropdown
-          <span class="pl-4">
-            <div class="dropdown">
-              <button class="btn btn-secondary dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="icon-options"></i>
-              </button>
-              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" href="#">Report User</a>
-                <a class="dropdown-item" href="#">Block User</a>
-              </div>
-            </div>
-          </span>--}}
-        </div>
-        <div class="profile-stats pb-3 d-inline-flex lead">
-          <div class="font-weight-light pr-5">
-            <span class="font-weight-bold">{{$user->statuses()->whereNull('in_reply_to_id')->count()}}</span> 
-            Posts
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$user->url('/followers')}}">
-              <span class="font-weight-bold">{{$user->followerCount(true)}}</span> 
-              Followers
-            </a>
-          </div>
-          <div class="font-weight-light pr-5">
-            <a class="text-dark" href="{{$user->url('/following')}}">
-              <span class="font-weight-bold">{{$user->followingCount(true)}}</span> 
-              Following
-            </a>
-          </div>
-        </div>
-        <p class="lead">
-          <span class="font-weight-bold">{{$user->name}}</span> 
-          @if($user->remote_url)
-          <span class="badge badge-info">REMOTE PROFILE</span>
-          @endif
-          {{$user->bio}}
-        </p>
-      </div>
-    </div>
-  </div>
+@include('profile.partial.user-info')
 
+@if($owner == true)
+<div>
+  <ul class="nav nav-topbar d-flex justify-content-center">
+    <li class="nav-item">
+      <a class="nav-link {{request()->is('*/saved') ? '':'active'}} font-weight-bold text-uppercase" href="{{$user->url()}}">Posts</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link {{request()->is('*/saved') ? 'active':''}} font-weight-bold text-uppercase" href="{{$user->url('/saved')}}">Saved</a>
+    </li>
+  </ul>
+</div>
+@endif
+<div class="container">
   <div class="profile-timeline mt-5 row">
-    @if($owner == true)
-      <div class="col-12 mb-5">
-        <ul class="nav nav-topbar d-flex justify-content-center">
-          <li class="nav-item">
-            <a class="nav-link {{request()->is('*/saved') ? '':'active'}} font-weight-bold text-uppercase" href="{{$user->url()}}">Posts</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link {{request()->is('*/saved') ? 'active':''}} font-weight-bold text-uppercase" href="{{$user->url('/saved')}}">Saved</a>
-          </li>
-        </ul>
-      </div>
-    @endif
-
     @if($owner && request()->is('*/saved'))
     <div class="col-12">
       <p class="text-muted font-weight-bold small">{{__('profile.savedWarning')}}</p>
     </div>
     @endif
-
     @if($timeline->count() > 0)
-      @foreach($timeline as $status)
-      <div class="col-12 col-md-4 mb-4">
-        <a class="card info-overlay" href="{{$status->url()}}">
-          <div class="square">
-            <div class="square-content" style="background-image: url('{{$status->thumb()}}')"></div>
-            <div class="info-overlay-text">
-              <h5 class="text-white m-auto font-weight-bold">
-                <span class="pr-4">
-                  <span class="icon-heart pr-1"></span> {{$status->likes_count}}
-                </span>
-                <span>
-                  <span class="icon-speech pr-1"></span> {{$status->comments_count}}
-                </span>
-              </h5>
-            </div>
+    @foreach($timeline as $status)
+    <div class="col-12 col-md-4 mb-4">
+      <a class="card info-overlay" href="{{$status->url()}}">
+        <div class="square">
+          <div class="square-content" style="background-image: url('{{$status->thumb()}}')"></div>
+          <div class="info-overlay-text">
+            <h5 class="text-white m-auto font-weight-bold">
+              <span class="pr-4">
+              <span class="icon-heart pr-1"></span> {{$status->likes_count}}
+              </span>
+              <span>
+              <span class="icon-speech pr-1"></span> {{$status->comments_count}}
+              </span>
+            </h5>
           </div>
-        </a>
-      </div>
-      @endforeach
+        </div>
+      </a>
+    </div>
+    @endforeach
     @else
-      <div class="col-12">
-        <div class="card">
-          <div class="card-body py-5 my-5">
-            <div class="d-flex my-5 py-5 justify-content-center align-items-center">
-              <p class="lead font-weight-bold">{{ __('profile.emptyTimeline') }}</p>
-            </div>
+    <div class="col-12">
+      <div class="card">
+        <div class="card-body py-5 my-5">
+          <div class="d-flex my-5 py-5 justify-content-center align-items-center">
+            <p class="lead font-weight-bold">{{ __('profile.emptyTimeline') }}</p>
           </div>
         </div>
       </div>
+    </div>
     @endif
   </div>
-
 </div>
 
 @endsection

resources/views/status/show.blade.php

@@ -5,11 +5,24 @@
 <div class="container px-0 mt-md-4">
   <div class="card status-container orientation-{{$status->firstMedia()->orientation ?? 'unknown'}}">
     <div class="row mx-0">
+    <div class="d-flex d-md-none align-items-center justify-content-between card-header w-100">
+      <div class="d-flex align-items-center status-username">
+        <div class="status-avatar mr-2">
+          <img class="img-thumbnail" src="{{$user->avatarUrl()}}" width="24px" height="24px" style="border-radius:12px;">
+        </div>
+        <div class="username">
+          <a href="{{$user->url()}}" class="username-link font-weight-bold text-dark">{{$user->username}}</a>
+        </div>
+      </div>
+      <div class="timestamp mb-0">
+        <p class="small text-uppercase mb-0"><a href="{{$status->url()}}" class="text-muted">{{$status->created_at->diffForHumans(null, true, true, true)}}</a></p>
+       </div>
+     </div>
       <div class="col-12 col-md-8 status-photo px-0">
         <img src="{{$status->mediaUrl()}}" width="100%">
       </div>
-      <div class="col-12 col-md-4 px-0 d-flex flex-column">
-        <div class="d-flex align-items-center justify-content-between card-header">
+      <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
+        <div class="d-md-flex d-none align-items-center justify-content-between card-header">
           <div class="d-flex align-items-center status-username">
             <div class="status-avatar mr-2">
               <img class="img-thumbnail" src="{{$user->avatarUrl()}}" width="24px" height="24px" style="border-radius:12px;">
@@ -22,59 +35,61 @@
             <p class="small text-uppercase mb-0"><a href="{{$status->url()}}" class="text-muted">{{$status->created_at->diffForHumans(null, true, true, true)}}</a></p>
           </div>
         </div>
-        <div class="card-body status-comments">
-          <div class="status-comment">
-            <p class="mb-1">
-              <span class="font-weight-bold pr-1">{{$status->profile->username}}</span>
-              <span class="comment-text">{!! $status->rendered ?? e($status->caption) !!}</span>
-            </p>
-            <div class="comments">
-              @foreach($status->comments->reverse()->take(10) as $item)
-              <p class="mb-0">
-                <span class="font-weight-bold pr-1"><bdi><a class="text-dark" href="{{$item->profile->url()}}">{{$item->profile->username}}</a></bdi></span>
-                <span class="comment-text">{!!$item->rendered!!} <a href="{{$item->url()}}" class="text-dark small font-weight-bold float-right">{{$item->created_at->diffForHumans(null, true, true ,true)}}</a></span>
+        <div class="d-flex flex-md-column flex-column-reverse h-100">
+          <div class="card-body status-comments">
+            <div class="status-comment">
+              <p class="mb-1">
+                <span class="font-weight-bold pr-1">{{$status->profile->username}}</span>
+                <span class="comment-text">{!! $status->rendered ?? e($status->caption) !!}</span>
               </p>
-              @endforeach
+              <div class="comments">
+                @foreach($status->comments->reverse()->take(10) as $item)
+                <p class="mb-0">
+                  <span class="font-weight-bold pr-1"><bdi><a class="text-dark" href="{{$item->profile->url()}}">{{$item->profile->username}}</a></bdi></span>
+                  <span class="comment-text">{!!$item->rendered!!} <a href="{{$item->url()}}" class="text-dark small font-weight-bold float-right">{{$item->created_at->diffForHumans(null, true, true ,true)}}</a></span>
+                </p>
+                @endforeach
+              </div>
             </div>
           </div>
-        </div>
-        <div class="card-body flex-grow-0">
-          <div class="reactions h3 mb-0">
-            <form class="d-inline-flex like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$status->id}}" data-action="like">
-              @csrf
-              <input type="hidden" name="item" value="{{$status->id}}">
-              <button class="btn btn-link text-dark p-0" type="submit">
-                <span class="far fa-heart fa-lg mb-0"></span>
-              </button>
-            </form>
-            <span class="far fa-comment fa-lg pt-1 pr-3"></span>
-            @if(Auth::check())
-            @if(Auth::user()->profile->id === $status->profile->id || Auth::user()->is_admin == true)
-            <form method="post" action="/i/delete" class="d-inline-flex">
-              @csrf
-              <input type="hidden" name="type" value="post">
-              <input type="hidden" name="item" value="{{$status->id}}">
-              <button type="submit" class="btn btn-link text-dark p-0">
-                <span class="far fa-trash-alt fa-lg mb-0"></span>
-              </button>
-            </form>
-            @endif
-            @endif
-            <span class="float-right">
-              <form class="d-inline-flex bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$status->id}}" data-action="bookmark">
+          <div class="card-body flex-grow-0">
+            <div class="reactions h3 mb-0">
+               <form class="d-inline-flex like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$status->id}}" data-action="like">
                 @csrf
                 <input type="hidden" name="item" value="{{$status->id}}">
                 <button class="btn btn-link text-dark p-0" type="submit">
-                  <span class="far fa-bookmark fa-lg mb-0"></span>
+                  <span class="far fa-heart fa-lg mb-0"></span>
                 </button>
               </form>
-            </span>
-          </div>
-          <div class="likes font-weight-bold mb-0">
-            <span class="like-count" data-count="{{$status->likes_count}}">{{$status->likes_count}}</span> likes
+              <span class="far fa-comment fa-lg pt-1 pr-3"></span>
+              @if(Auth::check())
+              @if(Auth::user()->profile->id === $status->profile->id || Auth::user()->is_admin == true)
+              <form method="post" action="/i/delete" class="d-inline-flex">
+                @csrf
+                <input type="hidden" name="type" value="post">
+                <input type="hidden" name="item" value="{{$status->id}}">
+                <button type="submit" class="btn btn-link text-dark p-0">
+                  <span class="far fa-trash-alt fa-lg mb-0"></span>
+                </button>
+              </form>
+              @endif
+              @endif
+              <span class="float-right">
+                <form class="d-inline-flex bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$status->id}}" data-action="bookmark">
+                  @csrf
+                  <input type="hidden" name="item" value="{{$status->id}}">
+                  <button class="btn btn-link text-dark p-0" type="submit">
+                    <span class="far fa-bookmark fa-lg mb-0"></span>
+                  </button>
+                </form>
+              </span>
+            </div>
+            <div class="likes font-weight-bold mb-0">
+              <span class="like-count" data-count="{{$status->likes_count}}">{{$status->likes_count}}</span> likes
+            </div>
           </div>
         </div>
-        <div class="card-footer">
+        <div class="card-footer bg-light sticky-md-bottom">
           <form class="comment-form" method="post" action="/i/comment" data-id="{{$status->id}}" data-truncate="false">
             @csrf
             <input type="hidden" name="item" value="{{$status->id}}">