Improve mobile responsiveness

resources/assets/js/components/Timeline.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="container" style="">
 	<div class="row">
-		<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline">
+		<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
 			<div class="loader text-center">
 				<div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
 			</div>
@@ -97,7 +97,7 @@
 			</div>
 		</div>
 
-		<div class="col-md-4 col-lg-4 pt-2 my-3">
+		<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2">
 			<div class="mb-4">
 				<div class="card profile-card">
 					<div class="card-body loader text-center">
@@ -116,15 +116,15 @@
 					</div>
 					<div class="card-footer bg-white py-1 d-none">
 						<div class="d-flex justify-content-between text-center">
-							<span class="pl-3">
+							<span class="pl-3 cursor-pointer" v-on:click="redirect(profile.url)">
 								<p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
 								<p class="mb-0 small text-muted">Posts</p>
 							</span>
-							<span>
+							<span class="cursor-pointer" v-on:click="redirect(profile.url + '/followers')">
 								<p class="mb-0 font-weight-bold">{{profile.followers_count}}</p>
 								<p class="mb-0 small text-muted">Followers</p>
 							</span>
-							<span class="pr-3">
+							<span class="pr-3 cursor-pointer" v-on:click="redirect(profile.url + '/following')">
 								<p class="mb-0 font-weight-bold">{{profile.following_count}}</p>
 								<p class="mb-0 small text-muted">Following</p>
 							</span>
@@ -150,22 +150,22 @@
 							<div class="media-body font-weight-light small">
 								<div v-if="n.type == 'favourite'">
 									<p class="my-0">
-										<span class="font-weight-bold">{{n.account.username}}</span> liked your post.
+										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> liked your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'comment'">
 									<p class="my-0">
-										<span class="font-weight-bold">{{n.account.username}}</span> commented on your post.
+										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> commented on your <a class="font-weight-bold" v-bind:href="replyUrl(n.status)">post</a>.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'mention'">
 									<p class="my-0">
-										<span class="font-weight-bold">{{n.account.username}}</span> mentioned you.
+										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">mentioned</a> you.
 									</p>
 								</div>
 								<div v-else-if="n.type == 'follow'">
 									<p class="my-0">
-										<span class="font-weight-bold">{{n.account.username}}</span> followed you.
+										<a :href="n.account.url" class="font-weight-bold text-dark">{{n.account.username}}</a> followed you.
 									</p>	
 								</div>
 							</div>
@@ -361,6 +361,23 @@
 				return status.url + '/edit';
 			},
 
