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

Frontend ui refactor

contrib/docker/Dockerfile.apache

@@ -54,6 +54,7 @@ ENV APP_ENV=production \
     DB_HOST=db \
     BROADCAST_DRIVER=log \
     QUEUE_DRIVER=redis \
+    HORIZON_EMBED=TRUE \
     HORIZON_PREFIX=horizon-pixelfed \
     REDIS_HOST=redis \
     SESSION_SECURE_COOKIE=true \

resources/lang/en/helpcenter.php

@@ -0,0 +1,25 @@
+<?php
+
+return [
+
+	'helpcenter' => 'Help Center',
+	'whatsnew' => 'What\'s New',
+
+	'gettingStarted' => 'Getting Started',
+	'sharingMedia' => 'Sharing Media',
+	'profile' => 'Profile',
+	'stories' => 'Stories',
+	'hashtags' => 'Hashtags',
+	'discover' => 'Discover',
+	'directMessages' => 'Direct Messages',
+	'timelines' => 'Timelines',
+
+	'communityGuidelines' => 'Community Guidelines',
+	'whatIsTheFediverse' => 'What is the fediverse?',
+	'controllingVisibility' => 'Controlling Visibility',
+	'blockingAccounts' => 'Blocking Accounts',
+	'safetyTips' => 'Safety Tips',
+	'reportSomething' => 'Report Something',
+	'dataPolicy' => 'Data Policy'
+
+];

resources/views/site/help.blade.php

@@ -3,94 +3,256 @@
 @section('section')
 
   <div class="title">
-    <h3 class="font-weight-bold">Help</h3>
+    <h3 class="font-weight-bold">{{__('helpcenter.helpcenter')}}</h3>
   </div>
   <hr>
+  <div class="row pb-5">
+    <div class="col-12">
+      <p class="font-weight-bold">{{__('helpcenter.whatsnew')}}</p>
+      <ul class="small">
+        <li>
+          <a href="#">Stories</a>
+        </li>
+        <li>
+          <a href="#">Mobile Web UI updates</a>
+        </li>
+      </ul>
+    </div>
+  </div>
   <div class="row">
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.getting-started')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.getting-started')}}">Getting Started</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-life-ring text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.gettingStarted')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">How can I create an account?</p>
+              <p class="small text-dark font-weight-bold mb-0">How can I change my bio?</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.hashtags')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.hashtags')}}">Hashtags</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-hashtag text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">Hashtags</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.sharing-media')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.sharing-media')}}">Sharing Photos & Videos</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-plus-square text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.sharingMedia')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">How do I create a post?</p>
+              <p class="small text-dark font-weight-bold mb-0">How do I add a filter?</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.discover')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.discover')}}">Discover</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-compass text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.discover')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.your-profile')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.your-profile')}}">Your Profile</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-user text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.profile')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">How can I make my account private?</p>
+              <p class="small text-dark font-weight-bold mb-0">How can I secure my account?</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.dm')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.dm')}}">Direct Messaging</a>
+        <div class="card">
-      </div>
+          <div class="card-body">
-    </div>
+            <p class="py-1 text-center">
-    <div class="col-12 col-md-6">
+              <i class="far fa-envelope text-lighter fa-2x"></i>
-      <div class="bg-light p-4">
+            </p>
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.stories')}}">Stories</a>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.directMessages')}}</p>
-      </div>
+            <div class="text-center pt-3">
-    </div>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
-    <div class="col-12 col-md-6">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
-      <div class="bg-light p-4">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.timelines')}}">Timelines</a>
             </div>
           </div>
         </div>
-  <hr>
+      </a>
-
+    </div>
-  <div class="row">
+    <div class="col-12 col-md-6 mb-3">
+      <a href="{{route('help.stories')}}" class="text-decoration-none">
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-pause-circle text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.stories')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <a href="{{route('help.timelines')}}" class="text-decoration-none">
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-home text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.timelines')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
 
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.community-guidelines')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.community-guidelines')}}">Community Guidelines</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-user-shield text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.communityGuidelines')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.blocking-accounts')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.blocking-accounts')}}">Blocking accounts</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-ban text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.blockingAccounts')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.what-is-fediverse')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.what-is-fediverse')}}">What is the fediverse?</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-network-wired text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.whatIsTheFediverse')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.safety-tips')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.safety-tips')}}">Safety Tips</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="fas fa-shield-alt text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.safetyTips')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.controlling-visibility')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.controlling-visibility')}}">Controlling your visibility</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-eye-slash text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.controllingVisibility')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.report-something')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.report-something')}}">Report Something</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="py-1 text-center">
+              <i class="far fa-flag text-lighter fa-2x"></i>
+            </p>
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.reportSomething')}}</p>
+            <div class="text-center pt-3">
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
+              <p class="small text-dark font-weight-bold mb-0">&nbsp;</p>
             </div>
           </div>
