Style changes when rendering the DN header

.gitea/workflows/build_docker.yaml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} Building Docker Image 🐳
 on: [push]
 env:
   DOCKER_HOST: tcp://127.0.0.1:2375
-  ASSETS: 41d6948
+  ASSETS: 261aa07
 
 jobs:
   test:

public/css/custom.css

@@ -1,9 +1,3 @@
-img.jpegphoto {
-	display:block;
-	max-width:100px;
-	height:100px;
-}
-
 /** ensure our userpassword has select is next to the password input */
 div#userPassword .select2-container--bootstrap-5 .select2-selection {
 	font-size: inherit;
@@ -27,4 +21,49 @@ div#objectClass .input-group-end:not(input.form-control) {
 input.form-control.input-group-end {
 	border-bottom-right-radius: 4px !important;
 	border-top-right-radius: 4px !important;
+}
+
+.custom-tooltip-warning {
+	--bs-tooltip-bg: var(--bs-warning);
+	--bs-tooltip-color: black;
+}
+
+.custom-tooltip-danger {
+	--bs-tooltip-bg: var(--bs-danger);
+
+}
+
+.tooltip {
+	font-size: 85%;
+}
+
+/*
+.custom-tooltip-warning .tooltip-inner {
+	--bs-tooltip-bg: #ffffff;
+	--bs-tooltip-color: var(--bs-warning);
+	--bs-font-size: 85%;
+	border: 2px solid var(--bs-warning);
+	border-radius: 6px;
+}
+
+.custom-tooltip-warning .tooltip-arrow::before {
+	--bs-tooltip-bg: var(--bs-warning);
+}
+
+.custom-tooltip-danger .tooltip-inner {
+	--bs-tooltip-bg: #ffffff;
+	--bs-tooltip-color: var(--bs-danger);
+	--bs-font-size: 85%;
+	border: 2px solid var(--bs-danger);
+	border-radius: 6px;
+}
+
+.custom-tooltip-danger .tooltip-arrow::before {
+	--bs-tooltip-bg: var(--bs-danger);
+}
+*/
+
+/* hide the site icons when the search is opened */
+.search-wrapper.active + .header-menu.nav {
+	display: none;
 }

public/css/fixes.css

@@ -143,11 +143,6 @@ ul.fancytree-container ul {
 	opacity: 0;
 }
 
-/* Fix ellipsis icon (top right) on small display with the light background */
-.closed-sidebar .app-header.header-text-light .app-header__menu .mobile-toggle-header-nav {
-	background: #343a40;
-}
-
 /* Hide tree when collapsed and show it when open */
 .sidebar-mobile-open:hover #tree, /* small */
 .fixed-sidebar #tree, /* wide */
@@ -160,12 +155,6 @@ ul.fancytree-container ul {
 }
 
 /** Server icons **/
