From 78608eebbc115b357c134aae2072cb80d15f5b90 Mon Sep 17 00:00:00 2001
From: Andy Heathershaw <andy@andys.eu>
Date: Fri, 1 Sep 2017 14:52:06 +0100
Subject: [PATCH] #13: Lots more adjustments to layouts for Bootstrap 4 and
 general tidying of HTML code on the Gallery side of things

---
 resources/lang/en/gallery.php                 |   3 +
 .../themes/base/admin/create_album.blade.php  |   6 +-
 .../themes/base/admin/create_user.blade.php   |  33 ++---
 .../themes/base/admin/edit_album.blade.php    |  12 +-
 .../themes/base/admin/edit_group.blade.php    |   8 +-
 .../themes/base/admin/edit_user.blade.php     |  51 +++----
 .../themes/base/admin/settings.blade.php      | 135 ++++++++++--------
 .../base/gallery/album_default.blade.php      | 126 ++++++++--------
 .../themes/base/gallery/album_empty.blade.php |  40 +++---
 .../base/gallery/album_slideshow.blade.php    |   6 +
 .../views/themes/base/gallery/index.blade.php |   6 +-
 .../partials/album_settings_tab.blade.php     |   6 +-
 .../partials/permission_checkbox.blade.php    |   8 +-
 13 files changed, 234 insertions(+), 206 deletions(-)

diff --git a/resources/lang/en/gallery.php b/resources/lang/en/gallery.php
index 5f173b6..3701e02 100644
--- a/resources/lang/en/gallery.php
+++ b/resources/lang/en/gallery.php
@@ -10,6 +10,9 @@ 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.',
+    'manage_album_link' => 'Manage',
+    'manage_album_link_2' => 'Manage Album',
+    'open_album_link' => 'Open Album',
     'other_albums_description' => 'You may also be interested in the following albums.',
     'other_albums_heading' => 'More Albums in :album_name'
 ];
\ No newline at end of file
diff --git a/resources/views/themes/base/admin/create_album.blade.php b/resources/views/themes/base/admin/create_album.blade.php
index 287fc49..ee0028d 100644
--- a/resources/views/themes/base/admin/create_album.blade.php
+++ b/resources/views/themes/base/admin/create_album.blade.php
@@ -19,12 +19,12 @@
 
                 <form action="{{ route('albums.store') }}" method="POST">
                     {{ csrf_field() }}
-                    <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                    <div class="form-group">
                         <label class="form-control-label" for="album-name">@lang('forms.name_label')</label>
-                        <input type="text" class="form-control" id="album-name" name="name" value="{{ old('name') }}">
+                        <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="album-name" name="name" value="{{ old('name') }}">
 
                         @if ($errors->has('name'))
-                            <div class="form-control-feedback">
+                            <div class="invalid-feedback">
                                 <strong>{{ $errors->first('name') }}</strong>
                             </div>
                         @endif
diff --git a/resources/views/themes/base/admin/create_user.blade.php b/resources/views/themes/base/admin/create_user.blade.php
index 31fffde..23c795f 100644
--- a/resources/views/themes/base/admin/create_user.blade.php
+++ b/resources/views/themes/base/admin/create_user.blade.php
@@ -21,12 +21,12 @@
 
                     <div class="row">
                         <div class="col-sm-6">
-                            <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                            <div class="form-group">
                                 <label class="form-control-label" for="user-name">@lang('forms.name_label')</label>
-                                <input type="text" class="form-control" id="user-name" name="name" value="{{ old('name') }}">
+                                <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="user-name" name="name" value="{{ old('name') }}">
 
                                 @if ($errors->has('name'))
-                                    <div class="form-control-feedback">
+                                    <div class="invalid-feedback">
                                         <strong>{{ $errors->first('name') }}</strong>
                                     </div>
                                 @endif
@@ -34,12 +34,12 @@
                         </div>
 
                         <div class="col-sm-6">
-                            <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
+                            <div class="form-group">
                                 <label class="form-control-label" for="user-email">@lang('forms.email_label')</label>
-                                <input type="text" class="form-control" id="user-email" name="email" value="{{ old('email') }}">
+                                <input type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" id="user-email" name="email" value="{{ old('email') }}">
 
                                 @if ($errors->has('email'))
-                                    <div class="form-control-feedback">
+                                    <div class="invalid-feedback">
                                         <strong>{{ $errors->first('email') }}</strong>
                                     </div>
                                 @endif
@@ -49,12 +49,12 @@
 
                     <div class="row">
                         <div class="col-sm-6">
-                            <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                            <div class="form-group">
                                 <label class="form-control-label" for="user-password">@lang('forms.password_label')</label>
