Frontend ui refactor (#379)

* Make followers list flush on mobile

* Make followers list flush on mobile

* Add message for no saved posts

Signed-off-by: Marcin Mikołajczak <me@m4sk.in>

* add MySQL version req to README.md

* adding back example file, deleted accidentally

* and remove extra empty line, no need to cause a change in the repo

* make clear which version of MySQL is supported

* Unsquish tag-page avatars

Fix #374

* Fix usernames escaping div and make images link to users

* Fix Nginx config

README.md

@@ -16,7 +16,7 @@ testing and development.
 
 ## Requirements
  - PHP >= 7.1.3 (7.2+ recommended for stable version)
- - MySQL, Postgres (MariaDB and sqlite are not supported yet)
+ - MySQL >= 5.7, Postgres (MariaDB and sqlite are not supported yet)
  - Redis
  - Composer
  - GD or ImageMagick

contrib/nginx.conf

@@ -7,7 +7,7 @@ server {
 	root /var/www/html/public;
 
 	location / {
-		try_files $uri $uri/ /index.php;
+		try_files $uri $uri/ /$is_args$args;
 	}
 
 	location ~ \.php$ {

resources/assets/sass/custom.scss

@@ -294,3 +294,7 @@ details summary::-webkit-details-marker {
 .details-animated[open] > summary {
   display: none!important;
 }
+
+.profile-avatar img {
+  object-fit: cover;
+}

resources/lang/en/profile.php

@@ -4,5 +4,6 @@ return [
   'emptyTimeline' => 'This user has no posts yet!',
   'emptyFollowers' => 'This user has no followers yet!',
   'emptyFollowing' => 'This user is not following anyone yet!',
+  'emptySaved' => 'You haven’t saved any post yet!',
   'savedWarning'  => 'Only you can see what you’ve saved',
 ];

resources/lang/pl/navmenu.php

@@ -9,5 +9,6 @@ return [
     'settings' => 'Ustawienia',
     'admin' => 'Administrator',
     'logout' => 'Wyloguj się',
+    'directMessages' => 'Wiadomości bezpośrednie',
 
 ];

resources/lang/pl/notification.php

@@ -2,9 +2,9 @@
 
 return [
 
-  'likedPhoto' => 'polubił Twoje zdjęcie.',
-  'startedFollowingYou' => 'zaczął Cię obserwować.',
-  'commented' => 'skomentował Twój wpis',
-  'mentionedYou' => 'wspomniał o Tobie.'
+  'likedPhoto' => 'polubił(a) Twoje zdjęcie.',
+  'startedFollowingYou' => 'zaczął(-ęła) Cię obserwować.',
+  'commented' => 'skomentował(a) Twój wpis',
+  'mentionedYou' => 'wspomniał(a) o Tobie.'
 
 ];

resources/lang/pl/profile.php

@@ -4,5 +4,6 @@ return [
   'emptyTimeline' => 'Ten użytkownik nie opublikował jeszcze niczego!',
   'emptyFollowers' => 'Nikt nie obserwuje tego użytkownika!',
   'emptyFollowing' => 'Ten użytkownik nie obserwuje nikogo!',
-  'savedWarning'  => 'Tylko Ty widzisz to, co zapisałeś',
+  'emptySaved' => 'Nie zapisałeś(-aś) jeszcze niczego!',
+  'savedWarning'  => 'Tylko Ty widzisz to, co zapisałeś(-aś)',
 ];

resources/views/profile/followers.blade.php

@@ -5,11 +5,11 @@
 @include('profile.partial.user-info')
 
 <div class="container following-page" style="min-height: 60vh;">
-  <div class="col-12 col-md-8 offset-md-2">
+  <div class="col-12 col-md-8 offset-md-2 px-0">
     @if($followers->count() !== 0)
-    <ul class="list-group mt-4">
+    <ul class="list-group mt-4 px-0">
       @foreach($followers as $user)
-      <li class="list-group-item following">
+      <li class="list-group-item following card-md-rounded-0">
           <span class="following-icon pr-3">
             <img src="{{$user->avatarUrl()}}" width="32px" class="rounded-circle">
           </span>

resources/views/profile/following.blade.php

@@ -5,11 +5,11 @@
 @include('profile.partial.user-info')
 
 <div class="container following-page" style="min-height: 60vh;">
-  <div class="col-12 col-md-8 offset-md-2">
+  <div class="col-12 col-md-8 offset-md-2 px-0">
     @if($following->count() !== 0)
-    <ul class="list-group mt-4">
+    <ul class="list-group mt-4 px-0">
       @foreach($following as $user)
-      <li class="list-group-item following">
+      <li class="list-group-item following card-md-rounded-0">
           <span class="following-icon pr-3">
             <img src="{{$user->avatarUrl()}}" width="32px" class="rounded-circle">
           </span>

resources/views/profile/show.blade.php

@@ -56,7 +56,11 @@
         <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>
+              @if($owner && request()->is('*/saved'))
+                <p class="lead font-weight-bold">{{ __('profile.emptySaved') }}</p>
+              @else
+                <p class="lead font-weight-bold">{{ __('profile.emptyTimeline') }}</p>
+              @endif
             </div>
           </div>
       </div>

resources/views/status/show.blade.php

@@ -6,14 +6,14 @@
   <div class="card card-md-rounded-0 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 bg-white w-100">
-      <div class="d-flex align-items-center status-username">
+      <a href="{{$user->url()}}" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{$user->username}}">
         <div class="status-avatar mr-2">
-          <img class="img-thumbnail" src="{{$user->avatarUrl()}}" width="24px" height="24px" style="border-radius:12px;">
+          <img 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>
+          <span class="username-link font-weight-bold text-dark">{{$user->username}}</span>
         </div>
-      </div>
+      </a>
      </div>
       <div class="col-12 col-md-8 status-photo px-0">
         @if($status->is_nsfw && $status->media_count == 1)
@@ -61,14 +61,14 @@
       </div>
       <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 py-3 bg-white">
-          <div class="d-flex align-items-center status-username">
+          <a href="{{$user->url()}}" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{$user->username}}">
             <div class="status-avatar mr-2">
-              <img class="img-thumbnail" src="{{$user->avatarUrl()}}" width="24px" height="24px" style="border-radius:12px;">
+              <img 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>
+              <span class="username-link font-weight-bold text-dark">{{$user->username}}</span>
             </div>
-          </div>
+          </a>
             <div class="float-right">
               <div class="dropdown">
                 <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">