-.closed-sidebar .server-icon {
-	display: none;
-}
-.closed-sidebar .app-sidebar:hover .server-icon, .sidebar-mobile-open .server-icon {
-	display: flex;
-}
 .font-icon-wrapper {
 	text-align: center;
 	border: #e9ecef solid 1px;
@@ -181,47 +170,6 @@ ul.fancytree-container ul {
 	font-size: 1.2rem;
 }
 
-/*
-.font-icon-wrapper {
-	text-align: center;
-	border: $gray-200 solid 1px;
-	@include border-radius($border-radius);
-	margin: 0 0 10px;
-	padding: 5px;
-
-&.font-icon-lg {
-	 float: left;
-	 padding: 10px;
-	 text-align: center;
-	 margin-right: 15px;
-	 min-width: 64px;
-
-i {
-	font-size: $h1-font-size;
-}
-}
-
-&:hover {
-	 background: $gray-100;
-	 color: $primary;
-
-p {
-	color: $gray-600;
-}
-}
-
-i {
-	font-size: ($font-size-base * 1.5);
-}
-
-p {
-	color: $gray-500;
-	font-size: calc($font-size-sm / 1.2);
-	margin: 5px 0 0;
-}
-}
-*/
-
 /** Ensure our DN menu is at the top **/
 .app-page-title .page-title-wrapper {
 	align-items: start;

public/js/custom.js

@@ -36,11 +36,11 @@ function getNode(item) {
 			case 404:
 				$('.main-content').empty().append(e.responseText);
 				break;
-			case 409:
+			case 409:	// Not in root
 				location.replace('/#'+item);
 				break;
-			case 419:
-				alert('Session has expired, reloading the page and try again...');
+			case 419:	// Session Expired
+				location.replace('/#'+item);
 				location.reload();
 				break;
 			case 500:

resources/themes/architect/src/components/bootstrap5/_close.scss

@@ -3,10 +3,23 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
+.header-text-dark * .btn-close {
+  --#{$prefix}btn-close-color: #{$btn-close-color-dark};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-dark) };
+}
+.header-text-light *.btn-close {
+  --#{$prefix}btn-close-color: #{$btn-close-color-light};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-light) };
+}
+
 .btn-close {
   // scss-docs-start close-css-vars
   --#{$prefix}btn-close-color: #{$btn-close-color};
   --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-color-light: #{$btn-close-color-light};
+  --#{$prefix}btn-close-bg-light: #{ escape-svg($btn-close-bg-light) };
+  --#{$prefix}btn-close-color-dark: #{$btn-close-color-dark};
+  --#{$prefix}btn-close-bg-dark: #{ escape-svg($btn-close-bg-dark) };
   --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
   --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
   --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};

resources/themes/architect/src/components/bootstrap5/_variables.scss

@@ -1705,6 +1705,10 @@ $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
 $btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-color-dark:            $black !default;
+$btn-close-color-light:            $gray-100 !default;
+$btn-close-bg-dark:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-dark}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-bg-light:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-light}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;

resources/themes/architect/src/layout/header/_header-base.scss

@@ -26,20 +26,6 @@
       align-items: center;
     }
 
-    .header-menu {
-      .nav-link {
-        color: $gray-600;
-
-        i {
-          color: $gray-500;
-        }
-
-        &:hover {
-          color: $gray-900;
-        }
-      }
-    }
-
     .app-header-right {
       align-items: center;
       display: flex;

resources/themes/architect/src/layout/header/themes/_header-dark.scss

@@ -114,14 +114,6 @@
       }
     }
 
-    .app-header__mobile-menu {
-      .hamburger-inner,
-      .hamburger-inner::before,
-      .hamburger-inner::after {
-        background: $gray-800;
-      }
-    }
-
   }
 
 }

resources/themes/architect/src/layout/header/themes/_header-light.scss

@@ -128,7 +128,7 @@
       .hamburger-inner,
       .hamburger-inner::before,
       .hamburger-inner::after {
-        background: $gray-800;
+        background: rgba(0, 0, 0, .8);
       }
     }
 

resources/themes/architect/src/layout/responsive/_responsive-base.scss

@@ -173,6 +173,7 @@
         & > .btn {
           background: rgba(255, 255, 255, .1);
           border-color: rgba(255, 255, 255, .1);
+          color: rgba(0, 0, 0, .9);
         }
       }
 
@@ -448,4 +449,4 @@
       }
     }
   }
-}
+}

resources/themes/architect/views/auth/login.blade.php

@@ -13,20 +13,20 @@
 					<div class="mx-auto app-login-box col-md-8">
 						<x-file-note file="login-note.html"/>
 
-						<div class="modal-dialog w-100 mx-auto">
+						<div class="modal-dialog modal-lg">
 							<div class="modal-content">
-								<form class="needs-validation" novalidate method="post">
-									{{ csrf_field() }}
+								<form class="form-control needs-validation p-0" novalidate method="post">
+									@csrf
 
-									<div class="modal-body">
+									<div class="modal-body p-3">
 										<div class="h5 modal-title text-center">
 											<h4 class="mt-2">
 												<div class="app-logo mx-auto mb-3"><img class="w-75" src="{{ url('images/logo-h-lg.png') }}"></div>
-												<small>@lang('Sign in to <strong>:server</strong>',['server'=>config('ldap.connections.default.name')])</small>
+												<small>@lang('Sign in to') <strong>{{ config('server')->name }}</strong></small>
 											</h4>
 										</div>
 
