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

Frontend ui refactor

public/mix-manifest.json

@@ -1,12 +1,12 @@
 {
     "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
     "/js/app.js": "/js/app.js?id=a51da95c2b9df7cf8de2",
-    "/css/app.css": "/css/app.css?id=a3d1a9d5833199d019d4",
-    "/css/appdark.css": "/css/appdark.css?id=241076c8fb3c47e088d2",
+    "/css/app.css": "/css/app.css?id=20dc108f4dbbc76c9827",
+    "/css/appdark.css": "/css/appdark.css?id=08d0a92912b101bb7457",
     "/js/components.js": "/js/components.js?id=39d45813739697ddad5c",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
     "/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
-    "/js/profile.js": "/js/profile.js?id=9b4b7d662fb70fb48856",
+    "/js/profile.js": "/js/profile.js?id=69fd7039c50660f4e34d",
     "/js/status.js": "/js/status.js?id=0013d7a91c8d0080f3ca",
-    "/js/timeline.js": "/js/timeline.js?id=84ae2d0b7f36936d8f68"
+    "/js/timeline.js": "/js/timeline.js?id=883ad41b10ffe9765d65"
 }

resources/assets/js/components/Profile.vue

@@ -17,8 +17,11 @@
 							<div class="username-bar pb-2 d-flex align-items-center">
 								<span class="font-weight-ultralight h1">{{profile.username}}</span>
 								<span class="pl-4" v-if="profile.is_admin">
-									<span class="btn btn-outline-danger font-weight-bold py-0">ADMIN</span>
+									<span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span>
 								</span>
+								<span class="pl-4">
+									<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted"></a>
+								</span>	
 								<span class="pl-4" v-if="owner">
 									<a class="fas fa-cog fa-lg text-muted" href="/settings/home"></a>
 								</span>
@@ -44,7 +47,7 @@
 										Followers
 									</a>
 								</div>
-								<div v-if="profileSettings.following.count" class="font-weight-light pr-5">
+								<div v-if="profileSettings.following.count" class="font-weight-light">
 									<a class="text-dark cursor-pointer" v-on:click="followingModal()">
 										<span class="font-weight-bold">{{profile.following_count}}</span>
 										Following

resources/assets/js/components/Timeline.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="container" style="">
 	<div class="row">
-		<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
+		<div class="col-md-8 col-lg-8 pt-sm-2 px-0 my-sm-3 timeline order-2 order-md-1">
 			<div v-if="loading" class="text-center">
 				<div class="spinner-border" role="status">
 					<span class="sr-only">Loading...</span>
 				</div>
 			</div>
-			<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
+			<div class="card mb-sm-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
 
 				<div class="card-header d-inline-flex align-items-center bg-white">
 					<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">

resources/assets/sass/custom.scss

@@ -38,8 +38,7 @@ body, button, input, textarea {
 }
 
 .search-form {
-  min-width: 125px;
-  width: 265px;
+  width: 100%;
 }
 
 .search-form input,
@@ -539,3 +538,16 @@ details summary::-webkit-details-marker {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.tooltip-notification .tooltip-inner {
+    max-width: 200px;
+    padding: 3px 8px;
+    color: #fff;
+    text-align: center;
+    background-color: #dc3545;
+    border-radius: .25rem;
+}
+
+.tooltip-notification .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
+    border-top-color: #dc3545; 
+}

resources/views/layouts/app.blade.php

@@ -39,7 +39,7 @@
     @if(Auth::check())
     <div class="d-block d-sm-none mt-5"></div>
     <div class="d-block d-sm-none fixed-bottom">
-        <div class="card card-body rounded-0 py-2 d-flex align-items-middle">
+        <div class="card card-body rounded-0 py-2 d-flex align-items-middle box-shadow" style="border-top:1px solid #F1F5F8">
             <ul class="nav nav-pills nav-fill">
               <li class="nav-item">
                 <a class="nav-link {{request()->is('/')?'text-primary':'text-muted'}}" href="/"><i class="fas fa-home fa-lg"></i></a>
@@ -48,13 +48,13 @@
                 <a class="nav-link {{request()->is('timeline/public')?'text-primary':'text-muted'}}" href="/timeline/public"><i class="far fa-map fa-lg"></i></a>
               </li>
               <li class="nav-item">
-                <div class="nav-link text-black cursor-pointer" data-toggle="modal" data-target="#composeModal"><i class="fas fa-camera-retro fa-lg"></i></div>
+                <div class="nav-link text-black cursor-pointer" data-toggle="modal" data-target="#composeModal"><i class="far fa-plus-square fa-lg"></i></div>
               </li>
               <li class="nav-item">
                 <a class="nav-link {{request()->is('discover')?'text-primary':'text-muted'}}" href="{{route('discover')}}"><i class="far fa-compass fa-lg"></i></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link {{request()->is(Auth::user()->username)?'text-primary':'text-muted'}}" href="{{Auth::user()->url()}}"><i class="far fa-user fa-lg"></i></a>
+                <a class="nav-link {{request()->is('account/activity')?'text-primary':'text-muted'}} tooltip-notification" href="/account/activity"><i class="far fa-bell fa-lg"></i></a>
               </li>
             </ul>
         </div>

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

@@ -7,7 +7,7 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             @auth
-            <ul class="navbar-nav ml-auto d-none d-md-block">
+            <ul class="navbar-nav ml-auto">
               <form class="form-inline search-form">
                 <input class="form-control mr-sm-2 search-form-input" placeholder="{{__('navmenu.search')}}" aria-label="search" autocomplete="off">
               </form>
@@ -36,9 +36,7 @@
                     </li>
                     
                     <li class="d-block d-md-none">
-                        <a class="nav-link" href="/account/activity" data-toggle="tooltip" title="Notifications">
-                            <i class="far fa-bell fa-lg"></i>
-                        </a>
+
                     </li>
 
                     {{-- <li class="pr-2">