-                                <input type="password" class="form-control" id="user-password" name="password" value="{{ old('password') }}">
+                                <input type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" id="user-password" name="password" value="{{ old('password') }}">
 
                                 @if ($errors->has('password'))
-                                    <div class="form-control-feedback">
+                                    <div class="invalid-feedback">
                                         <strong>{{ $errors->first('password') }}</strong>
                                     </div>
                                 @endif
@@ -62,12 +62,12 @@
                         </div>
 
                         <div class="col-sm-6">
-                            <div class="form-group{{ $errors->has('password_confirmation') ? ' has-danger' : '' }}">
+                            <div class="form-group">
                                 <label class="form-control-label" for="user-password-confirm">@lang('forms.password_confirm_label')</label>
-                                <input type="password" class="form-control" id="user-password-confirm" name="password_confirmation" value="{{ old('password_confirmation') }}">
+                                <input type="password" class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}" id="user-password-confirm" name="password_confirmation" value="{{ old('password_confirmation') }}">
 
                                 @if ($errors->has('password_confirmation'))
-                                    <div class="form-control-feedback">
+                                    <div class="invalid-feedback">
                                         <strong>{{ $errors->first('password_confirmation') }}</strong>
                                     </div>
                                 @endif
@@ -75,10 +75,11 @@
                         </div>
                     </div>
 
-                    <div class="form-check">
-                        <label class="form-check-label">
-                            <input class="form-check-input" type="checkbox" name="is_admin">
-                            @lang('forms.admin_user_label')
+                    <div>
+                        <label class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" name="is_admin" @if (old('is_admin'))checked="checked"@endif>
+                            <span class="custom-control-indicator"></span>
+                            <span class="custom-control-description">@lang('forms.admin_user_label')</span>
                         </label>
                     </div>
 
diff --git a/resources/views/themes/base/admin/edit_album.blade.php b/resources/views/themes/base/admin/edit_album.blade.php
index 4ba06e4..1bf1d2d 100644
--- a/resources/views/themes/base/admin/edit_album.blade.php
+++ b/resources/views/themes/base/admin/edit_album.blade.php
@@ -22,23 +22,23 @@
                     {{ csrf_field() }}
                     {{ method_field('PUT') }}
 
-                    <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                    <div class="form-group">
                         <label for="album-name" class="control-label">@lang('forms.name_label')</label>
-                        <input type="text" id="album-name" class="form-control" name="name" value="{{ old('name') }}" />
+                        <input type="text" id="album-name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" />
 
                         @if ($errors->has('name'))
-                            <div class="form-control-feedback">
+                            <div class="invalid-feedback">
                                 <strong>{{ $errors->first('name') }}</strong>
                             </div>
                         @endif
                     </div>
 
-                    <div class="form-group{{ $errors->has('description') ? ' has-danger' : '' }}">
+                    <div class="form-group">
                         <label for="album-description" class="control-label" name="name">@lang('forms.description_label')</label>
-                        <textarea class="form-control" id="album-description" rows="5" name="description">{{ old('description') }}</textarea>
+                        <textarea class="form-control{{ $errors->has('description') ? ' is-invalid' : '' }}" id="album-description" rows="5" name="description">{{ old('description') }}</textarea>
 
                         @if ($errors->has('description'))
-                            <div class="form-control-feedback">
+                            <div class="invalid-feedback">
                                 <strong>{{ $errors->first('description') }}</strong>
                             </div>
                         @endif
diff --git a/resources/views/themes/base/admin/edit_group.blade.php b/resources/views/themes/base/admin/edit_group.blade.php
index 22f2027..0277d17 100644
--- a/resources/views/themes/base/admin/edit_group.blade.php
+++ b/resources/views/themes/base/admin/edit_group.blade.php
@@ -32,13 +32,13 @@
                             {{-- Details --}}
                             <div role="tabpanel" class="tab-pane active" id="details-tab">
                                 <div class="row">
-                                    <div class="col-md-6 offset-md-3">
-                                        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                                    <div class="col-md-6 ml-md-auto mr-md-auto">
+                                        <div class="form-group">
                                             <label class="form-control-label" for="group-name">@lang('forms.name_label')</label>
-                                            <input type="text" class="form-control" id="group-name" name="name" value="{{ old('name') }}">
+                                            <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="group-name" name="name" value="{{ old('name') }}">
 
                                             @if ($errors->has('name'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('name') }}</strong>
                                                 </div>
                                             @endif