-										<div class="form-row">
+										<div class="row">
 											<div class="col-md-12 mt-3">
 												<label class="mb-1">{{ login_attr_description() }}</label>
 												<input name="{{ login_attr_name() }}" id="user" placeholder="" type="@if(in_array(login_attr_name(),['mail','email'])) email @else text @endif" class="form-control" required="">
@@ -34,7 +34,9 @@
 													@lang('Please enter your '.strtolower(login_attr_description()))
 												</div>
 											</div>
+										</div>
 
+										<div class="row">
 											<div class="col-md-12 mt-2">
 												<label class="mb-1">@lang('Password')</label>
 												<input name="password" id="password" placeholder="" type="password" class="form-control" required>
@@ -43,21 +45,28 @@
 												</div>
 											</div>
 										</div>
-									</div>
 
-									<div class="modal-footer">
 										@if (count($errors) > 0)
-											<div class="alert alert-danger w-100">
-												<strong>Whoops!</strong> Something went wrong?<br><br>
-												<ul>
-													@foreach ($errors->all() as $error)
-														<li>{{ $error }}</li>
-													@endforeach
-												</ul>
+											<div class="row">
+												<div class="col">
+													<div class="alert alert-danger	 m-3">
+														<strong>Whoops!</strong> Something went wrong?<br><br>
+														<ul>
+															@foreach ($errors->all() as $error)
+																<li>{{ $error }}</li>
+															@endforeach
+														</ul>
+													</div>
+												</div>
 											</div>
 										@endif
-										<div class="float-end">
-											<button class="btn btn-lg btn-primary">Login</button>
+									</div>
+
+									<div class="modal-footer p-2 border-top">
+											<div class="row">
+											<div class="col float-end">
+												<button class="btn btn-lg btn-primary">Login</button>
+											</div>
 										</div>
 									</div>
 								</form>

resources/themes/architect/views/layouts/partials/contentfooter.blade.php

@@ -6,24 +6,6 @@
 					<li class="nav-item">
 						<strong>{{ config('app.version') }}</strong>
 					</li>
