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

Frontend ui refactor

config/app.php

@@ -65,7 +65,7 @@ return [
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => env('APP_TIMEZONE', 'UTC'),
 
     /*
     |--------------------------------------------------------------------------
@@ -78,7 +78,7 @@ return [
     |
     */
 
-    'locale' => 'en',
+    'locale' => env('APP_LOCALE', 'en'),
 
     /*
     |--------------------------------------------------------------------------
@@ -91,7 +91,7 @@ return [
     |
     */
 
-    'fallback_locale' => 'en',
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
 
     /*
     |--------------------------------------------------------------------------

resources/assets/js/components/commentform.js

@@ -11,7 +11,7 @@ $(document).ready(function() {
     let el = $(this);
     let id = el.data('id');
     let commentform = el.find('input[name="comment"]');
-    let commenttext = commentform.val();
+    let commenttext = $(commentform.val()).text();
     let item = {item: id, comment: commenttext};
 
     commentform.prop('disabled', true);

resources/assets/sass/custom.scss

@@ -193,6 +193,13 @@ body, button, input, textarea {
   }
 }
 
+@media (max-width: map-get($grid-breakpoints, "sm")) {
+  .card-md-rounded-0 {
+    border-width: 1px 0;
+    border-radius:0 !important;
+  }
+}
+
 @keyframes loading-bar {
   from { background-position: 0 0; }
   to { background-position: 100vw 0; }
@@ -235,6 +242,12 @@ body, button, input, textarea {
   background-position: 50%;
 }
 
+
+.status-photo img {
+    object-fit: contain;
+    max-height: calc(100vh - (6rem));
+}
+
 @keyframes fadeInDown {
   0% {
     opacity: 0;
@@ -248,4 +261,5 @@ body, button, input, textarea {
 .details-animated[open] {
   animation-name: fadeInDown;
   animation-duration: 0.5s;
-}
+}
+

resources/lang/de/navmenu.php

@@ -0,0 +1,13 @@
+<?php
+
+return [
+
+    'viewMyProfile' => 'Mein Profil anschauen',
+    'myTimeline' => 'Meine Timeline',
+    'publicTimeline' => '&Ouml;ffentliche Timeline',
+    'remoteFollow' => 'Aus der Ferne folgen',
+    'settings' => 'Einstellungen',
+    'admin' => 'Administration',
+    'logout' => 'Abmelden',
+
+];

resources/lang/de/notification.php

@@ -5,5 +5,6 @@ return [
   'likedPhoto' => 'gefällt dein Foto.',
   'startedFollowingYou' => 'folgt dir nun.',
   'commented' => 'hat deinen Post kommentiert.',
+  'mentionedYou' => 'hat dich erwähnt.'
 
 ];

resources/lang/en/profile.php

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

resources/lang/he/navmenu.php

@@ -0,0 +1,13 @@
+<?php
+       
+return [
+     
+    'viewMyProfile' => 'צפה בפרופיל שלי',
+    'myTimeline' => 'ציר הזמן שלי',
+    'publicTimeline' => 'ציר הזמן הציבורי',
+    'remoteFollow' => 'עקיבה מרחוק',
+    'settings' => 'הגדרות',
+    'admin' => 'מנהל',
+    'logout' => 'התנתק',
+        
+];

resources/lang/he/notification.php

@@ -5,5 +5,6 @@ return [
   'likedPhoto' => 'אהבו את התמונה שלך.',
   'startedFollowingYou' => 'התחיל לעקוב אחריך.',
   'commented' => 'הגיב על הפוסט שלך.',
+  'mentionedYou' => 'הזכיר אותך.'
         
 ];

resources/views/errors/403.blade.php

@@ -5,9 +5,9 @@
   <div class="error-page py-5 my-5">
     <div class="card mx-5">
       <div class="card-body p-5">
-        <h1 class="text-center">403 - Forbidden</h1>
+        <h1 class="text-center">403 – Forbidden</h1>
       </div>
     </div>
   </div>
 </div>
-@endsection
+@endsection

resources/views/errors/404.blade.php

@@ -5,9 +5,9 @@
   <div class="error-page py-5 my-5">
     <div class="card mx-5">
       <div class="card-body p-5">
-        <h1 class="text-center">404 - Page Not Found</h1>
+        <h1 class="text-center">404 – Page Not Found</h1>
       </div>
     </div>
   </div>
 </div>
-@endsection
+@endsection

resources/views/errors/503.blade.php

@@ -5,10 +5,10 @@
   <div class="error-page py-5 my-5">
     <div class="card mx-5">
       <div class="card-body p-5 text-center">
-        <h1>503 - Service Unavailable</h1>
+        <h1>503 – Service Unavailable</h1>
         <p class="lead mb-0">Our services are overloaded at the moment, please try again later.</p>
       </div>
     </div>
   </div>
 </div>
-@endsection
+@endsection

resources/views/layouts/partial/nav.blade.php

@@ -1,8 +1,7 @@
 <nav class="navbar navbar-expand navbar-light navbar-laravel sticky-top">
     <div class="container">
         <a class="navbar-brand d-flex align-items-center" href="{{ url('/timeline') }}" title="Logo">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
+            <img src="/img/pixelfed-full-color.svg" height="60px">
-            <strong class="font-weight-bold">{{ config('app.name', 'Laravel') }}</strong>
         </a>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -79,9 +78,9 @@
     </div>
 </nav>
 @auth
-<nav class="breadcrumb d-md-none d-flex">
+<nav class="breadcrumb d-md-none d-flex m-0">
   <form class="form-inline search-form mx-auto">
    <input class="form-control mr-sm-2 search-form-input" type="search" placeholder="Search" aria-label="Search">
   </form>
 </nav>
-@endauth
+@endauth

resources/views/profile/followers.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.app',['title' => $profile->username . "'s followers"])
+@extends('layouts.app',['title' => $profile->username . "’s followers"])
 
 @section('content')
 

resources/views/profile/following.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.app',['title' => $profile->username . "'s follows"])
+@extends('layouts.app',['title' => $profile->username . "’s follows"])
 
 @section('content')
 

resources/views/report/form.blade.php

@@ -22,12 +22,12 @@
         <div class="row">
           <div class="col-12 col-md-8 offset-md-2 my-3">
             <p><a class="btn btn-light btn-block p-4 font-weight-bold" disabled>
-              I'm not interested in this content
+              I’m not interested in this content
             </a></p>
           </div>
           <div class="col-12 col-md-8 offset-md-2 my-3">
             <p><a class="btn btn-light btn-block p-4 font-weight-bold">
-              It's spam
+              It’s spam
             </a></p>
           </div>
           <div class="col-12 col-md-8 offset-md-2 my-3">
@@ -37,7 +37,7 @@
           </div>
           <div class="col-12 col-md-8 offset-md-2 my-3">
             <p><a class="btn btn-light btn-block p-4 font-weight-bold">
-              It's abusive or harmful
+              It’s abusive or harmful
             </a></p>
           </div>
           <div class="col-12 col-md-8 offset-md-2 my-3">
@@ -51,4 +51,4 @@
   </div>
 </div>
 
-@endsection
+@endsection

resources/views/site/fediverse.blade.php

@@ -7,15 +7,15 @@
   </div>
   <hr>
   <section>
-    <p class="lead">Fediverse is a portmanteau of "federation" and "universe". It is a common, informal name for a somewhat broad federation of social network servers.</p>
+    <p class="lead">Fediverse is a portmanteau of “federation” and “universe”. It is a common, informal name for a somewhat broad federation of social network servers.</p>
     <p class="lead font-weight-bold text-muted mt-4">Supported Fediverse Projects</p>
     <ul class="lead pl-4">
-      <li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> - A federated twitter alternative.</li>
+      <li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> – A federated twitter alternative.</li>
-      <li><a href="https://pleroma.social" rel="nofollow noopener">Pleroma</a> - A federated twitter alternative.</li>
+      <li><a href="https://pleroma.social" rel="nofollow noopener">Pleroma</a> – A federated twitter alternative.</li>
     </ul>
   </section>
 @endsection
 
 @push('meta')
-<meta property="og:description" content="What's Fediverse">
+<meta property="og:description" content="What’s Fediverse">
 @endpush

resources/views/site/language.blade.php

@@ -6,7 +6,7 @@
     <h3 class="font-weight-bold">Language</h3>
   </div>
   <hr>
-  <div class="alert alert-info font-weight-bold">We're still working on localization support!</div>
+  <div class="alert alert-info font-weight-bold">We’re still working on localization support!</div>
   <p class="lead">Current Locale: <span class="font-weight-bold">{{App::getLocale()}}</span></p>
   <p class="lead">Select from one of the supported languages:</p>
   <ul class="list-group">

resources/views/site/privacy.blade.php

@@ -16,7 +16,7 @@
         Posts, following and other public information: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public.
       </li>
       <li>
-        Direct and followers-only posts: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. Please keep in mind that the operators of the server and any receiving server may view such messages, and that recipients may screenshot, copy or otherwise re-share them. Do not share any dangerous information over PixelFed.
+        Direct and followers-only posts: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it’s important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. Please keep in mind that the operators of the server and any receiving server may view such messages, and that recipients may screenshot, copy or otherwise re-share them. Do not share any dangerous information over PixelFed.
       </li>
       <li>
         IPs and other metadata: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server.
@@ -27,7 +27,7 @@
     <p class="lead">Any of the information we collect from you may be used in the following ways:</p>
     <ul class="lead pl-4">
       <li>
-        To provide the core functionality of PixelFed. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
+        To provide the core functionality of PixelFed. You can only interact with other people’s content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
       </li>
       <li>
         To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations.
@@ -57,7 +57,7 @@
     <p class="lead">You may irreversibly delete your account at any time.</p>
 
     <h4 class="font-weight-bold">Do we use cookies?</h4>
-    <p class="lead">Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.
+    <p class="lead">Yes. Cookies are small files that a site or its service provider transfers to your computer’s hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.
     </p>
     <p class="lead">We use cookies to understand and save your preferences for future visits.</p>
 
@@ -66,8 +66,8 @@
     <p class="lead">Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this.</p>
     <p class="lead">When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password.</p>
 
-    <h4 class="font-weight-bold">Children's Online Privacy Protection Act Compliance</h4>
+    <h4 class="font-weight-bold">Children’s Online Privacy Protection Act Compliance</h4>
-    <p class="lead">Our site, products and services are all directed to people who are at least 13 years old. If this server is in the USA, and you are under the age of 13, per the requirements of COPPA (Children's Online Privacy Protection Act) do not use this site.</p>
+    <p class="lead">Our site, products and services are all directed to people who are at least 13 years old. If this server is in the USA, and you are under the age of 13, per the requirements of COPPA (Children’s Online Privacy Protection Act) do not use this site.</p>
 
     <h4 class="font-weight-bold">Changes to our Privacy Policy</h4>
     <p class="lead">If we decide to change our privacy policy, we will post those changes on this page.</p>

resources/views/status/show.blade.php

@@ -3,7 +3,7 @@
 @section('content')
 
 <div class="container px-0 mt-md-4">
-  <div class="card status-container orientation-{{$status->firstMedia()->orientation ?? 'unknown'}}">
+  <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">
@@ -87,23 +87,23 @@
             </div>
           </div>
           <div class="card-body flex-grow-0 py-1">
-            <div class="reactions h3 mb-0">
+            <div class="reactions my-1">
                <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 btn-lg p-0" type="submit" title="Like!">
+                <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Like!">
-                  <span class="far fa-heart fa-lg mb-0"></span>
+                  <h3 class="far fa-heart m-0"></h3>
                 </button>
               </form>
-              <span class="far fa-comment pt-1 pr-3" title="Comment"></span>
+              <h3 class="far fa-comment pr-3 m-0" title="Comment"></h3>
               @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 btn-lg text-dark p-0" title="Remove">
+                <button type="submit" class="btn btn-link text-dark p-0 border-0" title="Remove">
-                  <span class="far fa-trash-alt fa-lg mb-0"></span>
+                  <h3 class="far fa-trash-alt m-0"></h3>
                 </button>
               </form>
               @endif
@@ -112,8 +112,8 @@
                 <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 btn-lg" type="submit" title="Save">
+                  <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
-                    <span class="far fa-bookmark fa-lg mb-0"></span>
+                    <h3 class="far fa-bookmark m-0"></h3>
                   </button>
                 </form>
               </span>

resources/views/status/template.blade.php

@@ -1,4 +1,4 @@
-      <div class="card my-4 status-card">
+      <div class="card my-4 status-card card-md-rounded-0">
         <div class="card-header d-inline-flex align-items-center bg-white">
           <img src="{{$item->profile->avatarUrl()}}" width="32px" height="32px" style="border-radius: 32px;">
           <a class="username font-weight-bold pl-2 text-dark" href="{{$item->profile->url()}}">
@@ -44,20 +44,22 @@
         </a>
         @endif
         <div class="card-body">
-          <div class="reactions h3">
+          <div class="reactions my-1">
-            <form class="like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$item->id}}" data-action="like" data-count="{{$item->likes_count}}">
+            <form class="d-inline-flex like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$item->id}}" data-action="like" data-count="{{$item->likes_count}}">
               @csrf
               <input type="hidden" name="item" value="{{$item->id}}">
               <button class="btn btn-link text-dark p-0" type="submit" title=""Like!>
-                <span class="far fa-heart status-heart fa-2x"></span>
+                <h3 class="far fa-heart status-heart m-0"></h3>
               </button>
             </form>
-            <span class="far fa-comment status-comment-focus" title="Comment"></span>
+            <h3 class="far fa-comment status-comment-focus" title="Comment"></h3>
             <span class="float-right">
-              <form class="bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$item->id}}" data-action="bookmark">
+              <form class="d-inline-flex bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$item->id}}" data-action="bookmark">
                 @csrf
                 <input type="hidden" name="item" value="{{$item->id}}">
-                <button class="btn btn-link text-dark p-0" type="submit" title="Save"><span class="far fa-bookmark" style="font-size:25px;"></span></button>
+                <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
+                  <h3 class="far fa-bookmark m-0"></h3>
+                </button>
               </form>
             </span>
           </div>
@@ -103,7 +105,7 @@
           <form class="comment-form" method="post" action="/i/comment" data-id="{{$item->id}}" data-truncate="true">
             @csrf
             <input type="hidden" name="item" value="{{$item->id}}">
-            <input class="form-control status-reply-input" name="comment" placeholder="Add a comment...">
+            <input class="form-control status-reply-input" name="comment" placeholder="Add a comment…">
           </form>
         </div>
       </div>

resources/views/timeline/partial/new-form.blade.php

@@ -1,4 +1,4 @@
-    <div class="card">
+    <div class="card card-md-rounded-0">
       <div class="card-header font-weight-bold">New Post</div>
       <div class="card-body" id="statusForm">
         @if (session('error'))

resources/views/timeline/personal.blade.php

@@ -6,8 +6,8 @@
 
 @section('content')
 
-<div class="container">
+<div class="container p-0">
-  <div class="col-12 col-md-8 offset-md-2 pt-4">
+  <div class="col-md-10 col-lg-8 mx-auto pt-4 px-0">
     @if ($errors->any())
       <div class="alert alert-danger">
           <ul>
@@ -27,7 +27,7 @@
 
     @endforeach
     @if($timeline->count() == 0)
-    <div class="card">
+    <div class="card card-md-rounded-0">
       <div class="card-body py-5">
         <div class="d-flex justify-content-center align-items-center">
           <p class="lead font-weight-bold mb-0">{{ __('timeline.emptyPersonalTimeline') }}</p>
@@ -37,11 +37,11 @@
     @endif
     </div>
 
-    <div class="page-load-status">
+    <div class="page-load-status" style="display: none;">
-      <div class="infinite-scroll-request">
+      <div class="infinite-scroll-request" style="display: none;">
-        <div class="d-none fixed-top loading-page"></div>
+        <div class="fixed-top loading-page"></div>
       </div>
-      <div class="infinite-scroll-last">
+      <div class="infinite-scroll-last" style="display: none;">
         <h3>No more content</h3>
         <p class="text-muted">
           Maybe you could try 
@@ -49,7 +49,7 @@
           more people you can follow.
         </p>
       </div>
-      <div class="infinite-scroll-error">
+      <div class="infinite-scroll-error" style="display: none;">
         <h3>Whoops, an error</h3>
         <p class="text-muted">
           Try reloading the page

resources/views/timeline/public.blade.php

@@ -6,8 +6,8 @@
 
 @section('content')
 
-<div class="container">
+<div class="container px-0">
-  <div class="col-12 col-md-8 offset-md-2 pt-4">
+  <div class="col-md-10 col-lg-8 mx-auto pt-4 px-0">
     @if ($errors->any())
       <div class="alert alert-danger">
           <ul>
@@ -28,11 +28,11 @@
     @endforeach
     </div>
 
-    <div class="page-load-status">
+    <div class="page-load-status" style="display: none;">
-      <div class="infinite-scroll-request">
+      <div class="infinite-scroll-request" style="display: none;">
-        <div class="d-none fixed-top loading-page"></div>
+        <div class="fixed-top loading-page"></div>
       </div>
-      <div class="infinite-scroll-last">
+      <div class="infinite-scroll-last" style="display: none;">
         <h3>No more content</h3>
         <p class="text-muted">
           Maybe you could try 
@@ -40,7 +40,7 @@
           more people you can follow.
         </p>
       </div>
-      <div class="infinite-scroll-error">
+      <div class="infinite-scroll-error" style="display: none;">
         <h3>Whoops, an error</h3>
         <p class="text-muted">
           Try reloading the page