diff --git a/resources/views/themes/base/admin/edit_user.blade.php b/resources/views/themes/base/admin/edit_user.blade.php
index 18e930e..4855ae7 100644
--- a/resources/views/themes/base/admin/edit_user.blade.php
+++ b/resources/views/themes/base/admin/edit_user.blade.php
@@ -33,12 +33,12 @@
                             <div role="tabpanel" class="tab-pane active" id="details-tab">
                                 <div class="row">
                                     <div class="col-sm-6">
-                                        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                                        <div class="form-group">
                                             <label class="form-control-label" for="user-name">@lang('forms.name_label')</label>
-                                            <input type="text" class="form-control" id="user-name" name="name" value="{{ old('name') }}">
+                                            <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="user-name" name="name" value="{{ old('name') }}">
 
                                             @if ($errors->has('name'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('name') }}</strong>
                                                 </div>
                                             @endif
@@ -46,12 +46,12 @@
                                     </div>
 
                                     <div class="col-sm-6">
-                                        <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
+                                        <div class="form-group">
                                             <label class="form-control-label" for="user-email">@lang('forms.email_label')</label>
-                                            <input type="text" class="form-control" id="user-email" name="email" value="{{ old('email') }}">
+                                            <input type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" id="user-email" name="email" value="{{ old('email') }}">
 
                                             @if ($errors->has('email'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('email') }}</strong>
                                                 </div>
                                             @endif
@@ -61,12 +61,12 @@
 
                                 <div class="row">
                                     <div class="col-sm-6">
-                                        <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                                        <div class="form-group">
                                             <label class="form-control-label" for="user-password">@lang('forms.password_label')</label>
-                                            <input type="password" class="form-control" id="user-password" name="password" value="{{ old('password') }}">
+                                            <input type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" id="user-password" name="password" value="{{ old('password') }}">
 
                                             @if ($errors->has('password'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('password') }}</strong>
                                                 </div>
                                             @endif
@@ -74,12 +74,12 @@
                                     </div>
 
                                     <div class="col-sm-6">
-                                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-danger' : '' }}">
+                                        <div class="form-group">
                                             <label class="form-control-label" for="user-password-confirm">@lang('forms.password_confirm_label')</label>
-                                            <input type="password" class="form-control" id="user-password-confirm" name="password_confirmation" value="{{ old('password_confirmation') }}">
+                                            <input type="password" class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}" id="user-password-confirm" name="password_confirmation" value="{{ old('password_confirmation') }}">
 
                                             @if ($errors->has('password_confirmation'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('password_confirmation') }}</strong>
                                                 </div>
                                             @endif
@@ -87,18 +87,20 @@
                                     </div>
                                 </div>
 
-                                <div class="form-check">
-                                    <label class="form-check-label">
-                                        <input class="form-check-input" type="checkbox" name="is_admin"@if ($user->is_admin) checked="checked"@endif>
-                                        @lang('forms.admin_user_label')
+                                <div>
+                                    <label class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" name="is_admin"@if (old('is_admin', $user->is_admin)) checked="checked"@endif>
+                                        <span class="custom-control-indicator"></span>
+                                        <span class="custom-control-description">@lang('forms.admin_user_label')</span>
                                     </label>
                                 </div>
 
                                 @if (!$user->is_activated)
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input class="form-check-input" type="checkbox" name="is_activated">
-                                            <strong>@lang('forms.activate_user_label')</strong>
+                                    <div>
+                                        <label class="custom-control custom-checkbox">
+                                            <input type="checkbox" class="custom-control-input" name="is_activated"@if (old('is_activated', $user->is_activated)) checked="checked"@endif>
+                                            <span class="custom-control-indicator"></span>
+                                            <span class="custom-control-description">@lang('forms.activate_user_label')</span>
                                         </label>
                                     </div>
                                 @endif
@@ -110,10 +112,11 @@
                                     <p style="margin-bottom: 20px;">@lang('admin.user_groups_list_select', ['name' => $user->name])</p>
 
                                     @foreach ($groups as $group)
-                                        <div class="form-check">
-                                            <label class="form-check-label">
-                                                <input class="form-check-input" type="checkbox" name="user_group_id[]" value="{{ $group->id }}"@if (in_array($group->id, $users_groups)) checked="checked"@endif>
-                                                {{ $group->name }}
+                                        <div>
+                                            <label class="custom-control custom-checkbox">
+                                                <input type="checkbox" class="custom-control-input" name="user_group_id[]" value="{{ $group->id }}" @if (in_array($group->id, $users_groups)) checked="checked"@endif>
+                                                <span class="custom-control-indicator"></span>
+                                                <span class="custom-control-description">{{ $group->name }}</span>
                                             </label>
                                         </div>
                                     @endforeach