-					@if(($x=Config::get('update_available')) && $x->action !== 'current')
-						<li class="nav-item ms-2">
-							@switch($x->action)
-								@case('unable')
-									<abbr title="Upstream Version Unavailable"><i class="fas fa-exclamation text-alternate"></i></abbr>
-									@break
-								@case('upgrade')
-									<abbr title="Update Available: {{ $x->version }}"><i class="fas fa-wrench text-danger"></i></abbr>
-									@break
-								@case('mismatch')
-									<abbr title="Version Issue - Upstream {{ $x->version }}"><i class="fas fa-exclamation text-danger"></i></abbr>
-									@break
-								@case('unknown')
-									<abbr title="Version Issue - Upstream {{ $x->version }}"><i class="fas fa-bolt text-alternate"></i></abbr>
-									@break
-							@endswitch
-						</li>
-					@endif
 					{{--
 					<li class="nav-item">
 						<a href="javascript:void(0);" class="nav-link">Footer Link</a>

resources/themes/architect/views/layouts/partials/contentheader.blade.php

@@ -6,61 +6,60 @@
 					<i class="@yield('page_icon','')"></i>
 				</div>
 			@endif
-			<div>
-				@yield('page_title','Page Title')
-				<div class="page-title-subheading">
-					@yield('page_subtitle','')
-				</div>
+
+			@yield('page_title','Page Title')
+			<div class="page-title-subheading">
+				@yield('page_subtitle','')
 			</div>
 		</div>
 
-		@if (isset($page_actions) || old())
-			<div class="page-title-actions">
-				<div class="page-title-actions">
-					<div class="d-inline-block dropdown">
-						<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">
-							<span class="btn-icon-wrapper pe-2 opacity-7">
-								<i class="fa fa-business-time fa-w-20"></i>
-							</span>
-							@lang('Entry Options')
-						</button>
-
-						<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
-							<ul class="nav flex-column">
-								@if ((isset($page_actions) && $page_actions->contains('edit')) || old())
-									<li class="nav-item">
-										<span class="nav-link pt-0 pb-1">
-											<button id="entry-edit" class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start">
-												<i class="fas fa-fw fa-edit me-2"></i> @lang('Edit')
-											</button>
-										</span>
-									</li>
-								@endif
-
-								@if (isset($page_actions) && $page_actions->contains('export'))
-									<li class="nav-item">
-										<a class="nav-link pt-0 pb-1">
-											<button type="button" class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start" data-bs-toggle="modal" data-bs-target="#entry_export-modal">
-												<i class="fas fa-fw fa-file-export me-2"></i> @lang('Export')
-											</button>
-										</a>
-									</li>
-								@endif
-
-								@if (isset($page_actions) && $page_actions->contains('copy'))
-									<li class="nav-item">
-										<a class="nav-link pt-0 pb-1">
-											<button class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start">
-												<i class="fas fa-fw fa-truck-moving me-2"></i> @lang('Copy or Move')
-											</button>
-										</a>
-									</li>
-								@endif
-							</ul>
-						</div>
+		<div class="page-title-actions">
+			<div class="row">
+				<div class="col">
+					<div class="action-buttons float-end">
+						<ul class="nav">
+							@if(isset($page_actions) && $page_actions->contains('export'))
+								<li>
+									<span data-bs-toggle="modal" data-bs-target="#entry_export-modal">
+										<button class="btn btn-outline-dark p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Export')"><i class="fas fa-fw fa-download fs-5"></i></button>
+									</span>
+								</li>
+							@endif
+							@if(isset($page_actions) && $page_actions->contains('copy'))
+								<li>
+									<button class="btn btn-outline-dark p-1 m-1" id="entry-copy-move" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Copy/Move')"><i class="fas fa-fw fa-copy fs-5"></i></button>
+								</li>
+							@endif
+							@if((isset($page_actions) && $page_actions->contains('edit')) || old())
+								<li>
+									<button class="btn btn-outline-dark p-1 m-1" id="entry-edit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Edit Entry')"><i class="fas fa-fw fa-edit fs-5"></i></button>
+								</li>
+							@endif
+							@if(isset($page_actions) && $page_actions->contains('delete'))
+								<li>
+									<button class="btn btn-outline-danger p-1 m-1" id="entry-delete" data-bs-custom-class="custom-tooltip-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Delete Entry')"><i class="fas fa-fw fa-trash-can fs-5"></i></button>
+								</li>
+							@endif
+						</ul>
 					</div>
 				</div>
 			</div>
-		@endif
+		</div>
 	</div>
-</div>
+</div>
+
+@section('page-scripts')
+	<script type="text/javascript">
+		$(document).ready(function() {
+			console.log($('button[id=entry-edit]'));
+			$('button[id=entry-edit]').on('click',function(item) {
+				item.preventDefault();
+
+				if ($(this).hasClass('btn-dark'))
+					return;
+
+				editmode();
+			});
+		});
+	</script>
+@append

resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php

@@ -33,23 +33,6 @@
 		<div class="app-sidebar__inner">
 			<ul class="vertical-nav-menu">
 				<li class="app-sidebar__heading">{{ config('server')->name }}</li>
-				<li>
-					<div class="font-icon-wrapper float-start me-1 server-icon">
-						<a class="p-0 m-0" href="{{ url('info') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-info"></i></a>
-					</div>
-					<div class="font-icon-wrapper float-start ms-1 me-1 server-icon">
-						<a class="p-0 m-0" href="{{ url('schema') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-fingerprint"></i></a>
-					</div>
-					<div class="font-icon-wrapper float-start ms-1 me-1 server-icon">
-						<a class="p-0 m-0" href="{{ url('import') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-upload"></i></a>
-					</div>
-					@env(['local'])
-						<div class="font-icon-wrapper float-end ms-1 server-icon">
-							<a class="p-0 m-0" href="{{ url('debug') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-toolbox"></i></a>
-						</div>
-					@endenv
-					<div class="clearfix"></div>
-				</li>
 				<li>
 					<i id="treeicon" class="metismenu-icon fa-fw fas fa-sitemap"></i>
 					<span class="f16" id="tree"></span>
@@ -57,39 +40,4 @@
 			</ul>
 		</div>
 	</div>
-</div>
-
-@section('page-scripts')
-	<script type="text/javascript">
-		$(document).ready(function() {
-			$('.server-icon > a').on('click',function(item) {
-				var content;
-
-				$.ajax({
-					url: $(this).attr('href'),
-					method: 'GET',
-					dataType: 'html',
-					statusCode: {
-						404: function() {
-							$('.main-content').empty().append(content);
-						}
-					},
-					beforeSend: function() {
-						content = $('.main-content').contents();
-						$('.main-content').empty().append('<div class="fa-3x"><i class="fas fa-spinner fa-pulse"></i></div>');
-					}
-
-				}).done(function(html) {
-					$('.main-content').empty().append(html);
-
-				}).fail(function() {
-					alert('Well that didnt work?');
-				});
-
-				item.stopPropagation();
-
-				return false;
-			});
-		});
-	</script>
-@append
+</div>

resources/themes/architect/views/layouts/partials/topmenu.blade.php

@@ -39,21 +39,67 @@
 				<button class="btn-close"></button>
 			</div>
 
-			<ul class="header-menu nav">
-				{{--
-				<li class="nav-item">
-					<a href="javascript:void(0);" class="nav-link">
-						<i class="nav-link-icon fas fa-database"></i> Link
-					</a>
+			<ul class="header-menu nav server-icon">
+				<li>
+					<button id="link-info" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Server Info')" data-link="{{ url('info') }}">
+						<i class="fas fa-fw fa-info fs-5"></i>
+					</button>
+				</li>
+				<li>
+					<button id="link-schema" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Schema Viewer')" data-link="{{ url('schema') }}">
+						<i class="fas fa-fw fa-fingerprint fs-5"></i>
+					</button>
+				</li>
+				<li>
+					<button id="link-import" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Import')" data-link="{{ url('import') }}">
+						<i class="fas fa-fw fa-upload fs-5"></i>
+					</button>
+				</li>
+				<li>
+					<button id="link-debug" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Debug')" data-link="{{ url('debug') }}">
+						<i class="fas fa-fw fa-toolbox fs-5"></i>
+					</button>
 				</li>
-				--}}
 			</ul>
 		</div>
 
 		<div class="app-header-right">
-			@if(! request()->isSecure())
-				<span class="badge bg-danger">WARNING - SESSION NOT SECURE</span>
-			@endif
+			<ul class="header-menu nav">
+				@if(! request()->isSecure())
+					<li>
+						<button class="btn btn-danger p-1 m-1" data-bs-custom-class="custom-tooltip-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="WARNING - SESSION NOT SECURE">
+							<i class="fas fa-fw fa-unlock-keyhole fs-5"></i>
+						</button>
+					</li>
+				@endif
+
+				@if(($x=Config::get('update_available')) && $x->action !== 'current')
+					<li>
+						@switch($x->action)
+							@case('unable')
+								<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Upstream Version Unavailable">
+									<i class="fas fa-fw fa-bolt fs-5"></i>
+								</button>
+								@break
+							@case('upgrade')
+								<button class="btn btn-warning p-1 m-1" data-bs-custom-class="custom-tooltip-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Update Available:<br>{{ $x->version }}">
+									<i class="fas fa-fw fa-wrench fs-5"></i>
+								</button>
+								@break
+							@case('mismatch')
+								<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Version Issue - Upstream<br>{{ $x->version }}">
+									<i class="fas fa-fw fa-exclamation fs-5"></i>
+								</button>
+								@break
+							@case('unknown')
+								<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Version Issue - Unknown<br>{{ $x->version }}">
+									<i class="fas fa-fw fa-question fs-5"></i>
+								</button>
+								@break
+						@endswitch
+					</li>
+				@endif
+			</ul>
 
 			<div class="header-btn-lg pe-0">
 				<div class="widget-content p-0">
@@ -112,3 +158,38 @@
 		</div>
 	</div>
 </div>
+
+@section('page-scripts')
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$('button[id^="link-"]').on('click',function(item) {
+				var content;
+
+				$.ajax({
+					url: $(this).data('link'),
+					method: 'GET',
+					dataType: 'html',
+					statusCode: {
+						404: function() {
+							$('.main-content').empty().append(content);
+						}
+					},
+					beforeSend: function() {
+						content = $('.main-content').contents();
+						$('.main-content').empty().append('<div class="fa-3x"><i class="fas fa-spinner fa-pulse"></i></div>');
+					}
+
+				}).done(function(html) {
+					$('.main-content').empty().append(html);
+
+				}).fail(function() {
+					alert('Well that didnt work?');
+				});
+
+				item.stopPropagation();
+
+				return false;
+			});
+		});
+	</script>
+@append

