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

Frontend ui refactor

resources/views/site/help/hashtags.blade.php

@@ -6,21 +6,24 @@
     <h3 class="font-weight-bold">Hashtags</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>
+  <p class="lead">A hashtag — written with a # symbol — is used to index keywords or topics.</p>
+  <div class="py-4">
+    <p class="font-weight-bold h5 pb-3">Using hashtags to categorize posts by keyword</p>
+    <ul>
+      <li class="mb-3 font-weight-lighter">People use the hashtag symbol (#) before a relevant phrase or keyword in their post to categorize those posts and make them more discoverable.</li>
+      <li class="mb-3 font-weight-lighter">Any hashtags will be linked to a hashtag page with other posts containing the same hashtag.</li>
+      <li class="font-weight-lighter">Hashtags can be used anywhere in a post.</li>
+    </ul>
+  </div>
+  <div class="card bg-primary border-primary" style="box-shadow: none !important;border: 3px solid #08d!important;">
+    <div class="card-header text-light font-weight-bold h4 p-4">Hashtag Tips</div>
+    <div class="card-body bg-white p-3">
+      <ul class="pt-3">
+        <li class="lead font-weight-lighter mb-4">You cannot add spaces or punctuation in a hashtag, or it will not work properly.</li>
+        <li class="lead font-weight-lighter mb-4">Any public posts that contain a hashtag may be included in search results or discover pages.</li>
+        <li class="lead font-weight-lighter">You can search hashtags by typing in a hashtag into the search bar.</li>
+
+      </ul>
+    </div>
   </div>
 @endsection

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

@@ -1,4 +1,4 @@
-  <div class="col-12 col-md-3 py-3" style="border-right:1px solid #ccc;">
+  <div class="col-12 col-md-3 py-3 d-none d-md-block" style="border-right:1px solid #ccc;">
     <ul class="nav flex-column settings-nav">
       <li class="nav-item {{request()->is('*/getting-started')?'active':''}}">
         <a class="nav-link font-weight-light text-muted" href="{{route('help.getting-started')}}">{{__('helpcenter.gettingStarted')}}</a>

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

@@ -1,4 +1,4 @@
-  <div class="col-12 col-md-3 py-3" style="border-right:1px solid #ccc;">
+  <div class="col-12 col-md-3 py-3 d-none d-md-block" style="border-right:1px solid #ccc;">
     <ul class="nav flex-column settings-nav">
       <li class="nav-item pl-3 {{request()->is('site/about')?'active':''}}">
         <a class="nav-link font-weight-light text-muted" href="{{route('site.about')}}">{{__('site.about')}}</a>