diff --git a/resources/views/themes/base/admin/settings.blade.php b/resources/views/themes/base/admin/settings.blade.php
index 6ae158c..810f90b 100644
--- a/resources/views/themes/base/admin/settings.blade.php
+++ b/resources/views/themes/base/admin/settings.blade.php
@@ -29,12 +29,12 @@
                         <div class="tab-content">
                             {{-- General --}}
                             <div role="tabpanel" class="tab-pane active" id="general-tab">
-                                <div class="form-group{{ $errors->has('app_name') ? ' has-danger' : '' }}">
+                                <div class="form-group">
                                     <label class="form-control-label" for="gallery-name">Gallery name:</label>
-                                    <input type="text" class="form-control" id="gallery-name" name="app_name" value="{{ old('app_name', $config['app_name']) }}">
+                                    <input type="text" class="form-control{{ $errors->has('app_name') ? ' is-invalid' : '' }}" id="gallery-name" name="app_name" value="{{ old('app_name', $config['app_name']) }}">
 
                                     @if ($errors->has('app_name'))
-                                        <div class="form-control-feedback">
+                                        <div class="invalid-feedback">
                                             <strong>{{ $errors->first('app_name') }}</strong>
                                         </div>
                                     @endif
@@ -51,7 +51,7 @@
                                             </select>
 
                                             @if ($errors->has('date_format'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('date_format') }}</strong>
                                                 </div>
                                             @endif
@@ -70,7 +70,7 @@
                                             </select>
 
                                             @if ($errors->has('theme'))
-                                                <div class="form-control-feedback">
+                                                <div class="invalid-feedback">
                                                     <strong>{{ $errors->first('theme') }}</strong>
                                                 </div>
                                             @endif
@@ -96,23 +96,23 @@
 
                             {{-- E-mail --}}
                             <div role="tabpanel" class="tab-pane" id="email-tab">
-                                <div class="form-group{{ $errors->has('sender_name') ? ' has-danger' : '' }}">
+                                <div class="form-group">
                                     <label class="form-control-label" for="email-sender-name">Sender name:</label>
-                                    <input type="text" class="form-control" id="email-sender-name" name="sender_name" value="{{ old('sender_name', $config['sender_name']) }}">
+                                    <input type="text" class="form-control{{ $errors->has('sender_name') ? ' is-invalid' : '' }}" id="email-sender-name" name="sender_name" value="{{ old('sender_name', $config['sender_name']) }}">
 
                                     @if ($errors->has('sender_name'))
-                                        <div class="form-control-feedback">
+                                        <div class="invalid-feedback">
                                             <strong>{{ $errors->first('sender_name') }}</strong>
                                         </div>
                                     @endif
                                 </div>
 
-                                <div class="form-group{{ $errors->has('sender_address') ? ' has-danger' : '' }}">
+                                <div class="form-group">
                                     <label class="form-control-label" for="email-sender-address">Sender address:</label>
-                                    <input type="text" class="form-control" id="email-sender-address" name="sender_address" value="{{ old('sender_address', $config['sender_address']) }}">
+                                    <input type="text" class="form-control{{ $errors->has('sender_address') ? ' is-invalid' : '' }}" id="email-sender-address" name="sender_address" value="{{ old('sender_address', $config['sender_address']) }}">
 
                                     @if ($errors->has('sender_address'))
-                                        <div class="form-control-feedback">
+                                        <div class="invalid-feedback">
                                             <strong>{{ $errors->first('sender_address') }}</strong>
                                         </div>
                                     @endif
@@ -122,54 +122,55 @@
                                     <legend>SMTP Server</legend>
                                     <p style="margin-bottom: 15px;">Configure your SMTP server using the settings below. If your server does not require authentication, leave the Username and Password fields empty.</p>
 
-                                    <div class="form-group{{ $errors->has('smtp_server') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="email-smtp-server">Hostname:</label>
-                                        <input type="text" class="form-control" id="email-smtp-server" name="smtp_server" value="{{ old('smtp_server', $config['smtp_server']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('smtp_server') ? ' is-invalid' : '' }}" id="email-smtp-server" name="smtp_server" value="{{ old('smtp_server', $config['smtp_server']) }}">
 
                                         @if ($errors->has('smtp_server'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('smtp_server') }}</strong>
                                             </div>
                                         @endif
                                     </div>
 