resources/views/components/attribute/binary/jpegphoto.blade.php

@@ -9,12 +9,12 @@
 					@default
 						<td>
 							<input type="hidden" name="{{ $o->name_lc }}[]" value="{{ md5($value) }}">
-							<img @class(['jpegphoto','is-invalid'=>($e=$errors->get($o->name_lc.'.'.$loop->index))]) src="data:{{ $x }};base64, {{ base64_encode($value) }}" />
+							<img @class(['border','rounded','p-2','m-0','is-invalid'=>($e=$errors->get($o->name_lc.'.'.$loop->index))]) src="data:{{ $x }};base64, {{ base64_encode($value) }}" />
 
 							@if ($edit)
 								<br>
 								<!-- @todo TO IMPLEMENT -->
-								<span class="btn btn-sm btn-danger deletable d-none"><i class="fas fa-trash-alt"></i> @lang('Delete')</span>
+								<span class="btn btn-sm btn-danger deletable d-none mt-3"><i class="fas fa-trash-alt"></i> @lang('Delete')</span>
 
 								<div class="invalid-feedback pb-2">
 									@if($e)

resources/views/components/attribute/password.blade.php

@@ -22,7 +22,7 @@
 	<div class="row">
 		<div class="offset-1 col-4 p-2">
 			<span class="p-0 m-0">
