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

.idea/deployment.xml

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

.idea/webServers.xml

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

app/Http/Controllers/Admin/UserController.php

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

app/User.php

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

public/css/blue-twilight.css

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

public/css/blue-twilight.min.css

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

resources/assets/css/typeahead.css

@@ -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;
+}

resources/assets/js/albums.js

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

resources/lang/en/admin.php

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

resources/lang/en/forms.php

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

resources/lang/en/gallery.php

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

resources/views/themes/base/admin/create_user.blade.php

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

resources/views/themes/base/admin/edit_user.blade.php

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

resources/views/themes/base/admin/show_album.blade.php

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

resources/views/themes/base/gallery/album_default.blade.php

@@ -4,7 +4,9 @@
 @php ($hasChildren = $album->children()->count() > 0)
 
 @section('content')
-    <div class="container-fluid">
+    <div class="container-fluid album-container">
+        <div class="row">
+            <div class="col-xl-8 offset-xl-2">
                 <div class="row">
                     <div class="col">
                         <ol class="breadcrumb">
@@ -13,9 +15,7 @@
                         </ol>
                     </div>
                 </div>
-    </div>
 
-    <div class="container-fluid album-container">
                 <div class="row">
                     <div class="col">
                         <div class="pull-right">
@@ -29,11 +29,9 @@
                     </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,24 +43,6 @@
                             </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">
@@ -70,4 +50,28 @@
                         </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>
 @endsection

resources/views/themes/base/gallery/album_empty.blade.php

@@ -4,7 +4,9 @@
 @php ($hasChildren = $album->children()->count() > 0)
 
 @section('content')
-    <div class="container-fluid">
+    <div class="container-fluid album-container">
+        <div class="row">
+            <div class="col-xl-8 offset-xl-2">
                 <div class="row">
                     <div class="col">
                         <ol class="breadcrumb">
@@ -13,9 +15,7 @@
                         </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>
@@ -42,4 +42,6 @@
                     @endif
                 </div>
             </div>
+        </div>
+    </div>
 @endsection

resources/views/themes/base/gallery/album_slideshow.blade.php

@@ -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" 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" 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="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()">
+            <div id="image-preview" v-if="current !== null">
-                <a data-bind="attr: { href: info_url, title: description }">
+                <a v-bind:href="current.info_url" v-bind:title="current.description">
-                    <img class="img-rounded thumbnail img-responsive" data-bind="attr: { src: original_url, alt: name, title: 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">
+        <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>
+                </div>
             @endforeach
         </div>
     @endif
-    </div>
 </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);
+        var app = new Vue(viewModel);
-        viewModel.startSlideshow();
+        app.startSlideshow();
     });
 </script>
 @endpush

resources/views/themes/base/gallery/index.blade.php

@@ -3,10 +3,12 @@
 
 @section('content')
     <div class="container-fluid">
+        <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 col-lg-3">
+                            <div class="col-sm-6 col-md-4">
                                 <div class="card">
                                     <img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}"/>
                                     <div class="card-block">
@@ -22,7 +24,7 @@
                     </div>
 
                     <div class="row" style="margin-top: 15px;">
-                <div class="col-md-12 text-center">
+                        <div class="col text-center">
                             {{ $albums->links() }}
                         </div>
                     </div>
@@ -35,4 +37,6 @@
                     </div>
                 @endif
             </div>
+        </div>
+    </div>
 @endsection

resources/views/themes/base/partials/album_photos_tab.blade.php

@@ -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>
+
+            @if (Gate::check('upload-photos', $album))
                 <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>
+                <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">