-                                    <div class="form-group{{ $errors->has('smtp_port') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="email-smtp-port">Port:</label>
-                                        <input type="text" class="form-control" id="email-smtp-port" name="smtp_port" value="{{ old('smtp_port', $config['smtp_port']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('smtp_port') ? ' is-invalid' : '' }}" id="email-smtp-port" name="smtp_port" value="{{ old('smtp_port', $config['smtp_port']) }}">
 
                                         @if ($errors->has('smtp_port'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('smtp_port') }}</strong>
                                             </div>
                                         @endif
                                     </div>
 
-                                    <div class="form-group{{ $errors->has('smtp_username') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="email-smtp-username">Username:</label>
-                                        <input type="text" class="form-control" id="email-smtp-username" name="smtp_username" value="{{ old('smtp_username', $config['smtp_username']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('smtp_username') ? ' is-invalid' : '' }}" id="email-smtp-username" name="smtp_username" value="{{ old('smtp_username', $config['smtp_username']) }}">
 
                                         @if ($errors->has('smtp_username'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('smtp_username') }}</strong>
                                             </div>
                                         @endif
                                     </div>
 
-                                    <div class="form-group{{ $errors->has('smtp_password') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="email-smtp-password">Password:</label>
-                                        <input type="text" class="form-control" id="email-smtp-password" name="smtp_password" value="{{ old('smtp_password', $config['smtp_password']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('smtp_password') ? ' is-invalid' : '' }}" id="email-smtp-password" name="smtp_password" value="{{ old('smtp_password', $config['smtp_password']) }}">
 
                                         @if ($errors->has('smtp_password'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('smtp_password') }}</strong>
                                             </div>
                                         @endif
                                     </div>
 
-                                    <div class="form-check">
-                                        <label class="form-check-label">
-                                            <input class="form-check-input" type="checkbox" name="smtp_encryption" @if (UserConfig::get('smtp_encryption'))checked="checked"@endif>
-                                            <strong>Requires encrypted connection</strong>
+                                    <div>
+                                        <label class="custom-control custom-checkbox">
+                                            <input type="checkbox" class="custom-control-input" name="smtp_encryption" @if (UserConfig::get('smtp_encryption'))checked="checked"@endif>
+                                            <span class="custom-control-indicator"></span>
+                                            <span class="custom-control-description"><strong>Requires encrypted connection</strong></span>
                                         </label>
                                     </div>
 
@@ -192,50 +193,53 @@
 
                             {{-- Security --}}
                             <div role="tabpanel" class="tab-pane" id="security-tab">
-                                <div class="checkbox">
-                                    <label>
-                                        <input type="checkbox" name="allow_self_registration" @if (old('allow_self_registration', UserConfig::get('allow_self_registration')))checked="checked"@endif>
-                                        <strong>@lang('admin.settings.security_allow_self_registration')</strong><br/>
-                                        @lang('admin.settings.security_allow_self_registration_description')
+                                <div>
+                                    <label class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" name="allow_self_registration" @if (old('allow_self_registration', UserConfig::get('allow_self_registration')))checked="checked"@endif>
+                                        <span class="custom-control-indicator"></span>
+                                        <span class="custom-control-description"><strong>@lang('admin.settings.security_allow_self_registration')</strong><br/>
+                                            @lang('admin.settings.security_allow_self_registration_description')</span>
                                     </label>
                                 </div>
 
-                                <div class="checkbox" style="margin-top: 20px;">
-                                    <label>
-                                        <input type="checkbox" name="require_email_verification" @if (old('require_email_verification', UserConfig::get('require_email_verification')))checked="checked"@endif>
-                                        <strong>Require e-mail verification for self-registered accounts</strong><br/>
-                                        <span class="text-danger">It is strongly recommended to enable this option.</span>
+                                <div style="margin-top: 20px;">
+                                    <label class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" name="require_email_verification" @if (old('require_email_verification', UserConfig::get('require_email_verification')))checked="checked"@endif>
+                                        <span class="custom-control-indicator"></span>
+                                        <span class="custom-control-description"><strong>Require e-mail verification for self-registered accounts</strong><br/>
+                                        <span class="text-danger">It is strongly recommended to enable this option.</span></span>
                                     </label>
                                 </div>
 
