beenull/XBackBone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved user gallery

Browse source 
Small layout changes
updated dependencies
This commit is contained in:
Sergio Brighenti 2018-11-28 14:57:04 +01:00
parent 1d345cf61e
commit f639f4ee57
16 changed files with 95 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
CHANGELOG.md
View file

@ -1,3 +1,12 @@
## v2.3
+ Improved image scaling in user gallery.
+ Added overlay on user gallery images.
+ Fixed IT translation.
+ Fontawesome icon match the single file mime-type.
+ Enable audio player with video.js.
+ Video and audio now starts with volume at 50%.
+ Minor layout fixes.
## v2.2
+ Added multi-language support.
+ Improved routing.

9
app/Web/Lang.php
View file

@ -67,6 +67,15 @@ class Lang
return self::$instance;
}
/**
* Recognize the current language from the request.
* @return bool|string
*/
public static function recognize()
{
return substr(@$_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
}
/**
* @param $key

2
bootstrap/app.php
View file

@ -58,7 +58,7 @@ $container['database'] = function ($container) use (&$config) {
return DB::getInstance();
};
Lang::build(substr(@$_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2), __DIR__. '/../resources/lang/');
Lang::build(Lang::recognize(), __DIR__. '/../resources/lang/');
$container['view'] = function ($container) use (&$config) {
$view = new \Slim\Views\Twig(__DIR__ . '/../resources/templates', [

22
composer.lock generated
View file

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically"
],
"content-hash": "61a3ac382bb0960dd8e44736c0be5178",
"content-hash": "b7bca0067b8963611274642752122ecb",
"packages": [
{
"name": "container-interop/container-interop",
@ -174,16 +174,16 @@
},
{
"name": "league/flysystem",
"version": "1.0.48",
"version": "1.0.49",
"source": {
"type": "git",
"url": "https://github.com/thephpleague/flysystem.git",
"reference": "a6ded5b2f6055e2db97b4b859fdfca2b952b78aa"
"reference": "a63cc83d8a931b271be45148fa39ba7156782ffd"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/thephpleague/flysystem/zipball/a6ded5b2f6055e2db97b4b859fdfca2b952b78aa",
"reference": "a6ded5b2f6055e2db97b4b859fdfca2b952b78aa",
"url": "https://api.github.com/repos/thephpleague/flysystem/zipball/a63cc83d8a931b271be45148fa39ba7156782ffd",
"reference": "a63cc83d8a931b271be45148fa39ba7156782ffd",
"shasum": ""
},
"require": {
@ -254,7 +254,7 @@
"sftp",
"storage"
],
"time": "2018-10-15T13:53:10+00:00"
"time": "2018-11-23T23:41:29+00:00"
},
{
"name": "monolog/monolog",
@ -531,16 +531,16 @@
},
{
"name": "psr/log",
"version": "1.0.2",
"version": "1.1.0",
"source": {
"type": "git",
"url": "https://github.com/php-fig/log.git",
"reference": "4ebe3a8bf773a19edfe0a84b6585ba3d401b724d"
"reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/php-fig/log/zipball/4ebe3a8bf773a19edfe0a84b6585ba3d401b724d",
"reference": "4ebe3a8bf773a19edfe0a84b6585ba3d401b724d",
"url": "https://api.github.com/repos/php-fig/log/zipball/6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
"reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
"shasum": ""
},
"require": {
@ -574,7 +574,7 @@
"psr",
"psr-3"
],
"time": "2016-10-10T12:19:37+00:00"
"time": "2018-11-20T15:27:04+00:00"
},
{
"name": "slim/slim",

4
resources/lang/it.lang.php
View file

@ -28,7 +28,7 @@ return [
'public.delete_text' => 'Sei sicuro di voler eliminare questo elemento? Andrà perso per sempre!',
'preview' => 'Anteprima',
'filename' => 'Filename',
'filename' => 'Nome file',
'size' => 'Dimensione',
'public' => 'Pubblico',
'owner' => 'Proprietario',
@ -57,7 +57,7 @@ return [
'copy' => 'Copia',
'update' => 'Aggiorna',
'edit' => 'Modifica',
'client_config' => 'Configurazione del Client',
'client_config' => 'Config. client',
'user_code' => 'Codice Utente',
'active' => 'Attivo',
'admin' => 'Amministratore',

2
resources/templates/base.twig
View file

@ -17,7 +17,7 @@
<script src="{{ urlFor('/static/videojs/video.min.js') }}"></script>
<script src="{{ urlFor('/static/app/app.js') }}"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>window.AppConfig = {'base_url': '{{ config.base_url }}'}</script>
<script>window.AppConfig = {'base_url': '{{ config.base_url }}', 'lang': {'publish': '{{ lang('publish') }}', 'hide': '{{ lang('hide') }}'}}</script>
{% block head %}{% endblock %}
</head>
<body>

4
resources/templates/comp/navbar.twig
View file

@ -1,4 +1,4 @@
<nav class="navbar navbar-dark bg-primary navbar-expand-md mb-4 box-shadow">
<nav class="navbar navbar-dark bg-primary navbar-expand-md mb-4 shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ route('root') }}">{{ config.app_name }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@ -29,7 +29,7 @@
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-fw fa-user"></i> {{ session.username }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<div class="dropdown-menu shadow-sm" aria-labelledby="userDropdown">
<a class="dropdown-item disabled" href="javascript:void(0)">{{ lang('used') }}: {{ session.used_space }}</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('profile') }}"><i class="fas fa-fw fa-user"></i> {{ lang('profile') }}</a>

9
resources/templates/dashboard/admin.twig
View file

@ -7,7 +7,7 @@
<div class="container">
{% include 'comp/alert.twig' %}
{% if medias|length > 0 %}
<div class="card box-shadow">
<div class="card shadow-sm">
<div class="card-body">
{% include 'comp/pager.twig' with {'path': 'home'} %}
<div class="row">
@ -28,16 +28,15 @@
<tbody>
{% for media in medias %}
<tr id="media_{{ media.id }}">
<td>
<td class="text-center">
{% if media.mimetype starts with 'image' %}
{% if media.username is not null %}
<img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=128') }}"
class="img-fluid rounded admin-img">
<img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=256&height=128') }}" class="img-fluid rounded admin-img">
{% else %}
<img src="{{ route('upload.raw', {'id': media.id}) }}" class="img-fluid rounded admin-img">
{% endif %}
{% else %}
<i class="far fa-file fa-2x"></i>
<i class="far {{ mime2font(media.mimetype) }} fa-2x"></i>
{% endif %}
</td>
<td>{{ media.filename }}</td>

40
resources/templates/dashboard/home.twig
View file

@ -11,28 +11,36 @@
<div class="row">
{% for media in medias %}
<div class="col-md-4" id="media_{{ media.id }}">
<div class="card mb-4 box-shadow">
<div class="card mb-4 shadow-sm">
{% if media.mimetype starts with 'image' %}
<img class="card-img" src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=286&height=219') }}" alt="Card image">
{% else %}
<div class="text-center" style="font-size: 178px;"><i class="far {{ mime2font(media.mimetype) }} mb-4 mt-4"></i></div>
{% endif %}
<div class="card-img-overlay" title="{{ media.filename }}">
<div class="user-img-buttons">
<span class="badge badge-dark box-shadow-strong">{{ media.size }}</span>
<div class="btn-group box-shadow-strong float-right">
<a class="btn btn-sm btn-light" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" data-toggle="tooltip" title="{{ lang('open') }}" target="_blank"><i class="fas fa-external-link-alt"></i></a>
<button type="button" class="btn btn-sm btn-success btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}">
<i class="fas fa-link"></i>
</button>
{% if media.published %}
<a href="javascript:void(0)" class="btn btn-sm btn-warning publish-toggle" data-toggle="tooltip" title="{{ lang('hide') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-times-circle"></i></a>
{% else %}
<a href="javascript:void(0)" class="btn btn-sm btn-info publish-toggle" data-toggle="tooltip" title="{{ lang('publish') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-check-circle"></i></a>
{% endif %}
<button type="button" class="btn btn-sm btn-danger media-delete" data-link="{{ route('upload.delete', {'id': media.id}) }}" data-id="{{ media.id }}" data-toggle="tooltip" title="{{ lang('delete') }}">
<i class="fas fa-trash"></i>
</button>
<div class="user-img-overlay h-75">
<div class="row">
<div class="col-12">
<span class="badge badge-dark shadow-lg">{{ media.size }}</span>
<div class="btn-group shadow-lg float-right">
<button type="button" class="btn btn-sm btn-success btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}">
<i class="fas fa-link"></i>
</button>
{% if media.published %}
<a href="javascript:void(0)" class="btn btn-sm btn-warning publish-toggle" data-toggle="tooltip" title="{{ lang('hide') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-times-circle"></i></a>
{% else %}
<a href="javascript:void(0)" class="btn btn-sm btn-info publish-toggle" data-toggle="tooltip" title="{{ lang('publish') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-check-circle"></i></a>
{% endif %}
<button type="button" class="btn btn-sm btn-danger media-delete" data-link="{{ route('upload.delete', {'id': media.id}) }}" data-id="{{ media.id }}" data-toggle="tooltip" title="{{ lang('delete') }}">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
<div class="row h-100">
<div class="col-12 d-flex align-items-center">
<a class="btn btn-link btn-block btn-outlink text-secondary" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
</div>

12
resources/templates/dashboard/system.twig
View file

@ -7,7 +7,7 @@
<div class="container">
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card bg-success text-white h-100 box-shadow">
<div class="card bg-success text-white h-100 shadow-sm">
<div class="card-body bg-success">
<div class="rotate">
<i class="fas fa-users fa-3x"></i>
@ -18,7 +18,7 @@
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card bg-danger text-white h-100 box-shadow">
<div class="card bg-danger text-white h-100 shadow-sm">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fas fa-weight fa-3x"></i>
@ -29,7 +29,7 @@
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card bg-warning text-white h-100 box-shadow">
<div class="card bg-warning text-white h-100 shadow-sm">
<div class="card-body bg-warning">
<div class="rotate">
<i class="fas fa-upload fa-3x"></i>
@ -40,7 +40,7 @@
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card bg-dark text-white h-100 box-shadow">
<div class="card bg-dark text-white h-100 shadow-sm">
<div class="card-body bg-dark">
<div class="rotate">
<i class="fas fa-unlink fa-3x"></i>
@ -53,7 +53,7 @@
</div>
<div class="row">
<div class="col-md-8">
<div class="card box-shadow">
<div class="card shadow-sm">
<div class="card-header"><i class="fas fa-paint-brush fa-fw"></i> {{ lang('theme') }}</div>
<div class="card-body">
<form method="post" action="{{ route('theme.apply') }}">
@ -76,7 +76,7 @@
</div>
</div>
<div class="col-md-4">
<div class="card box-shadow">
<div class="card shadow-sm">
<div class="card-header"><i class="fas fa-cog fa-fw"></i> {{ lang('system_info') }}</div>
<div class="card-body">
<strong>Max upload size:</strong>

8
resources/templates/upload/public.twig
View file

@ -16,7 +16,7 @@
data-content='<input type="text" class="form-control mb-2" id="telegram-share-text" onclick="this.select()" value="{{ media.filename }}">
<button type="button" class="btn btn-info btn-block" id="telegram-share-button" onclick="app.telegramShare()" data-url="https://telegram.me/share/url?url={{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension) }}&text="><i class="fab fa-telegram-plane fa-lg fa-fw"></i> {{ lang("send") }}</button>'><i
class="fab fa-telegram-plane fa-lg fa-fw"></i></a>
<a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="btn btn-light my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
<a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="btn btn-secondary my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
<a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-danger my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('download') }}"><i class="fas fa-cloud-download-alt fa-lg fa-fw"></i></a>
</div>
</div>
@ -61,18 +61,16 @@
</div>
{% elseif media.mimetype starts with 'video' %}
<div class="media-player">
<video class="video-js vjs-fluid vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true, "preload": "auto", "responsive": true}'>
<video id="player" class="video-js vjs-fluid vjs-big-play-centered" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
<source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
Your browser does not support HTML5 video.
<a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
</video>
</div>
{% elseif media.mimetype starts with 'audio' %}
<div class="media-player">
<audio class="video-js vjs-fluid vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true, "preload": "auto", "responsive": true}'>
<audio id="player" class="video-js vjs-fluid vjs-big-play-centered" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
<source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
Your browser does not support HTML5 audio.
<a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
</audio>
</div>
{% else %}

2
resources/templates/user/create.twig
View file

@ -8,7 +8,7 @@
{% include 'comp/alert.twig' %}
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card box-shadow">
<div class="card shadow-sm">
<div class="card-header">{{ lang('user.create') }}</div>
<div class="card-body">
<form method="post" action="{{ route('user.store') }}">

4
resources/templates/user/edit.twig
View file

@ -8,7 +8,7 @@
{% include 'comp/alert.twig' %}
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card box-shadow">
<div class="card shadow-sm">
{% if not profile %}
<div class="card-header">{{ lang('user.edit') }}</div>
{% endif %}
@ -51,7 +51,7 @@
<div class="form-group row">
<label class="col-sm-2 col-form-label">{{ lang('client_config') }}</label>
<div class="col-sm-10">
<a href="{{ route('config.sharex', {'id': user.id}) }}" class="btn btn-lg btn-outline-dark"><i class="fas fa-fw fa-download"></i> ShareX Config File</a>
<a href="{{ route('config.sharex', {'id': user.id}) }}" class="btn btn-lg btn-outline-dark"><i class="fas fa-fw fa-download"></i> ShareX Config</a>
</div>
</div>
{% if not profile %}

2
resources/templates/user/index.twig
View file

@ -6,7 +6,7 @@
{% include 'comp/navbar.twig' %}
<div class="container">
{% include 'comp/alert.twig' %}
<div class="card box-shadow">
<div class="card shadow-sm">
<div class="card-body">
<div class="text-right">
<a href="{{ route('user.create') }}" class="btn btn-outline-success mb-3"><i class="fas fa-plus"></i> {{ lang('user.create') }}</a>

22
src/css/app.css
View file

@ -41,14 +41,6 @@ body {
border-top-right-radius: 0;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
.box-shadow-strong {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}
.admin-img {
max-height: 25px;
}
@ -60,20 +52,28 @@ body {
max-width: 200px;
}
.user-img-buttons {
.user-img-overlay {
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.card-img-overlay:hover .user-img-buttons {
.card-img-overlay:hover .user-img-overlay {
opacity: 1;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.btn-outlink {
padding: 25% 0;
}
.btn-outlink:hover, .btn-outlink:active, .btn-outlink:focus, .btn-outlink:not(:disabled):not(.disabled):focus {
background-color: transparent;
}
.footer {
position: absolute;
bottom: 0;
@ -83,7 +83,7 @@ body {
text-align: right;
}
.media-player{
.media-player {
width: 80%;
margin-right: auto;
margin-left: auto;

10
src/js/app.js
View file

@ -15,6 +15,12 @@ var app = {
new ClipboardJS('.btn-clipboard');
if ($('#player').length > 0) {
videojs('player').ready(function () {
this.volume(0.5);
});
}
console.log('Application is ready.');
},
modalDelete: function () {
@ -29,7 +35,7 @@ var app = {
$callerButton
.data('published', false)
.tooltip('dispose')
.attr('title', 'Publish')
.attr('title', window.AppConfig.lang.publish)
.tooltip()
.removeClass('btn-warning')
.addClass('btn-info')
@ -41,7 +47,7 @@ var app = {
$callerButton
.data('published', true)
.tooltip('dispose')
.attr('title', 'Unpublish')
.attr('title', window.AppConfig.lang.hide)
.tooltip()
.removeClass('btn-info')
.addClass('btn-warning')