#20: Numerous visual improvements, plus converting the slideshow to VueJS. Also re-enabled the user autocomplete
This commit is contained in:
Andy Heathershaw
parent
aef3dfbdeb
commit
336e94e8e3
3
.idea/deployment.xml
generated
3
.idea/deployment.xml
generated
@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="PublishConfigData" autoUpload="On explicit save action" serverName="Development">
|
||||
<component name="PublishConfigData" serverName="Development">
|
||||
<serverData>
|
||||
<paths name="Development">
|
||||
<serverdata>
|
||||
@ -10,6 +10,5 @@
|
||||
</serverdata>
|
||||
</paths>
|
||||
</serverData>
|
||||
<option name="myAutoUpload" value="ON_EXPLICIT_SAVE" />
|
||||
</component>
|
||||
</project>
|
||||
2
.idea/webServers.xml
generated
2
.idea/webServers.xml
generated
@ -3,7 +3,7 @@
|
||||
<component name="WebServers">
|
||||
<option name="servers">
|
||||
<webServer id="b14a34b0-0127-4886-964a-7be75a2281ac" name="Development" url="http://blue-twilight-dev.andys.eu">
|
||||
<fileTransfer host="scar.andys.eu" port="22" privateKey="$USER_HOME$/.ssh/id_rsa" rootFolder="/srv/www/blue-twilight-dev" accessType="SFTP" keyPair="true">
|
||||
<fileTransfer host="scar.andys.eu" port="22" privateKey="C:\Users\andy.heathershaw\Documents\SSH Key\AndyHeathershaw-OpenSSH" rootFolder="/srv/www/blue-twilight-dev" accessType="SFTP" keyPair="true">
|
||||
<advancedOptions>
|
||||
<advancedOptions dataProtectionLevel="Private" />
|
||||
</advancedOptions>
|
||||
|
||||
@ -88,7 +88,6 @@ class UserController extends Controller
|
||||
$user->password = bcrypt($user->password);
|
||||
$user->is_activated = true;
|
||||
$user->is_admin = (strtolower($request->get('is_admin')) == 'on');
|
||||
$user->can_create_albums = (strtolower($request->get('can_create_albums')) == 'on');
|
||||
$user->save();
|
||||
|
||||
return redirect(route('users.index'));
|
||||
@ -174,8 +173,6 @@ class UserController extends Controller
|
||||
$user->is_admin = (strtolower($request->get('is_admin')) == 'on');
|
||||
}
|
||||
|
||||
$user->can_create_albums = (strtolower($request->get('can_create_albums')) == 'on');
|
||||
|
||||
// Manually activate account if requested
|
||||
if (strtolower($request->get('is_activated')) == 'on')
|
||||
{
|
||||
|
||||
@ -15,7 +15,7 @@ class User extends Authenticatable
|
||||
* @var array
|
||||
*/
|
||||
protected $fillable = [
|
||||
'name', 'email', 'password', 'is_admin', 'is_activated', 'activation_token', 'can_create_albums'
|
||||
'name', 'email', 'password', 'is_admin', 'is_activated', 'activation_token'
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
39
public/css/blue-twilight.css
vendored
39
public/css/blue-twilight.css
vendored
@ -89,6 +89,45 @@ textarea {
|
||||
.tether-element.tether-open {
|
||||
display: block; }
|
||||
|
||||
.tt-query {
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.tt-menu { /* used to be tt-dropdown-menu in older versions */
|
||||
width: 422px;
|
||||
margin-top: 4px;
|
||||
padding: 4px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-cursor,.tt-suggestion:hover {
|
||||
color: #fff;
|
||||
background-color: #0097cf;
|
||||
|
||||
}
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
/*!
|
||||
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
|
||||
2
public/css/blue-twilight.min.css
vendored
2
public/css/blue-twilight.min.css
vendored
@ -1,4 +1,4 @@
|
||||
.admin-sidebar-card{margin-bottom:15px}.album-expand-handle{cursor:pointer;margin-top:5px}.card-header.card-danger{color:#fff;font-weight:bold}.photo .loading{background-color:#fff;display:none;height:100%;left:0;opacity:.8;position:absolute;text-align:center;top:0;width:100%;z-index:1000}.photo .loading img{margin-top:40px}html{font-size:14px !important}button,input,optgroup,select,textarea{cursor:pointer;font-family:inherit !important}.album-photo-cards .card{margin-bottom:15px}.container,.container-fluid{margin-top:20px}.hidden{display:none}.tab-content{border:solid 1px #ddd;border-top:0;padding:20px}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,0.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}/*!
|
||||
.admin-sidebar-card{margin-bottom:15px}.album-expand-handle{cursor:pointer;margin-top:5px}.card-header.card-danger{color:#fff;font-weight:bold}.photo .loading{background-color:#fff;display:none;height:100%;left:0;opacity:.8;position:absolute;text-align:center;top:0;width:100%;z-index:1000}.photo .loading img{margin-top:40px}html{font-size:14px !important}button,input,optgroup,select,textarea{cursor:pointer;font-family:inherit !important}.album-photo-cards .card{margin-bottom:15px}.container,.container-fluid{margin-top:20px}.hidden{display:none}.tab-content{border:solid 1px #ddd;border-top:0;padding:20px}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,0.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tt-query{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.tt-hint{color:#999}.tt-menu{width:422px;margin-top:4px;padding:4px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.tt-suggestion{padding:3px 20px;line-height:24px}.tt-suggestion.tt-cursor,.tt-suggestion:hover{color:#fff;background-color:#0097cf}.tt-suggestion p{margin:0}/*!
|
||||
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
19
public/js/blue-twilight.min.js
vendored
19
public/js/blue-twilight.min.js
vendored
File diff suppressed because one or more lines are too long
39
resources/assets/css/typeahead.css
vendored
Normal file
39
resources/assets/css/typeahead.css
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
.tt-query {
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.tt-menu { /* used to be tt-dropdown-menu in older versions */
|
||||
width: 422px;
|
||||
margin-top: 4px;
|
||||
padding: 4px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-cursor,.tt-suggestion:hover {
|
||||
color: #fff;
|
||||
background-color: #0097cf;
|
||||
|
||||
}
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -459,10 +459,76 @@ function EditPhotosViewModel(album_id, language, urls) {
|
||||
|
||||
// Hide the dropdown
|
||||
$(link_item).dropdown('toggle');
|
||||
},
|
||||
switchToUploadTab: function (e) {
|
||||
$('.nav-tabs a[href="#upload-tab"]').tab('show');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function SlideShowViewModel(required_timeout_ms) {
|
||||
this.el = '#slideshow-container';
|
||||
|
||||
this.data = {
|
||||
current: null,
|
||||
currentIndex: 0,
|
||||
images: [],
|
||||
interval: null,
|
||||
isPaused: false,
|
||||
isRunning: false
|
||||
};
|
||||
|
||||
this.methods = {
|
||||
changeCurrentImage: function(photo_id)
|
||||
{
|
||||
for (var i = 0; i < this.images.length; i++)
|
||||
{
|
||||
var this_image = this.images[i];
|
||||
if (this_image.id === photo_id)
|
||||
{
|
||||
this.current = this_image;
|
||||
this.currentIndex = i;
|
||||
window.clearInterval(this.interval);
|
||||
this.interval = window.setInterval(this.rotateNextImage, required_timeout_ms);
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
continueSlideshow: function() {
|
||||
this.isPaused = false;
|
||||
this.interval = window.setInterval(this.rotateNextImage, required_timeout_ms);
|
||||
},
|
||||
pauseSlideshow: function(e) {
|
||||
this.isPaused = true;
|
||||
window.clearInterval(this.interval);
|
||||
},
|
||||
rotateNextImage: function() {
|
||||
var next_index = this.currentIndex + 1;
|
||||
if (next_index >= this.images.length)
|
||||
{
|
||||
next_index = 0;
|
||||
}
|
||||
|
||||
this.current = this.images[next_index];
|
||||
this.currentIndex = next_index;
|
||||
},
|
||||
startSlideshow: function() {
|
||||
if (this.images.length <= 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.interval = window.setInterval(this.rotateNextImage, required_timeout_ms);
|
||||
|
||||
this.current = this.images[0];
|
||||
this.isRunning = true;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* This model is used by admin/show_album.blade.php to handle photo uploads.
|
||||
* @param album_id ID of the album the photos are being uploaded to
|
||||
|
||||
2451
resources/assets/js/typeahead.bundle.js
Normal file
2451
resources/assets/js/typeahead.bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -10,6 +10,7 @@ return [
|
||||
'album_basic_info_intro' => 'The album\'s name and description are displayed to visitors in the gallery. If you wish to change them, you can do so below.',
|
||||
'album_no_photos_p1' => 'No photos in this album',
|
||||
'album_no_photos_p2' => 'Click the "Upload photos" button below to get started.',
|
||||
'album_no_photos_p2_no_upload' => 'The album\'s owner has not uploaded any photos yet.',
|
||||
'album_no_photos_button' => 'Upload photos',
|
||||
'album_permissions_album' => 'Album Permissions',
|
||||
'album_permissions_photo' => 'Photo Permissions',
|
||||
|
||||
@ -7,7 +7,6 @@ return [
|
||||
'apply_action' => 'Apply',
|
||||
'bulk_edit_photos_label' => 'Bulk edit selected photos:',
|
||||
'bulk_edit_photos_placeholder' => 'Select an action',
|
||||
'can_create_albums_label' => 'User can create new albums',
|
||||
'cancel_action' => 'Cancel',
|
||||
'continue_action' => 'Continue',
|
||||
'create_action' => 'Create',
|
||||
|
||||
@ -9,5 +9,7 @@ return [
|
||||
],
|
||||
'back_to_album' => 'Back to :name',
|
||||
'index_no_results_heading' => 'Start something amazing',
|
||||
'index_no_results_text' => 'This gallery is currently empty. If you are the owner of this gallery, you can create new albums and upload photos using the :admin_link.'
|
||||
'index_no_results_text' => 'This gallery is currently empty. If you are the owner of this gallery, you can create new albums and upload photos using the :admin_link.',
|
||||
'other_albums_description' => 'You may also be interested in the following albums.',
|
||||
'other_albums_heading' => 'More Albums in :album_name'
|
||||
];
|
||||
@ -82,13 +82,6 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" name="can_create_albums">
|
||||
@lang('forms.can_create_albums_label')
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<a href="{{ route('users.index') }}" class="btn btn-link">@lang('forms.cancel_action')</a>
|
||||
<button type="submit" class="btn btn-success"><i class="fa fa-fw fa-check"></i> @lang('forms.create_action')</button>
|
||||
|
||||
@ -94,13 +94,6 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" name="can_create_albums"@if ($user->can_create_albums) checked="checked"@endif>
|
||||
@lang('forms.can_create_albums_label')
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@if (!$user->is_activated)
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
|
||||
@ -97,10 +97,6 @@
|
||||
@endforeach
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#upload-button').click(function() {
|
||||
$('.nav-tabs a[href="#upload-tab"]').tab('show');
|
||||
});
|
||||
|
||||
{{-- Photo uploads using AJAX --}}
|
||||
if (window.FormData)
|
||||
{
|
||||
@ -135,10 +131,9 @@
|
||||
});
|
||||
|
||||
{{-- Type-ahead support for users textbox on the permissions tab --}}
|
||||
/*var userDataSource = new Bloodhound({
|
||||
var userDataSource = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
//prefetch: '../data/films/post_1960.json',
|
||||
remote: {
|
||||
url: '{{ route('users.searchJson') }}?q=%QUERY',
|
||||
wildcard: '%QUERY'
|
||||
@ -152,7 +147,7 @@
|
||||
});
|
||||
$('#user-search-textbox').bind('typeahead:select', function(ev, suggestion) {
|
||||
$('#user-id-field').val(suggestion.id);
|
||||
});*/
|
||||
});
|
||||
|
||||
// Bind the view models to the relevant tab
|
||||
var appEdit = new Vue(editViewModel);
|
||||
|
||||
@ -4,36 +4,34 @@
|
||||
@php ($hasChildren = $album->children()->count() > 0)
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
@include(Theme::viewName('partials.album_breadcrumb'))
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid album-container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="pull-right">
|
||||
@include(\App\Facade\Theme::viewName('partials.album_view_selector'))
|
||||
<div class="col-xl-8 offset-xl-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
@include(Theme::viewName('partials.album_breadcrumb'))
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">{{ $album->name }}</h1>
|
||||
<p>{{ $album->description }}</p>
|
||||
<div class="clearfix"><!-- --></div>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="pull-right">
|
||||
@include(\App\Facade\Theme::viewName('partials.album_view_selector'))
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">{{ $album->name }}</h1>
|
||||
<p>{{ $album->description }}</p>
|
||||
<div class="clearfix"><!-- --></div>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="{{ $hasChildren ? 'col-md-8' : 'col-md-10 offset-md-1' }}">
|
||||
<div class="row">
|
||||
@foreach ($photos as $photo)
|
||||
<div class="{{ $hasChildren ? 'col-sm-6 col-md-6 col-lg-4' : 'col-sm-6 col-md-4 col-lg-3' }} photo mb-3">
|
||||
<div class="col-sm-6 col-md-4 photo mb-3">
|
||||
<div class="card">
|
||||
<img src="{{ $photo->thumbnailUrl('preview') }}" alt="" class="card-img-top"/>
|
||||
<div class="card-block">
|
||||
@ -45,28 +43,34 @@
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@if ($hasChildren)
|
||||
<div class="col-md-2 offset-md-1">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="height: 150px;"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h4>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col text-center">
|
||||
{{ $photos->links() }}
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col text-center">
|
||||
{{ $photos->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($hasChildren)
|
||||
<h2 style="margin-top: 60px;"><small class="text-muted">@lang('gallery.other_albums_heading', ['album_name' => $album->name])</small></h2>
|
||||
<p class="mb-4">@lang('gallery.other_albums_description')</p>
|
||||
|
||||
<div class="row">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
<div class="col-sm-4 col-md-3" style="max-width: 250px;">
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="max-height: 120px;"/>
|
||||
<div class="card-block">
|
||||
<h5 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h5>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,42 +4,44 @@
|
||||
@php ($hasChildren = $album->children()->count() > 0)
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
@include(Theme::viewName('partials.album_breadcrumb'))
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid album-container">
|
||||
<div class="row">
|
||||
<div class="{{ $hasChildren ? 'col-md-8' : 'col-md-10 offset-md-1' }} text-center">
|
||||
<h1>@lang('gallery.album_no_results_heading')</h1>
|
||||
<p style="line-height: 1.6em;">@lang('gallery.album_no_results_text', ['admin_link' => sprintf('<a href="%s">%s</a>', route('admin'), trans('admin.title'))])</p>
|
||||
<p style="margin-bottom: 30px; line-height: 1.6em;">@lang('gallery.album_no_results_text_2')</p>
|
||||
|
||||
<img src="{{ asset('themes/base/images/smartphone-photo.jpg') }}" class="img-fluid rounded" style="display: inline;" />
|
||||
</div>
|
||||
|
||||
@if ($hasChildren)
|
||||
<div class="col-md-2 offset-md-1">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="height: 150px;"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h4>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="col-xl-8 offset-xl-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
@include(Theme::viewName('partials.album_breadcrumb'))
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="row">
|
||||
<div class="{{ $hasChildren ? 'col-md-8' : 'col-md-10 offset-md-1' }} text-center">
|
||||
<h1>@lang('gallery.album_no_results_heading')</h1>
|
||||
<p style="line-height: 1.6em;">@lang('gallery.album_no_results_text', ['admin_link' => sprintf('<a href="%s">%s</a>', route('admin'), trans('admin.title'))])</p>
|
||||
<p style="margin-bottom: 30px; line-height: 1.6em;">@lang('gallery.album_no_results_text_2')</p>
|
||||
|
||||
<img src="{{ asset('themes/base/images/smartphone-photo.jpg') }}" class="img-fluid rounded" style="display: inline;" />
|
||||
</div>
|
||||
|
||||
@if ($hasChildren)
|
||||
<div class="col-md-2 offset-md-1">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="height: 150px;"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h4>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@ -21,18 +21,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row" id="slideshow-container">
|
||||
<div class="col text-center">
|
||||
<div class="pull-right">
|
||||
<div class="btn btn-group">
|
||||
<button class="btn btn-default" data-bind="click: pauseSlideshow, disable: isPaused, visible: isRunning"><i class="fa fa-fw fa-pause"></i></button>
|
||||
<button class="btn btn-default" data-bind="click: continueSlideshow, enable: isPaused, visible: isRunning"><i class="fa fa-fw fa-play"></i></button>
|
||||
<button class="btn btn-default" v-on:click="pauseSlideshow" v-bind:disabled="isPaused" v-if="isRunning"><i class="fa fa-fw fa-pause"></i></button>
|
||||
<button class="btn btn-default" v-on:click="continueSlideshow" v-bind:disabled="!isPaused" v-if="isRunning"><i class="fa fa-fw fa-play"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="image-preview" data-bind="with: current()">
|
||||
<a data-bind="attr: { href: info_url, title: description }">
|
||||
<img class="img-rounded thumbnail img-responsive" data-bind="attr: { src: original_url, alt: name, title: description }"/>
|
||||
<div id="image-preview" v-if="current !== null">
|
||||
<a v-bind:href="current.info_url" v-bind:title="current.description">
|
||||
<img class="img-rounded thumbnail img-responsive" v-bind:src="current.original_url" v-bind:alt="current.name" v-bind:title="current.description"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="col">
|
||||
<div class="thumbnails">
|
||||
@foreach ($photos as $photo)
|
||||
<a href="{{ $photo->url() }}" data-bind="click: function() { viewModel.changeCurrentImage({{ $photo->id }}); }">
|
||||
<a href="{{ $photo->url() }}" v-on:click="changeCurrentImage({{ $photo->id }});">
|
||||
<img class="ss-thumbnail" src="{{ $photo->thumbnailUrl('slideshow-tiny') }}" alt="{{ $photo->name }}" title="{{ $photo->description }}" data-photo-id="{{ $photo->id }}" data-original-url="{{ $photo->thumbnailUrl('fullsize') }}" data-info-url="{{ $photo->url() }}" />
|
||||
</a>
|
||||
@endforeach
|
||||
@ -50,23 +50,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
@if ($album->children()->count() > 0)
|
||||
<div class="col-6 col-md-3">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
@if ($album->children()->count() > 0)
|
||||
<h2 style="margin-top: 60px;"><small class="text-muted">@lang('gallery.other_albums_heading', ['album_name' => $album->name])</small></h2>
|
||||
<p class="mb-4">@lang('gallery.other_albums_description')</p>
|
||||
|
||||
<div class="row">
|
||||
@foreach ($album->children as $childAlbum)
|
||||
<div class="col-sm-4 col-md-3" style="max-width: 250px;">
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="height: 150px;"/>
|
||||
<img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="max-height: 120px;"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h4>
|
||||
<h5 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h5>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@ -78,7 +81,7 @@
|
||||
$(document).ready(function() {
|
||||
$('img.ss-thumbnail').each(function(index, element)
|
||||
{
|
||||
viewModel.images.push({
|
||||
viewModel.data.images.push({
|
||||
'id': $(element).data('photo-id'),
|
||||
'name': $(element).attr('alt'),
|
||||
'description': $(element).attr('title'),
|
||||
@ -87,8 +90,8 @@
|
||||
});
|
||||
});
|
||||
|
||||
ko.applyBindings(viewModel);
|
||||
viewModel.startSlideshow();
|
||||
var app = new Vue(viewModel);
|
||||
app.startSlideshow();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@ -3,36 +3,40 @@
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
@if (count($albums) > 0)
|
||||
<div class="row album-photo-cards">
|
||||
@foreach ($albums as $album)
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $album->url() }}">{{ $album->name }}</a></h4>
|
||||
<p class="card-text">{{ $album->description }}</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $album->photos_count }} photos</small>
|
||||
<div class="row">
|
||||
<div class="col-xl-8 offset-xl-2">
|
||||
@if (count($albums) > 0)
|
||||
<div class="row album-photo-cards">
|
||||
@foreach ($albums as $album)
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}"/>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title"><a href="{{ $album->url() }}">{{ $album->name }}</a></h4>
|
||||
<p class="card-text">{{ $album->description }}</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $album->photos_count }} photos</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col text-center">
|
||||
{{ $albums->links() }}
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center">
|
||||
<h1>@lang('gallery.index_no_results_heading')</h1>
|
||||
<p style="margin-bottom: 30px; line-height: 2em;">@lang('gallery.index_no_results_text', ['admin_link' => sprintf('<a href="%s">%s</a>', route('admin'), trans('admin.title'))])</p>
|
||||
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col-md-12 text-center">
|
||||
{{ $albums->links() }}
|
||||
</div>
|
||||
<img src="{{ asset('themes/base/images/take-a-photo.jpg') }}" class="img-fluid rounded" style="display: inline;" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center">
|
||||
<h1>@lang('gallery.index_no_results_heading')</h1>
|
||||
<p style="margin-bottom: 30px; line-height: 2em;">@lang('gallery.index_no_results_text', ['admin_link' => sprintf('<a href="%s">%s</a>', route('admin'), trans('admin.title'))])</p>
|
||||
|
||||
<img src="{{ asset('themes/base/images/take-a-photo.jpg') }}" class="img-fluid rounded" style="display: inline;" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@ -2,8 +2,13 @@
|
||||
@if (count($photos) == 0)
|
||||
<div class="text-center" style="margin-top: 30px;">
|
||||
<h4 class="text-danger"><b>@lang('admin.album_no_photos_p1')</b></h4>
|
||||
<p>@lang('admin.album_no_photos_p2')</p>
|
||||
<p style="margin-top: 30px;"><button id="upload-button" class="btn btn-lg btn-success"><i class="fa fa-fw fa-upload"></i> @lang('admin.album_no_photos_button')</button></p>
|
||||
|
||||
@if (Gate::check('upload-photos', $album))
|
||||
<p>@lang('admin.album_no_photos_p2')</p>
|
||||
<p style="margin-top: 30px;"><button class="btn btn-lg btn-success" v-on:click="switchToUploadTab"><i class="fa fa-fw fa-upload"></i> @lang('admin.album_no_photos_button')</button></p>
|
||||
@else
|
||||
<p>@lang('admin.album_no_photos_p2_no_upload')</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<form action="{{ route('photos.updateBulk', [$album->id]) }}" method="POST">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user