-                                <div class="checkbox" style="margin-top: 20px;">
-                                    <label>
-                                        <input type="checkbox" name="recaptcha_enabled_registration" @if (old('recaptcha_enabled_registration', UserConfig::get('recaptcha_enabled_registration')))checked="checked"@endif>
-                                        <strong>Enable <a href="https://www.google.com/recaptcha" target="_blank">reCAPTCHA</a> for self-registrations</strong><br/>
-                                        <span class="text-danger">It is strongly recommended to enable this option.</span>
+                                <div style="margin-top: 20px;">
+                                    <label class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" name="recaptcha_enabled_registration" @if (old('recaptcha_enabled_registration', UserConfig::get('recaptcha_enabled_registration')))checked="checked"@endif>
+                                        <span class="custom-control-indicator"></span>
+                                        <span class="custom-control-description"><strong>Enable <a href="https://www.google.com/recaptcha" target="_blank">reCAPTCHA</a> for self-registrations</strong><br/>
+                                        <span class="text-danger">It is strongly recommended to enable this option.</span></span>
                                     </label>
                                 </div>
 
                                 <fieldset style="margin-top: 30px;">
                                     <legend>@lang('admin.settings_recaptcha')</legend>
 
-                                    <div class="form-group{{ $errors->has('recaptcha_site_key') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="recaptcha-site-key">Site key:</label>
-                                        <input type="text" class="form-control" id="recaptcha-site-key" name="recaptcha_site_key" value="{{ old('recaptcha_site_key', $config['recaptcha_site_key']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('recaptcha_site_key') ? ' is-invalid' : '' }}" id="recaptcha-site-key" name="recaptcha_site_key" value="{{ old('recaptcha_site_key', $config['recaptcha_site_key']) }}">
 
                                         @if ($errors->has('recaptcha_site_key'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('recaptcha_site_key') }}</strong>
                                             </div>
                                         @endif
                                     </div>
 
-                                    <div class="form-group{{ $errors->has('recaptcha_secret_key') ? ' has-danger' : '' }}">
+                                    <div class="form-group">
                                         <label class="form-control-label" for="recaptcha-secret-key">Secret key:</label>
-                                        <input type="text" class="form-control" id="recaptcha-secret-key" name="recaptcha_secret_key" value="{{ old('recaptcha_secret_key', $config['recaptcha_secret_key']) }}">
+                                        <input type="text" class="form-control{{ $errors->has('recaptcha_secret_key') ? ' is-invalid' : '' }}" id="recaptcha-secret-key" name="recaptcha_secret_key" value="{{ old('recaptcha_secret_key', $config['recaptcha_secret_key']) }}">
 
                                         @if ($errors->has('recaptcha_secret_key'))
-                                            <div class="form-control-feedback">
+                                            <div class="invalid-feedback">
                                                 <strong>{{ $errors->first('recaptcha_secret_key') }}</strong>
                                             </div>
                                         @endif
@@ -245,19 +249,21 @@
                                 <fieldset style="margin-top: 20px;">
                                     <legend>@lang('admin.settings_image_protection')</legend>
 
-                                    <div class="checkbox">
-                                        <label>
-                                            <input type="checkbox" name="restrict_original_download" @if (old('restrict_original_download', UserConfig::get('restrict_original_download')))checked="checked"@endif>
-                                            <strong>@lang('forms.settings_restrict_originals_download')</strong><br/>
-                                            @lang('forms.settings_restrict_originals_download_help')
+                                    <div>
+                                        <label class="custom-control custom-checkbox">
+                                            <input type="checkbox" class="custom-control-input" name="restrict_original_download" @if (old('restrict_original_download', UserConfig::get('restrict_original_download')))checked="checked"@endif>
+                                            <span class="custom-control-indicator"></span>
+                                            <span class="custom-control-description"><strong>@lang('forms.settings_restrict_originals_download')</strong><br/>
+                                                @lang('forms.settings_restrict_originals_download_help')</span>
                                         </label>
                                     </div>
 
-                                    <div class="checkbox" style="margin-top: 20px;">
-                                        <label>
-                                            <input type="checkbox" name="hotlink_protection" @if (old('hotlink_protection', UserConfig::get('hotlink_protection')))checked="checked"@endif>
-                                            <strong>@lang('forms.settings_hotlink_protection')</strong><br/>
-                                            @lang('forms.settings_hotlink_protection_help')
+                                    <div style="margin-top: 20px;">
+                                        <label class="custom-control custom-checkbox">
+                                            <input type="checkbox" class="custom-control-input" name="hotlink_protection" @if (old('hotlink_protection', UserConfig::get('hotlink_protection')))checked="checked"@endif>
+                                            <span class="custom-control-indicator"></span>
+                                            <span class="custom-control-description"><strong>@lang('forms.settings_hotlink_protection')</strong><br/>
+                                                @lang('forms.settings_hotlink_protection_help')</span>
                                         </label>
                                     </div>
                                 </fieldset>
@@ -273,13 +279,16 @@
                                         <a href="https://cookieconsent.insites.com/" target="_blank">@lang('admin.settings.analytics_cookie_link_2')</a>
                                     </p>
                                 </div>