-				<button type="button" class="btn btn-transition btn-sm btn-outline-dark mt-3" data-bs-toggle="modal" data-bs-target="#userpassword_check-modal"><i class="fas fa-user-check"></i> @lang('Check Password')</button>
+				<button type="button" class="btn btn-sm btn-outline-dark mt-3" data-bs-toggle="modal" data-bs-target="#userpassword_check-modal"><i class="fas fa-user-check"></i> @lang('Check Password')</button>
 			</span>
 		</div>
 	</div>

resources/views/fragment/dn/header.blade.php

@@ -1,28 +1,28 @@
 <table class="table table-borderless">
-	<tr>
-		<td class="{{ ($x=$o->getObject('jpegphoto')) ? 'border' : '' }}" rowspan="2">
-			{!! $x ? $x->render(FALSE,TRUE) : sprintf('<div class="page-title-icon f32"><i class="%s"></i></div>',$o->icon() ?? "fas fa-info") !!}
+	<tr class="border-bottom line-height-2">
+		<td class="p-1 pt-0" rowspan="2">
+			{!! ($x=$o->getObject('jpegphoto')) ? $x->render(FALSE,TRUE) : sprintf('<div class="page-title-icon f32 m-2"><i class="%s"></i></div>',$o->icon() ?? "fas fa-info") !!}
 		</td>
-		<td class="text-end align-text-top p-0 {{ $x ? 'ps-5' : 'pt-2' }}"><strong>{{ $o->getDn() }}</strong></td>
+		<td class="text-end align-bottom pb-0 mb-0 pt-2 pe-3 {{ $x ? 'ps-3' : '' }}"><strong>{{ $o->getDn() }}</strong></td>
 	</tr>
 	<tr>
-		<td class="line-height-1" style="font-size: 55%;vertical-align: bottom;" colspan="2">
-			<table>
-				<tr>
-					<td class="p-1 m-1">Created</td>
-					<th class="p-1 m-1">
+		<td class="align-bottom" style="font-size: 55%" colspan="2">
+			<table class="table table-condensed table-borderless w-100">
+				<tr class="mt-1">
+					<td class="p-0 pe-2">Created</td>
+					<th class="p-0">
 						<x-attribute :o="$o->getObject('createtimestamp')" :na="__('Unknown')"/> [<x-attribute :o="$o->getObject('creatorsname')" :na="__('Unknown')"/>]
 					</th>
 				</tr>
