aheathershaw/blue-twilight
1
0
Fork 0
Code Issues 32 Pull Requests Releases 15 Wiki Activity

#20: Numerous visual improvements, plus converting the slideshow to VueJS. Also re-enabled the user autocomplete

Browse Source
This commit is contained in:
Andy Heathershaw 2017-04-18 17:25:27 +01:00
parent aef3dfbdeb
commit 336e94e8e3
22 changed files with 5275 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/deployment.xml
View File

@ -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
View File

@ -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>

3
app/Http/Controllers/Admin/UserController.php
View File

@ -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')
{

2
app/User.php
View File

@ -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
View File

@ -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
View File

@ -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.

2517
public/js/blue-twilight.js
View File

File diff suppressed because it is too large Load Diff

19
public/js/blue-twilight.min.js vendored
View File

File diff suppressed because one or more lines are too long

39
resources/assets/css/typeahead.css vendored Normal file
View 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;
}

66
resources/assets/js/albums.js
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

1
resources/lang/en/admin.php
View File

@ -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',

1
resources/lang/en/forms.php
View File

@ -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',

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

@ -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'
];

7
resources/views/themes/base/admin/create_user.blade.php
View File

@ -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>

7
resources/views/themes/base/admin/edit_user.blade.php
View File

@ -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">

9
resources/views/themes/base/admin/show_album.blade.php
View File

@ -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);

92
resources/views/themes/base/gallery/album_default.blade.php
View File

@ -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>

68
resources/views/themes/base/gallery/album_empty.blade.php
View File

@ -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

43
resources/views/themes/base/gallery/album_slideshow.blade.php
View File

@ -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

56
resources/views/themes/base/gallery/index.blade.php
View File

@ -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

9
resources/views/themes/base/partials/album_photos_tab.blade.php
View File

@ -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">