-                                <div class="checkbox mt-4">
-                                    <label>
-                                        <input type="checkbox" name="enable_visitor_hits" @if (old('enable_visitor_hits', UserConfig::get('enable_visitor_hits')))checked="checked"@endif>
-                                        <strong>@lang('admin.settings.analytics_enable_visitor_hits')</strong><br/>
-                                        @lang('admin.settings.analytics_enable_visitor_hits_description')
+
+                                <div class="mt-4">
+                                    <label class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" name="enable_visitor_hits" @if (old('enable_visitor_hits', UserConfig::get('enable_visitor_hits')))checked="checked"@endif>
+                                        <span class="custom-control-indicator"></span>
+                                        <span class="custom-control-description"><strong>@lang('admin.settings.analytics_enable_visitor_hits')</strong><br/>
+                                            @lang('admin.settings.analytics_enable_visitor_hits_description')</span>
                                     </label>
                                 </div>
+
                                 <hr/>
                                 <fieldset>
                                     <legend>@lang('admin.visitor_analytics_heading')</legend>
diff --git a/resources/views/themes/base/gallery/album_default.blade.php b/resources/views/themes/base/gallery/album_default.blade.php
index 51a2502..03dfc07 100644
--- a/resources/views/themes/base/gallery/album_default.blade.php
+++ b/resources/views/themes/base/gallery/album_default.blade.php
@@ -3,75 +3,73 @@
 
 @php ($hasChildren = $album->children()->count() > 0)
 
+@section('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'))
+@endsection
+
 @section('content')
-    <div class="container-fluid album-container">
+    <div class="container album-container">
         <div class="row">
-            <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 class="col">
+                <div class="pull-right">
+                    @can('edit', $album)
+                        <div class="mb-3">
+                            <a class="btn btn-secondary" href="{{ route('albums.show', ['id' => $album->id]) }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('gallery.manage_album_link_2')</a>
+                        </div>
+                    @endcan
+
+                    @include(\App\Facade\Theme::viewName('partials.album_view_selector'))
                 </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">
-                    @foreach ($photos as $photo)
-                        <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-body">
-                                    <h4 class="card-title"><a href="{{ $photo->url() }}">{{ $photo->name }}</a></h4>
-                                </div>
-                                <div class="card-footer">
-                                    <small class="text-muted"><i class="fa fa-fw fa-calendar"></i> {{ date('Y-m-d H:i', strtotime(!is_null($photo->taken_at) ? $photo->taken_at : $photo->created_at)) }}</small>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
-
-                    <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-body">
-                                        <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
+                <h1 class="page-title">{{ $album->name }}</h1>
+                <p>{{ $album->description }}</p>
+                <div class="clearfix"><!-- --></div>
+                <hr/>
             </div>
         </div>
+
+        <div class="row">
+            @foreach ($photos as $photo)
+                <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-body">
+                            <h4 class="card-title"><a href="{{ $photo->url() }}">{{ $photo->name }}</a></h4>
+                        </div>
+                        <div class="card-footer">
+                            <small class="text-muted"><i class="fa fa-fw fa-calendar"></i> {{ date('Y-m-d H:i', strtotime(!is_null($photo->taken_at) ? $photo->taken_at : $photo->created_at)) }}</small>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+
+            <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-body">
+                                <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>
 @endsection
\ No newline at end of file
diff --git a/resources/views/themes/base/gallery/album_empty.blade.php b/resources/views/themes/base/gallery/album_empty.blade.php
index 4a2aff6..1b3f507 100644
--- a/resources/views/themes/base/gallery/album_empty.blade.php
+++ b/resources/views/themes/base/gallery/album_empty.blade.php
@@ -3,28 +3,30 @@
 
 @php ($hasChildren = $album->children()->count() > 0)
 
+@section('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'))
+@endsection
+
 @section('content')
-    <div class="container-fluid album-container">
+    <div class="container album-container">
+        @can('edit', $album)
+            <div class="row">
+                <div class="col">
+                    <div class="pull-right">
+                        <a class="btn btn-secondary" href="{{ route('albums.show', ['id' => $album->id]) }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('gallery.manage_album_link_2')</a>
+                    </div>
+                </div>
+            </div>
+        @endcan
+
         <div class="row">
-            <div class="col-8 ml-auto mr-auto">
-                <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 class="col 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>
 
-                <div class="row">
-                    <div class="col 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>
-                </div>
+                <img src="{{ asset('themes/base/images/smartphone-photo.jpg') }}" class="img-fluid rounded" style="display: inline;" />
 
                 @if ($hasChildren)
                     <h2 style="margin-top: 60px;"><small class="text-muted">@lang('gallery.other_albums_heading', ['album_name' => $album->name])</small></h2>