-				<tr>
-					<td class="p-1 m-1">Modified</td>
-					<th class="p-1 m-1">
+				<tr class="mt-1">
+					<td class="p-0 pe-2">Modified</td>
+					<th class="p-0">
 						<x-attribute :o="$o->getObject('modifytimestamp')" :na="__('Unknown')"/> [<x-attribute :o="$o->getObject('modifiersname')" :na="__('Unknown')"/>]
 					</th>
 				</tr>
-				<tr>
-					<td class="p-1 m-1">UUID</td>
-					<th class="p-1 m-1">
+				<tr class="mt-1">
+					<td class="p-0 pe-2">UUID</td>
+					<th class="p-0">
 						<x-attribute :o="$o->getObject('entryuuid')" :na="__('Unknown')"/>
 					</th>
 				</tr>

resources/views/frames/create.blade.php

@@ -25,7 +25,7 @@
 						@switch($step)
 							@case(1)
 								<div class="row">
-									<div class="col-12 col-sm-6">
+									<div class="col-12 col-md-6">
 										<x-form.select
 											id="objectclass"
 											name="objectclass[]"
@@ -54,7 +54,7 @@
 					</form>
 
 					<div class="row d-none pt-3">
-						<div class="col-12 {{ $step > 1 ? 'offset-sm-2' : '' }} col-sm-4 col-lg-2">
+						<div class="col-12 {{ $step > 1 ? 'offset-sm-2' : '' }} col-lg-10">
 							<x-form.reset form="dn-create"/>
 							<x-form.submit action="Next" form="dn-create"/>
 						</div>

resources/views/frames/dn.blade.php

@@ -149,7 +149,9 @@
 		function editmode() {
 			$('#dn-edit input[name="dn"]').val(dn);
 
-			$('button[id=entry-edit]').addClass('active').removeClass('btn-outline-dark').addClass('btn-outline-light');
+			$('button[id=entry-edit]')
+				.removeClass('btn-outline-dark')
+				.addClass('btn-dark');
 
 			// Find all input items and turn off readonly
 			$('input.form-control').each(function() {
@@ -201,15 +203,6 @@
 					$('#newattr-select').remove();
 			});
 
-			$('button[id=entry-edit]').on('click',function(item) {
-				item.preventDefault();
-
-				if ($(this).hasClass('active'))
-					return;
-
-				editmode();
-			});
-
 			$('#entry_export-download').on('click',function(item) {
 				item.preventDefault();
 

resources/views/home.blade.php

@@ -48,23 +48,11 @@
 		var subpage = window.location.hash;
 
 		$(document).ready(function() {
+			// Enable navigating to a page via a URL fragment, and that fragment is defined with a server-icon
 			if (subpage) {
-				// Enable navigating to a page via a URL fragment, and that fragment is defined with a server-icon
-				var valid = Object.values($('.server-icon > a').map(function() {
-					return $(this).attr('id');
-				})).indexOf(subpage.substring(1));
-
-				if (valid !== -1) {
-					// @todo this condition can probably be removed
-					console.log('teleporting...:'+subpage.substring(1));
-					// The click() event wont have been registered yet, so we need to delay us clicking it
-					setTimeout(function() { $(subpage).click(); },250);
-
-				} else if (valid === -1) {
-					// Clear the hash
-					history.replaceState(null,null,' ');
-					getNode(subpage.substring(1));
-				}
+				// Clear the hash
+				history.replaceState(null,null,' ');
+				getNode(subpage.substring(1));
 			}
 		});
 	</script>

resources/views/layouts/dn.blade.php

@@ -12,4 +12,9 @@
 
 @yield('page-modals')
 @yield('page-scripts')
-@yield('page-styles')
+@yield('page-styles')
+
+<!-- Initialise any ajax tool tip attributes -->
+<script type="text/javascript">
+	$('[data-bs-toggle="tooltip"]').tooltip();
+</script>