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

Frontend ui refactor

app/Http/Controllers/SiteController.php

@@ -2,9 +2,17 @@
 
 namespace App\Http\Controllers;
 
+use App;
 use Illuminate\Http\Request;
 
 class SiteController extends Controller
 {
-    
+    public function changeLocale(Request $request, $locale)
+    {
+        if(!App::isLocale($locale)) {
+          return redirect()->back();
+        }
+        App::setLocale($locale);
+        return redirect()->back();
+    }
 }

app/Jobs/CommentPipeline/CommentPipeline.php

@@ -42,6 +42,10 @@ class CommentPipeline implements ShouldQueue
         $target = $status->profile;
         $actor = $comment->profile;
 
+        if($actor->id === $target->id) {
+            return true;
+        }
+
         try {
 
             $notification = new Notification;

app/Status.php

@@ -42,8 +42,10 @@ class Status extends Model
 
     public function mediaUrl()
     {
-      $path = $this->firstMedia()->media_path;
+      $media = $this->firstMedia();
-      $url = Storage::url($path);
+      $path = $media->media_path;
+      $hash = is_null($media->processed_at) ? md5('unprocessed') : md5($media->created_at); 
+      $url = Storage::url($path) . "?v={$hash}";
       return url($url);
     }
 

resources/assets/js/bootstrap.js

@@ -17,7 +17,6 @@ try {
     window.typeahead = require('./lib/typeahead');
     window.Bloodhound = require('./lib/bloodhound');
 
-    require('./lib/fontawesome-all');
     require('./components/localstorage');
     require('./components/likebutton');
     require('./components/commentform');

resources/assets/js/components/likebutton.js

@@ -20,7 +20,7 @@ $(document).ready(function() {
       var heart = el.find('.status-heart');
 
       if(likes.indexOf(id) != -1) {
-        heart.addClass('fas fa-heart').removeClass('far fa-heart');
+        heart.removeClass('far fa-heart').addClass('fas fa-heart');
       }
     });
   };
@@ -40,14 +40,14 @@ $(document).ready(function() {
       var heart = el.find('.status-heart');
 
       if(likes.indexOf(id) > -1) {
-        heart.addClass('far fa-heart').removeClass('fas fa-heart');
+        heart.removeClass('fas fa-heart').addClass('far fa-heart');
         likes = likes.filter(function(item) { 
             return item !== id
         });
         counter.text(count);
         action = 'unlike';
       } else {
-        heart.addClass('fas fa-heart').removeClass('far fa-heart');
+        heart.removeClass('far fa-heart').addClass('fas fa-heart');
         likes.push(id);
         counter.text(count);
         action = 'like';

resources/assets/js/timeline.js

@@ -4,9 +4,10 @@ $(document).ready(function() {
   let infScroll = new InfiniteScroll( elem, {
     path: '.pagination__next',
     append: '.timeline-feed',
+    status: '.page-load-status',
     history: false,
   });
   infScroll.on( 'append', function( response, path, items ) {
     pixelfed.hydrateLikes();
   });
-});
+});

resources/assets/sass/custom.scss

@@ -172,22 +172,11 @@ body, button, input, textarea {
  }
 }
 
-.fas, .far {
-  font-size: 25px !important;
-}
-
-
-.far.fa-heart {
-  color: #343a40;
-}
-
-.svg-inline--fa.fa-heart.fa-w-16.status-heart.fa-2x {
-  color: #f70ec4;
-}
-
 .fas.fa-heart {
+  color: #f70ec4!important;
 }
 
+
 @media (max-width: map-get($grid-breakpoints, "md")) {
   .border-md-left-0 {
     border-left:0!important
@@ -202,3 +191,15 @@ body, button, input, textarea {
     z-index:1020
   }
 }
+
+@keyframes loading-bar {
+  from { background-position: 0 0; }
+  to { background-position: 100vw 0; }
+}
+
+.loading-page {
+  background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
+  width: 100vw;
+  height: .25rem;
+  animation: loading-bar 3s linear infinite;
+}

resources/lang/de/notification.php

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

resources/lang/de/profile.php

@@ -1,5 +1,8 @@
 <?php
 
 return [
-  'emptyTimeline' => 'Dieser Benutzer hat noch keine Fotos hochgeladen!',
+  'emptyTimeline' => 'Dieser Benutzer hat noch nichts gepostet!',
+  'emptyFollowers' => 'Diesem Benutzer folgt noch niemand!',
+  'emptyFollowing' => 'Dieser Benutzer folgt noch niemanden!',
+  'savedWarning'  => 'Nur du kannst sehen was du gespeichert hast',
 ];

resources/lang/de/timeline.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+
+  'emptyPersonalTimeline' => 'Deine Timeline ist leer.'
+
+];

resources/lang/he/notification.php

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

resources/views/account/activity.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="container notification-page" style="min-height: 60vh;">
-  <div class="col-12 col-md-8 offset-2">
+  <div class="col-12 col-md-8 offset-md-2">
     <ul class="list-group">
 
       @foreach($notifications as $notification)

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

@@ -10,7 +10,7 @@
           <a href="#" class="text-primary pr-2">Directory</a>
           <a href="#" class="text-primary pr-2">Profiles</a>
           <a href="#" class="text-primary pr-2">Hashtags</a>
-          <a href="#" class="text-primary ">Language</a>
+          <a href="{{route('site.language')}}" class="text-primary">Language</a>
           <a href="#" class="text-dark float-right">© {{date('Y')}} PixelFed.org</a>
         </p>
     </div>

resources/views/site/language.blade.php

@@ -0,0 +1,19 @@
+@extends('site.partial.template')
+
+@section('section')
+
+  <div class="title">
+    <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>
+  <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">
+    <a class="list-group-item font-weight-bold" href="/i/lang/en">English</a>
+  </ul>
+@endsection
+
+@push('meta')
+<meta property="og:description" content="Language">
+@endpush

resources/views/site/partial/sidebar.blade.php

@@ -9,6 +9,9 @@
       <li class="nav-item pl-3 {{request()->is('site/help')?'active':''}}">
         <a class="nav-link lead text-muted" href="{{route('site.help')}}">Help</a>
       </li>
+      <li class="nav-item pl-3 {{request()->is('site/language')?'active':''}}">
+        <a class="nav-link lead text-muted" href="{{route('site.language')}}">Language</a>
+      </li>
       <li class="nav-item">
         <hr>
       </li>

resources/views/timeline/personal.blade.php

@@ -36,6 +36,27 @@
     </div>
     @endif
     </div>
+
+    <div class="page-load-status">
+      <div class="infinite-scroll-request">
+        <div class="d-none fixed-top loading-page"></div>
+      </div>
+      <div class="infinite-scroll-last">
+        <h3>No more content</h3>
+        <p class="text-muted">
+          Maybe you could try 
+          <a href="{{route('discover')}}">discovering</a>
+          more people you can follow.
+        </p>
+      </div>
+      <div class="infinite-scroll-error">
+        <h3>Whoops, an error</h3>
+        <p class="text-muted">
+          Try reloading the page
+        </p>
+      </div>
+    </div>
+
     <div class="d-flex justify-content-center">
       {{$timeline->links()}}
     </div>

resources/views/timeline/public.blade.php

@@ -27,6 +27,27 @@
 
     @endforeach
     </div>
+
+    <div class="page-load-status">
+      <div class="infinite-scroll-request">
+        <div class="d-none fixed-top loading-page"></div>
+      </div>
+      <div class="infinite-scroll-last">
+        <h3>No more content</h3>
+        <p class="text-muted">
+          Maybe you could try 
+          <a href="{{route('discover')}}">discovering</a>
+          more people you can follow.
+        </p>
+      </div>
+      <div class="infinite-scroll-error">
+        <h3>Whoops, an error</h3>
+        <p class="text-muted">
+          Try reloading the page
+        </p>
+      </div>
+    </div>
+
     <div class="d-flex justify-content-center">
       {{$timeline->links()}}
     </div>

routes/web.php

@@ -61,6 +61,7 @@ Route::domain(config('pixelfed.domain.app'))->group(function() {
     Route::post('like', 'LikeController@store');
     Route::post('follow', 'FollowerController@store');
     Route::post('bookmark', 'BookmarkController@store');
+    Route::get('lang/{locale}', 'SiteController@changeLocale');
 
     Route::group(['prefix' => 'report'], function() {
       Route::get('/', 'ReportController@showForm')->name('report.form');
@@ -123,6 +124,7 @@ Route::domain(config('pixelfed.domain.app'))->group(function() {
     Route::view('privacy', 'site.privacy')->name('site.privacy');
     Route::view('platform', 'site.platform')->name('site.platform');
     Route::view('libraries', 'site.libraries')->name('site.libraries');
+    Route::view('language', 'site.language')->name('site.language');
   });
 
   Route::get('p/{username}/{id}/c/{cid}', 'CommentController@show');