+        </div>
+      </a>
+    </div>
     <div class="col-12 col-md-6 mb-3">
-      <div class="bg-light p-4">
+      <a href="{{route('help.data-policy')}}" class="text-decoration-none">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.abusive-activity')}}">Abuse/malicious activity</a>
+        <div class="card">
+          <div class="card-body">
+            <p class="text-center text-muted font-weight-bold h4 mb-0">{{__('helpcenter.dataPolicy')}}</p>
           </div>
         </div>
-    <div class="col-12 col-md-6 mb-3">
+      </a>
-      <div class="bg-light p-4">
-        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.data-policy')}}">Data Policy</a>
-      </div>
     </div>
   </div>
   {{-- <div class="card mb-3">

resources/views/site/help/abusive-activity.blade.php

@@ -1,26 +0,0 @@
-@extends('site.help.partial.template', ['breadcrumb'=>'Abusive/Malicious Activity'])
-
-@section('section')
-
-  <div class="title">
-    <h3 class="font-weight-bold">Abusive/Malicious Activity</h3>
-  </div>
-  <hr>
-  <div class="card">
-  	<div class="card-body">
-  		<div class="row">
-  			<div class="col-12 col-md-3 text-center">
-  				<div class="icon-wrapper">
-  					<i class="far fa-question-circle fa-3x text-light"></i>
-  				</div>
-  			</div>
-  			<div class="col-12 col-md-9 d-flex align-items-center">
-  				<div class="text-center">
-	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
-	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
-  				</div>
-  			</div>
-  		</div>
-  	</div>
-  </div>
-@endsection

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

@@ -43,11 +43,6 @@
           Controlling Visibility
         </a>
       </li>
-      <li class="nav-item {{request()->is('*/abusive-activity')?'active':''}}">
-        <a class="nav-link font-weight-light text-muted" href="{{route('help.abusive-activity')}}">
-          Abusive Activity
-        </a>
-      </li>
       <li class="nav-item {{request()->is('*/blocking-accounts')?'active':''}}">
         <a class="nav-link font-weight-light text-muted" href="{{route('help.blocking-accounts')}}">
           Blocking Accounts

routes/web.php

@@ -252,7 +252,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
 
             Route::get('community-guidelines', 'SiteController@communityGuidelines')->name('help.community-guidelines');
             Route::view('controlling-visibility', 'site.help.controlling-visibility')->name('help.controlling-visibility');
-            Route::view('abusive-activity', 'site.help.abusive-activity')->name('help.abusive-activity');
             Route::view('blocking-accounts', 'site.help.blocking-accounts')->name('help.blocking-accounts');
             Route::view('report-something', 'site.help.report-something')->name('help.report-something');
             Route::view('data-policy', 'site.help.data-policy')->name('help.data-policy');
@@ -278,12 +277,9 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
     Route::get('p/{username}/{id}/c', 'CommentController@showAll');
     Route::get('p/{username}/{id}/edit', 'StatusController@edit');
     Route::post('p/{username}/{id}/edit', 'StatusController@editStore');
-    // Route::get('p/{username}/{id}.json', 'StatusController@showObject');
     Route::get('p/{username}/{id}', 'StatusController@show');
     Route::get('{username}/saved', 'ProfileController@savedBookmarks');
     Route::get('{username}/followers', 'ProfileController@followers')->middleware('auth');
     Route::get('{username}/following', 'ProfileController@following')->middleware('auth');
     Route::get('{username}', 'ProfileController@show');
-    // Route::get('p/{username}/{id}/embed', 'StatusController@showEmbed');
-    // Route::get('{username}', 'ProfileController@showVue');
 });