UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-29 09:43:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve mobile responsiveness

Browse source
This commit is contained in:
Daniel Supernault 2018-12-16 01:59:30 -07:00
parent 2336d09cd0
commit e2e815eb4f
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
5 changed files with 76 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/js/components.js vendored
View file

Binary file not shown.

BIN
public/mix-manifest.json
View file

Binary file not shown.

35
resources/assets/js/components/Timeline.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="container" style=""> <div class="container" style="">
<div class="row"> <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="loader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div> <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div> </div>
@ -97,7 +97,7 @@
</div> </div>
</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="mb-4">
<div class="card profile-card"> <div class="card profile-card">
<div class="card-body loader text-center"> <div class="card-body loader text-center">
@ -116,15 +116,15 @@
</div> </div>
<div class="card-footer bg-white py-1 d-none"> <div class="card-footer bg-white py-1 d-none">
<div class="d-flex justify-content-between text-center"> <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 font-weight-bold">{{profile.statuses_count}}</p>
<p class="mb-0 small text-muted">Posts</p> <p class="mb-0 small text-muted">Posts</p>
</span> </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 font-weight-bold">{{profile.followers_count}}</p>
<p class="mb-0 small text-muted">Followers</p> <p class="mb-0 small text-muted">Followers</p>
</span> </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 font-weight-bold">{{profile.following_count}}</p>
<p class="mb-0 small text-muted">Following</p> <p class="mb-0 small text-muted">Following</p>
</span> </span>
@ -150,22 +150,22 @@
<div class="media-body font-weight-light small"> <div class="media-body font-weight-light small">
<div v-if="n.type == 'favourite'"> <div v-if="n.type == 'favourite'">
<p class="my-0"> <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> </p>
</div> </div>
<div v-else-if="n.type == 'comment'"> <div v-else-if="n.type == 'comment'">
<p class="my-0"> <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> </p>
</div> </div>
<div v-else-if="n.type == 'mention'"> <div v-else-if="n.type == 'mention'">
<p class="my-0"> <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> </p>
</div> </div>
<div v-else-if="n.type == 'follow'"> <div v-else-if="n.type == 'follow'">
<p class="my-0"> <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> </p>
</div> </div>
</div> </div>
@ -361,6 +361,23 @@
return status.url + '/edit'; 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) { statusOwner(status) {
let sid = status.account.id; let sid = status.account.id;
let uid = this.profile.id; let uid = this.profile.id;

10
resources/assets/js/components/searchform.js vendored
View file

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

49
resources/views/layouts/partial/nav.blade.php
View file

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<a class="navbar-brand d-flex align-items-center" href="{{ route('timeline.personal') }}" title="Logo"> <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"> <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> </a>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <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 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> <li><a class="nav-link font-weight-bold" href="{{ route('register') }}" title="Register">{{ __('Register') }}</a></li>
@else @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"> <a class="nav-link font-weight-bold {{request()->is('/') ?'text-primary':''}}" href="/" title="Home Timeline">
<span class="d-block d-md-none">
<i class="fas fa-home fa-lg"></i>
</span>
<span class="d-none d-md-block">
{{ __('Home') }} {{ __('Home') }}
</span>
</a> </a>
</li> </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"> <a class="nav-link font-weight-bold {{request()->is('timeline/public') ?'text-primary':''}}" href="/timeline/public" title="Local Timeline">
<span class="d-block d-md-none">
<i class="far fa-map fa-lg"></i>
</span>
<span class="d-none d-md-block">
{{ __('Local') }} {{ __('Local') }}
</span>
</a> </a>
</li> </li>
<li class="nav-item pr-2"> <li class="d-block d-md-none">
<a class="nav-link font-weight-bold" href="{{route('discover')}}" title="Discover" data-toggle="tooltip" data-placement="bottom">{{ __('Discover')}}</i></a> <a class="nav-link" href="/account/activity">
<i class="fas fa-inbox fa-lg"></i>
</a>
</li> </li>
<li class="nav-item pr-2"> {{-- <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-md-2">
<div title="Create new post" data-toggle="tooltip" data-placement="bottom"> <div title="Create new post" data-toggle="tooltip" data-placement="bottom">
<a href="{{route('compose')}}" class="nav-link" data-toggle="modal" data-target="#composeModal"> <a href="{{route('compose')}}" class="nav-link" data-toggle="modal" data-target="#composeModal">
<i class="fas fa-camera-retro fa-lg text-primary"></i> <i class="fas fa-camera-retro fa-lg text-primary"></i>
@ -59,7 +83,20 @@
<span class="far fa-map pr-1"></span> <span class="far fa-map pr-1"></span>
{{__('navmenu.publicTimeline')}} {{__('navmenu.publicTimeline')}}
</a> </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> <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')}}"> <a class="dropdown-item font-weight-bold" href="{{route('settings')}}">
<span class="fas fa-cog pr-1"></span> <span class="fas fa-cog pr-1"></span>
{{__('navmenu.settings')}} {{__('navmenu.settings')}}