+			redirect(url) {
+				window.location.href = url;
+				return;
+			},
+
+			replyUrl(status) {
+				let username = this.profile.username;
+				let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
+				return '/p/' + username + '/' + id;
+			},
+
+			mentionUrl(status) {
+				let username = status.account.username;
+				let id = status.id;
+				return '/p/' + username + '/' + id;
+			},
+
 			statusOwner(status) {
 				let sid = status.account.id;
 				let uid = this.profile.id;

resources/assets/js/components/searchform.js

@@ -4,8 +4,8 @@ $(document).ready(function() {
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
     queryTokenizer: Bloodhound.tokenizers.whitespace,
     remote: {
-      url: process.env.MIX_API_SEARCH + '/%QUERY',
-      wildcard: '%QUERY'
+      url: process.env.MIX_API_SEARCH + '/%QUERY%',
+      wildcard: '%QUERY%'
     }
   });
 
@@ -25,7 +25,7 @@ $(document).ready(function() {
         let res = false;
         switch(type) {
           case 'hashtag':
-            res = '<a href="'+data.url+'">' +
+            res = '<a href="'+data.url+'?src=search">' +
             '<div class="media d-flex align-items-center">' +
             '<div class="mr-3 h4 text-muted"><span class="fas fa-hashtag"></span></div>' +
             '<div class="media-body text-truncate">' +
@@ -36,7 +36,7 @@ $(document).ready(function() {
             '</a>';
           break;
           case 'profile':
-            res = '<a href="'+data.url+'">' +
+            res = '<a href="'+data.url+'?src=search">' +
             '<div class="media d-flex align-items-center">' +
             '<div class="mr-3 h4 text-muted"><span class="far fa-user"></span></div>' +
             '<div class="media-body text-truncate">' +
@@ -47,7 +47,7 @@ $(document).ready(function() {
             '</a>';
           break;
           case 'status':
-            res = '<a href="'+data.url+'">' +
+            res = '<a href="'+data.url+'?src=search">' +
             '<div class="media d-flex align-items-center">' +
             '<div class="mr-3 h4 text-muted"><img src="'+data.thumb+'" width="32px"></div>' +
             '<div class="media-body text-truncate">' +

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

@@ -2,7 +2,7 @@
     <div class="container">
         <a class="navbar-brand d-flex align-items-center" href="{{ route('timeline.personal') }}" title="Logo">
             <img src="/img/pixelfed-icon-color.svg" height="30px" class="px-2">
-            <span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">{{ config('app.name', 'Laravel') }}</span>
+            <span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">{{ config('app.name', 'pixelfed') }}</span>
         </a>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -19,20 +19,44 @@
                     <li><a class="nav-link font-weight-bold text-primary" href="{{ route('login') }}" title="Login">{{ __('Login') }}</a></li>
                     <li><a class="nav-link font-weight-bold" href="{{ route('register') }}" title="Register">{{ __('Register') }}</a></li>
                 @else
-                    <li class="pr-2">
+                    <li class="pr-md-2">
                         <a class="nav-link font-weight-bold {{request()->is('/') ?'text-primary':''}}" href="/" title="Home Timeline">
-                        {{ __('Home') }}
+                        <span class="d-block d-md-none">
+                            <i class="fas fa-home fa-lg"></i>
+                        </span>
+                        <span class="d-none d-md-block">
+                            {{ __('Home') }}
+                        </span>
                         </a>
                     </li>
-                    <li class="pr-2">
+                    <li class="pr-md-2">
                         <a class="nav-link font-weight-bold {{request()->is('timeline/public') ?'text-primary':''}}" href="/timeline/public" title="Local Timeline">
-                        {{ __('Local') }}
+                        <span class="d-block d-md-none">
+                            <i class="far fa-map fa-lg"></i>
+                        </span>
+                        <span class="d-none d-md-block">
+                            {{ __('Local') }}
+                        </span> 
                         </a>
                     </li>
-                    <li class="nav-item pr-2">
-                        <a class="nav-link font-weight-bold" href="{{route('discover')}}" title="Discover" data-toggle="tooltip" data-placement="bottom">{{ __('Discover')}}</i></a>
+                    <li class="d-block d-md-none">
+                        <a class="nav-link" href="/account/activity">
+                            <i class="fas fa-inbox fa-lg"></i>
+                        </a>
+                    </li>
+                    {{-- <li class="pr-2">
+                        <a class="nav-link font-weight-bold" href="/" title="Home">
+                        {{ __('Network') }}
+                        </a>
+                    </li> --}}
+                    <li class="nav-item pr-md-2">
+                        <a class="nav-link font-weight-bold" href="{{route('discover')}}" title="Discover" data-toggle="tooltip" data-placement="bottom">
+                        <span class="d-none d-md-block">
+                            {{ __('Discover')}}</i>
+                        </span>
+                        </a>
                     </li>
-                    <li class="nav-item pr-2">
+                    <li class="nav-item pr-md-2">
                         <div title="Create new post" data-toggle="tooltip" data-placement="bottom">
                             <a href="{{route('compose')}}" class="nav-link" data-toggle="modal" data-target="#composeModal">
                               <i class="fas fa-camera-retro fa-lg text-primary"></i>
@@ -59,7 +83,20 @@
                                 <span class="far fa-map pr-1"></span>
                                 {{__('navmenu.publicTimeline')}}
                             </a>
+
+                            <a class="d-block d-md-none dropdown-item font-weight-bold" href="/i/discover">
+                                <span class="far fa-compass pr-1"></span>
+                                {{__('Discover')}}
+                            </a>
+                            {{-- <a class="dropdown-item font-weight-bold" href="{{route('messages')}}">
+                                <span class="far fa-envelope pr-1"></span>
+                                {{__('navmenu.directMessages')}}
+                            </a> --}}
                             <div class="dropdown-divider"></div>
+                            {{-- <a class="dropdown-item font-weight-bold" href="{{route('remotefollow')}}">
+                                <span class="fas fa-user-plus pr-1"></span>
+                                {{__('navmenu.remoteFollow')}}
+                            </a> --}}
                             <a class="dropdown-item font-weight-bold" href="{{route('settings')}}">
                                 <span class="fas fa-cog pr-1"></span>
                                 {{__('navmenu.settings')}}