chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #289 from dansup/frontend-ui-refactor 

Frontend ui refactor
This commit is contained in:
daniel 2018-06-17 22:55:47 -06:00 committed by GitHub
parent 51723d0ba2 aeb2a1679d
commit 8fb1eac801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 137 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config/app.php
View File

@ -65,7 +65,7 @@ return [
|
*/
'timezone' => 'UTC',
'timezone' => env('APP_TIMEZONE', 'UTC'),
/*
|--------------------------------------------------------------------------
@ -78,7 +78,7 @@ return [
|
*/
'locale' => 'en',
'locale' => env('APP_LOCALE', 'en'),
/*
|--------------------------------------------------------------------------
@ -91,7 +91,7 @@ return [
|
*/
'fallback_locale' => 'en',
'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
/*
|--------------------------------------------------------------------------

2
public/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

24
public/img/pixelfed-full-color.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

2
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View File

@ -1,6 +1,6 @@
{
"/js/app.js": "/js/app.js?id=10b2b118e1aa4607622d",
"/css/app.css": "/css/app.css?id=d8339100d1c73fdb7957",
"/js/app.js": "/js/app.js?id=a825e24025199f681c6c",
"/css/app.css": "/css/app.css?id=a7c64d139bb04ef8e290",
"/js/timeline.js": "/js/timeline.js?id=d9a3145c0cd21ca09172",
"/js/activity.js": "/js/activity.js?id=723dfb98bbbc96a9d39f"
}

2
resources/assets/js/components/commentform.js vendored
View File

@ -11,7 +11,7 @@ $(document).ready(function() {
let el = $(this);
let id = el.data('id');
let commentform = el.find('input[name="comment"]');
let commenttext = commentform.val();
let commenttext = $(commentform.val()).text();
let item = {item: id, comment: commenttext};
commentform.prop('disabled', true);

16
resources/assets/sass/custom.scss vendored
View File

@ -193,6 +193,13 @@ body, button, input, textarea {
}
}
@media (max-width: map-get($grid-breakpoints, "sm")) {
.card-md-rounded-0 {
border-width: 1px 0;
border-radius:0 !important;
}
}
@keyframes loading-bar {
from { background-position: 0 0; }
to { background-position: 100vw 0; }
@ -235,6 +242,12 @@ body, button, input, textarea {
background-position: 50%;
}
.status-photo img {
object-fit: contain;
max-height: calc(100vh - (6rem));
}
@keyframes fadeInDown {
0% {
opacity: 0;
@ -248,4 +261,5 @@ body, button, input, textarea {
.details-animated[open] {
animation-name: fadeInDown;
animation-duration: 0.5s;
}
}

13
resources/lang/de/navmenu.php Normal file
View File

@ -0,0 +1,13 @@
<?php
return [
'viewMyProfile' => 'Mein Profil anschauen',
'myTimeline' => 'Meine Timeline',
'publicTimeline' => '&Ouml;ffentliche Timeline',
'remoteFollow' => 'Aus der Ferne folgen',
'settings' => 'Einstellungen',
'admin' => 'Administration',
'logout' => 'Abmelden',
];

1
resources/lang/de/notification.php
View File

@ -5,5 +5,6 @@ return [
'likedPhoto' => 'gef&auml;llt dein Foto.',
'startedFollowingYou' => 'folgt dir nun.',
'commented' => 'hat deinen Post kommentiert.',
'mentionedYou' => 'hat dich erw&auml;hnt.'
];

4
resources/lang/en/profile.php
View File

@ -4,5 +4,5 @@ return [
'emptyTimeline' => 'This user has no posts yet!',
'emptyFollowers' => 'This user has no followers yet!',
'emptyFollowing' => 'This user is not following anyone yet!',
'savedWarning' => 'Only you can see what you\'ve saved',
];
'savedWarning' => 'Only you can see what you’ve saved',
];

13
resources/lang/he/navmenu.php Normal file
View File

@ -0,0 +1,13 @@
<?php
return [
'viewMyProfile' => 'צפה בפרופיל שלי',
'myTimeline' => 'ציר הזמן שלי',
'publicTimeline' => 'ציר הזמן הציבורי',
'remoteFollow' => 'עקיבה מרחוק',
'settings' => 'הגדרות',
'admin' => 'מנהל',
'logout' => 'התנתק',
];

1
resources/lang/he/notification.php
View File

@ -5,5 +5,6 @@ return [
'likedPhoto' => 'אהבו את התמונה שלך.',
'startedFollowingYou' => 'התחיל לעקוב אחריך.',
'commented' => 'הגיב על הפוסט שלך.',
'mentionedYou' => 'הזכיר אותך.'
];

4
resources/views/errors/403.blade.php
View File

@ -5,9 +5,9 @@
<div class="error-page py-5 my-5">
<div class="card mx-5">
<div class="card-body p-5">
<h1 class="text-center">403 - Forbidden</h1>
<h1 class="text-center">403 – Forbidden</h1>
</div>
</div>
</div>
</div>
@endsection
@endsection

4
resources/views/errors/404.blade.php
View File

@ -5,9 +5,9 @@
<div class="error-page py-5 my-5">
<div class="card mx-5">
<div class="card-body p-5">
<h1 class="text-center">404 - Page Not Found</h1>
<h1 class="text-center">404 – Page Not Found</h1>
</div>
</div>
</div>
</div>
@endsection
@endsection

4
resources/views/errors/503.blade.php
View File

@ -5,10 +5,10 @@
<div class="error-page py-5 my-5">
<div class="card mx-5">
<div class="card-body p-5 text-center">
<h1>503 - Service Unavailable</h1>
<h1>503 – Service Unavailable</h1>
<p class="lead mb-0">Our services are overloaded at the moment, please try again later.</p>
</div>
</div>
</div>
</div>
@endsection
@endsection

7
resources/views/layouts/partial/nav.blade.php
View File

@ -1,8 +1,7 @@
<nav class="navbar navbar-expand navbar-light navbar-laravel sticky-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="{{ url('/timeline') }}" title="Logo">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<strong class="font-weight-bold">{{ config('app.name', 'Laravel') }}</strong>
<img src="/img/pixelfed-full-color.svg" height="60px">
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
@ -79,9 +78,9 @@
</div>
</nav>
@auth
<nav class="breadcrumb d-md-none d-flex">
<nav class="breadcrumb d-md-none d-flex m-0">
<form class="form-inline search-form mx-auto">
<input class="form-control mr-sm-2 search-form-input" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
@endauth
@endauth

2
resources/views/profile/followers.blade.php
View File

@ -1,4 +1,4 @@
@extends('layouts.app',['title' => $profile->username . "'s followers"])
@extends('layouts.app',['title' => $profile->username . "’s followers"])
@section('content')

2
resources/views/profile/following.blade.php
View File

@ -1,4 +1,4 @@
@extends('layouts.app',['title' => $profile->username . "'s follows"])
@extends('layouts.app',['title' => $profile->username . "’s follows"])
@section('content')

8
resources/views/report/form.blade.php
View File

@ -22,12 +22,12 @@
<div class="row">
<div class="col-12 col-md-8 offset-md-2 my-3">
<p><a class="btn btn-light btn-block p-4 font-weight-bold" disabled>
I'm not interested in this content
I’m not interested in this content
</a></p>
</div>
<div class="col-12 col-md-8 offset-md-2 my-3">
<p><a class="btn btn-light btn-block p-4 font-weight-bold">
It's spam
It’s spam
</a></p>
</div>
<div class="col-12 col-md-8 offset-md-2 my-3">
@ -37,7 +37,7 @@
</div>
<div class="col-12 col-md-8 offset-md-2 my-3">
<p><a class="btn btn-light btn-block p-4 font-weight-bold">
It's abusive or harmful
It’s abusive or harmful
</a></p>
</div>
<div class="col-12 col-md-8 offset-md-2 my-3">
@ -51,4 +51,4 @@
</div>
</div>
@endsection
@endsection

8
resources/views/site/fediverse.blade.php
View File

@ -7,15 +7,15 @@
</div>
<hr>
<section>
<p class="lead">Fediverse is a portmanteau of "federation" and "universe". It is a common, informal name for a somewhat broad federation of social network servers.</p>
<p class="lead">Fediverse is a portmanteau of “federation” and “universe”. It is a common, informal name for a somewhat broad federation of social network servers.</p>
<p class="lead font-weight-bold text-muted mt-4">Supported Fediverse Projects</p>
<ul class="lead pl-4">
<li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> - A federated twitter alternative.</li>
<li><a href="https://pleroma.social" rel="nofollow noopener">Pleroma</a> - A federated twitter alternative.</li>
<li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> – A federated twitter alternative.</li>
<li><a href="https://pleroma.social" rel="nofollow noopener">Pleroma</a> – A federated twitter alternative.</li>
</ul>
</section>
@endsection
@push('meta')
<meta property="og:description" content="What's Fediverse">
<meta property="og:description" content="What’s Fediverse">
@endpush

2
resources/views/site/language.blade.php
View File

@ -6,7 +6,7 @@
<h3 class="font-weight-bold">Language</h3>
</div>
<hr>
<div class="alert alert-info font-weight-bold">We're still working on localization support!</div>
<div class="alert alert-info font-weight-bold">We’re still working on localization support!</div>
<p class="lead">Current Locale: <span class="font-weight-bold">{{App::getLocale()}}</span></p>
<p class="lead">Select from one of the supported languages:</p>
<ul class="list-group">

10
resources/views/site/privacy.blade.php
View File

@ -16,7 +16,7 @@
Posts, following and other public information: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public.
</li>
<li>
Direct and followers-only posts: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. Please keep in mind that the operators of the server and any receiving server may view such messages, and that recipients may screenshot, copy or otherwise re-share them. Do not share any dangerous information over PixelFed.
Direct and followers-only posts: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it’s important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. Please keep in mind that the operators of the server and any receiving server may view such messages, and that recipients may screenshot, copy or otherwise re-share them. Do not share any dangerous information over PixelFed.
</li>
<li>
IPs and other metadata: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server.
@ -27,7 +27,7 @@
<p class="lead">Any of the information we collect from you may be used in the following ways:</p>
<ul class="lead pl-4">
<li>
To provide the core functionality of PixelFed. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
To provide the core functionality of PixelFed. You can only interact with other people’s content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
</li>
<li>
To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations.
@ -57,7 +57,7 @@
<p class="lead">You may irreversibly delete your account at any time.</p>
<h4 class="font-weight-bold">Do we use cookies?</h4>
<p class="lead">Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.
<p class="lead">Yes. Cookies are small files that a site or its service provider transfers to your computer’s hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.
</p>
<p class="lead">We use cookies to understand and save your preferences for future visits.</p>
@ -66,8 +66,8 @@
<p class="lead">Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this.</p>
<p class="lead">When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password.</p>
<h4 class="font-weight-bold">Children's Online Privacy Protection Act Compliance</h4>
<p class="lead">Our site, products and services are all directed to people who are at least 13 years old. If this server is in the USA, and you are under the age of 13, per the requirements of COPPA (Children's Online Privacy Protection Act) do not use this site.</p>
<h4 class="font-weight-bold">Children’s Online Privacy Protection Act Compliance</h4>
<p class="lead">Our site, products and services are all directed to people who are at least 13 years old. If this server is in the USA, and you are under the age of 13, per the requirements of COPPA (Children’s Online Privacy Protection Act) do not use this site.</p>
<h4 class="font-weight-bold">Changes to our Privacy Policy</h4>
<p class="lead">If we decide to change our privacy policy, we will post those changes on this page.</p>

18
resources/views/status/show.blade.php
View File

@ -3,7 +3,7 @@
@section('content')
<div class="container px-0 mt-md-4">
<div class="card status-container orientation-{{$status->firstMedia()->orientation ?? 'unknown'}}">
<div class="card card-md-rounded-0 status-container orientation-{{$status->firstMedia()->orientation ?? 'unknown'}}">
<div class="row mx-0">
<div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
<div class="d-flex align-items-center status-username">
@ -87,23 +87,23 @@
</div>
</div>
<div class="card-body flex-grow-0 py-1">
<div class="reactions h3 mb-0">
<div class="reactions my-1">
<form class="d-inline-flex like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$status->id}}" data-action="like">
@csrf
<input type="hidden" name="item" value="{{$status->id}}">
<button class="btn btn-link text-dark btn-lg p-0" type="submit" title="Like!">
<span class="far fa-heart fa-lg mb-0"></span>
<button class="btn btn-link text-dark p-0 border-0" type="submit" title="Like!">
<h3 class="far fa-heart m-0"></h3>
</button>
</form>
<span class="far fa-comment pt-1 pr-3" title="Comment"></span>
<h3 class="far fa-comment pr-3 m-0" title="Comment"></h3>
@if(Auth::check())
@if(Auth::user()->profile->id === $status->profile->id || Auth::user()->is_admin == true)
<form method="post" action="/i/delete" class="d-inline-flex">
@csrf
<input type="hidden" name="type" value="post">
<input type="hidden" name="item" value="{{$status->id}}">
<button type="submit" class="btn btn-link btn-lg text-dark p-0" title="Remove">
<span class="far fa-trash-alt fa-lg mb-0"></span>
<button type="submit" class="btn btn-link text-dark p-0 border-0" title="Remove">
<h3 class="far fa-trash-alt m-0"></h3>
</button>
</form>
@endif
@ -112,8 +112,8 @@
<form class="d-inline-flex bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$status->id}}" data-action="bookmark">
@csrf
<input type="hidden" name="item" value="{{$status->id}}">
<button class="btn btn-link text-dark p-0 btn-lg" type="submit" title="Save">
<span class="far fa-bookmark fa-lg mb-0"></span>
<button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
<h3 class="far fa-bookmark m-0"></h3>
</button>
</form>
</span>

18
resources/views/status/template.blade.php
View File

@ -1,4 +1,4 @@
<div class="card my-4 status-card">
<div class="card my-4 status-card card-md-rounded-0">
<div class="card-header d-inline-flex align-items-center bg-white">
<img src="{{$item->profile->avatarUrl()}}" width="32px" height="32px" style="border-radius: 32px;">
<a class="username font-weight-bold pl-2 text-dark" href="{{$item->profile->url()}}">
@ -44,20 +44,22 @@
</a>
@endif
<div class="card-body">
<div class="reactions h3">
<form class="like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$item->id}}" data-action="like" data-count="{{$item->likes_count}}">
<div class="reactions my-1">
<form class="d-inline-flex like-form pr-3" method="post" action="/i/like" style="display: inline;" data-id="{{$item->id}}" data-action="like" data-count="{{$item->likes_count}}">
@csrf
<input type="hidden" name="item" value="{{$item->id}}">
<button class="btn btn-link text-dark p-0" type="submit" title=""Like!>
<span class="far fa-heart status-heart fa-2x"></span>
<h3 class="far fa-heart status-heart m-0"></h3>
</button>
</form>
<span class="far fa-comment status-comment-focus" title="Comment"></span>
<h3 class="far fa-comment status-comment-focus" title="Comment"></h3>
<span class="float-right">
<form class="bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$item->id}}" data-action="bookmark">
<form class="d-inline-flex bookmark-form" method="post" action="/i/bookmark" style="display: inline;" data-id="{{$item->id}}" data-action="bookmark">
@csrf
<input type="hidden" name="item" value="{{$item->id}}">
<button class="btn btn-link text-dark p-0" type="submit" title="Save"><span class="far fa-bookmark" style="font-size:25px;"></span></button>
<button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
<h3 class="far fa-bookmark m-0"></h3>
</button>
</form>
</span>
</div>
@ -103,7 +105,7 @@
<form class="comment-form" method="post" action="/i/comment" data-id="{{$item->id}}" data-truncate="true">
@csrf
<input type="hidden" name="item" value="{{$item->id}}">
<input class="form-control status-reply-input" name="comment" placeholder="Add a comment...">
<input class="form-control status-reply-input" name="comment" placeholder="Add a comment…">
</form>
</div>
</div>

2
resources/views/timeline/partial/new-form.blade.php
View File

@ -1,4 +1,4 @@
<div class="card">
<div class="card card-md-rounded-0">
<div class="card-header font-weight-bold">New Post</div>
<div class="card-body" id="statusForm">
@if (session('error'))

16
resources/views/timeline/personal.blade.php
View File

@ -6,8 +6,8 @@
@section('content')
<div class="container">
<div class="col-12 col-md-8 offset-md-2 pt-4">
<div class="container p-0">
<div class="col-md-10 col-lg-8 mx-auto pt-4 px-0">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@ -27,7 +27,7 @@
@endforeach
@if($timeline->count() == 0)
<div class="card">
<div class="card card-md-rounded-0">
<div class="card-body py-5">
<div class="d-flex justify-content-center align-items-center">
<p class="lead font-weight-bold mb-0">{{ __('timeline.emptyPersonalTimeline') }}</p>
@ -37,11 +37,11 @@
@endif
</div>
<div class="page-load-status">
<div class="infinite-scroll-request">
<div class="d-none fixed-top loading-page"></div>
<div class="page-load-status" style="display: none;">
<div class="infinite-scroll-request" style="display: none;">
<div class="fixed-top loading-page"></div>
</div>
<div class="infinite-scroll-last">
<div class="infinite-scroll-last" style="display: none;">
<h3>No more content</h3>
<p class="text-muted">
Maybe you could try
@ -49,7 +49,7 @@
more people you can follow.
</p>
</div>
<div class="infinite-scroll-error">
<div class="infinite-scroll-error" style="display: none;">
<h3>Whoops, an error</h3>
<p class="text-muted">
Try reloading the page

14
resources/views/timeline/public.blade.php
View File

@ -6,8 +6,8 @@
@section('content')
<div class="container">
<div class="col-12 col-md-8 offset-md-2 pt-4">
<div class="container px-0">
<div class="col-md-10 col-lg-8 mx-auto pt-4 px-0">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@ -28,11 +28,11 @@
@endforeach
</div>
<div class="page-load-status">
<div class="infinite-scroll-request">
<div class="d-none fixed-top loading-page"></div>
<div class="page-load-status" style="display: none;">
<div class="infinite-scroll-request" style="display: none;">
<div class="fixed-top loading-page"></div>
</div>
<div class="infinite-scroll-last">
<div class="infinite-scroll-last" style="display: none;">
<h3>No more content</h3>
<p class="text-muted">
Maybe you could try
@ -40,7 +40,7 @@
more people you can follow.
</p>
</div>
<div class="infinite-scroll-error">
<div class="infinite-scroll-error" style="display: none;">
<h3>Whoops, an error</h3>
<p class="text-muted">
Try reloading the page