diff --git a/resources/views/themes/base/gallery/album_slideshow.blade.php b/resources/views/themes/base/gallery/album_slideshow.blade.php
index ead93e0..8402eca 100644
--- a/resources/views/themes/base/gallery/album_slideshow.blade.php
+++ b/resources/views/themes/base/gallery/album_slideshow.blade.php
@@ -11,6 +11,12 @@
     <div class="row">
         <div class="col">
             <div class="pull-right">
+                @can('edit', $album)
+                    <div class="mb-3">
+                        <a class="btn btn-secondary" href="{{ route('albums.show', ['id' => $album->id]) }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('gallery.manage_album_link_2')</a>
+                    </div>
+                @endcan
+
                 @include(\App\Facade\Theme::viewName('partials.album_view_selector'))
             </div>
 
diff --git a/resources/views/themes/base/gallery/index.blade.php b/resources/views/themes/base/gallery/index.blade.php
index df6427b..2dee24a 100644
--- a/resources/views/themes/base/gallery/index.blade.php
+++ b/resources/views/themes/base/gallery/index.blade.php
@@ -10,10 +10,14 @@
                         @foreach ($albums as $album)
                             <div class="col-sm-6 col-md-4">
                                 <div class="card">
-                                    <img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}"/>
+                                    <a href="{{ $album->url() }}"><img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}"/></a>
                                     <div class="card-body">
                                         <h4 class="card-title"><a href="{{ $album->url() }}">{{ $album->name }}</a></h4>
                                         <p class="card-text">{{ $album->description }}</p>
+
+                                        @can('edit', $album)
+                                            <a href="{{ route('albums.show', ['id' => $album->id]) }}" class="card-link">@lang('gallery.manage_album_link')</a>
+                                        @endcan
                                     </div>
                                     <div class="card-footer">
                                         <small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $album->photos_count }} photos</small>
diff --git a/resources/views/themes/base/partials/album_settings_tab.blade.php b/resources/views/themes/base/partials/album_settings_tab.blade.php
index 51b5441..1de87b1 100644
--- a/resources/views/themes/base/partials/album_settings_tab.blade.php
+++ b/resources/views/themes/base/partials/album_settings_tab.blade.php
@@ -6,12 +6,12 @@
         <h4><i class="fa fa-fw fa-info"></i> @lang('admin.album_basic_info_heading')</h4>
         <p>@lang('admin.album_basic_info_intro')</p>
 
-        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}" style="margin-top: 20px;">
+        <div class="form-group" style="margin-top: 20px;">
             <label class="form-control-label" for="album-name">@lang('forms.name_label')</label>
-            <input type="text" class="form-control" id="album-name" name="name" value="{{ old('name') }}">
+            <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="album-name" name="name" value="{{ old('name') }}">
 
             @if ($errors->has('name'))
-                <div class="form-control-feedback">
+                <div class="invalid-feedback">
                     <strong>{{ $errors->first('name') }}</strong>
                 </div>
             @endif
diff --git a/resources/views/themes/base/partials/permission_checkbox.blade.php b/resources/views/themes/base/partials/permission_checkbox.blade.php
index 51a00fb..2d0576a 100644
--- a/resources/views/themes/base/partials/permission_checkbox.blade.php
+++ b/resources/views/themes/base/partials/permission_checkbox.blade.php
@@ -1,5 +1,7 @@
-<div class="checkbox">
-    <label for="permission|{{ $key_id }}|{{ $permission->id }}">
-        <input id="permission|{{ $key_id }}|{{ $permission->id }}" name="permissions[{{ $object_id }}][]" value="{{ $permission->id }}" type="checkbox"{{ call_user_func($callback, $callback_object, $permission) ? ' checked="checked"' : '' }} /> {{ trans(sprintf('permissions.%s.%s', $permission->section, $permission->description)) }}
+<div>
+    <label class="custom-control custom-checkbox" for="permission|{{ $key_id }}|{{ $permission->id }}">
+        <input type="checkbox" class="custom-control-input" id="permission|{{ $key_id }}|{{ $permission->id }}" name="permissions[{{ $object_id }}][]" value="{{ $permission->id }}"{{ call_user_func($callback, $callback_object, $permission) ? ' checked="checked"' : '' }}>
+        <span class="custom-control-indicator"></span>
+        <span class="custom-control-description">{{ trans(sprintf('permissions.%s.%s', $permission->section, $permission->description)) }}</span>
     </label>
 </div>
\ No newline at end of file