Update to bootstrap 5

This commit is contained in:
Kevin MacMartin 2021-05-21 22:33:55 -04:00
parent 9c7cbc2148
commit 03963f56b9
9 changed files with 7745 additions and 3926 deletions

11040
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -8,14 +8,14 @@
"browser-sync": "2.26.14" "browser-sync": "2.26.14"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.14.0", "@babel/core": "^7.14.3",
"@babel/preset-env": "^7.14.1", "@babel/preset-env": "^7.14.2",
"@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-free": "^5.15.3",
"@mr-hope/gulp-sass": "^2.0.0", "@mr-hope/gulp-sass": "^2.0.0",
"autonumeric": "^4.6.0", "autonumeric": "^4.6.0",
"autoprefixer": "^10.2.5", "autoprefixer": "^10.2.5",
"babelify": "^10.0.0", "babelify": "^10.0.0",
"bootstrap": "4.6.0", "bootstrap": "5.0.1",
"browserify": "^17.0.0", "browserify": "^17.0.0",
"easymde": "^2.15.0", "easymde": "^2.15.0",
"fancy-log": "^1.3.3", "fancy-log": "^1.3.3",
@ -35,7 +35,8 @@
"list.js": "^2.3.1", "list.js": "^2.3.1",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"postcss": "^8.2.14", "postcss": "^8.3.0",
"sass": "1.32.12",
"sortablejs": "^1.13.0", "sortablejs": "^1.13.0",
"spinkit": "^2.0.1", "spinkit": "^2.0.1",
"vinyl-buffer": "^1.0.1", "vinyl-buffer": "^1.0.1",

View file

@ -9,7 +9,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="sr-only">Toggle navigation</span> <span class="visually-hidden">Toggle navigation</span>
</button> </button>
</div> </div>

File diff suppressed because it is too large Load diff

View file

@ -24,7 +24,7 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
@include aspect-ratio(3, 1); @include aspect-ratio(3, 1);
width: 100%; width: 100%;
} }

View file

@ -122,6 +122,7 @@
color: $c-text-light; color: $c-text-light;
font-size: pxrem(14); font-size: pxrem(14);
text-transform: uppercase; text-transform: uppercase;
text-decoration: none;
@media (max-width: $nav-mobile-max) { @media (max-width: $nav-mobile-max) {
display: block; display: block;

View file

@ -138,8 +138,10 @@
@endforeach @endforeach
<div class="row"> <div class="row">
<button id="back" type="button" class="back-button btn btn-secondary">Back</button> <div class="col-12">
<button id="submit" type="button" class="submit-button btn btn-primary no-input">{{ $id == 'new' ? 'Create' : 'Update' }} {{ $heading }} Item</button> <button id="back" type="button" class="back-button btn btn-secondary">Back</button>
<button id="submit" type="button" class="submit-button btn btn-primary no-input">{{ $id == 'new' ? 'Create' : 'Update' }} {{ $heading }} Item</button>
</div>
</div> </div>
</div> </div>
</form> </form>

View file

@ -28,7 +28,7 @@
</form> </form>
<form id="user-profile-update" class="edit-item user-profile-update"> <form id="user-profile-update" class="edit-item user-profile-update">
<h2 class="form-title">User Profile <i class="fas fa-upload"></i></h2> <h2 class="form-title">User Profile</h2>
<label for="email">Email:</label> <label for="email">Email:</label>
<input class="text-input" type="text" name="email" id="email" value="{{ $user->email }}" disabled /> <input class="text-input" type="text" name="email" id="email" value="{{ $user->email }}" disabled />

View file

@ -1,60 +1,82 @@
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/dashboard"> <div class="container-fluid">
{{ env('APP_NAME') }} Dashboard <a class="navbar-brand" href="/dashboard">
</a> {{ env('APP_NAME') }} Dashboard
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dashboard-navbar" aria-controls="dashboard-navbar" aria-expanded="false" aria-label="Toggle navigation"> <button
<span class="navbar-toggler-icon"> class="navbar-toggler"
<span class="navbar-toggler-icon-bar"></span> type="button"
<span class="navbar-toggler-icon-bar"></span> data-bs-toggle="collapse"
<span class="navbar-toggler-icon-bar"></span> data-bs-target="#dashboard-navbar"
</span> aria-controls="dashboard-navbar"
</button> aria-expanded="false"
aria-label="Toggle navigation">
<div id="dashboard-navbar" class="collapse navbar-collapse"> <span class="navbar-toggler-icon">
<ul class="navbar-nav ml-auto"> <span class="navbar-toggler-icon-bar"></span>
@if (Auth::guest()) <span class="navbar-toggler-icon-bar"></span>
<li class="nav-item"><a class="nav-link {{ $current_page == 'login' ? 'active' : '' }}" href="/login">Login</a></li> <span class="navbar-toggler-icon-bar"></span>
</span>
</button>
@if(App\Dashboard::canRegister()) <div id="dashboard-navbar" class="collapse navbar-collapse">
<li class="nav-item"><a class="nav-link {{ $current_page == 'register' ? 'active' : '' }}" href="/register">Register</a></li> <ul class="navbar-nav ms-auto">
@endif @if (Auth::guest())
@else <li class="nav-item"><a class="nav-link {{ $current_page == 'login' ? 'active' : '' }}" href="/login">Login</a></li>
@foreach(App\Dashboard::$menu as $menu_item)
@if(array_key_exists('submenu', $menu_item))
@set('dropdown_id', preg_replace([ '/\ \ */', '/[^a-z\-]/' ], [ '-', '' ], strtolower($menu_item['title'])))
<li class="nav-item dropdown"> @if(App\Dashboard::canRegister())
<span id="menu-dropdown-{{ $dropdown_id }}" class="nav-link dropdown-toggle {{ array_search($current_page, array_column($menu_item['submenu'], 'model')) !== false ? 'active' : '' }}" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <li class="nav-item"><a class="nav-link {{ $current_page == 'register' ? 'active' : '' }}" href="/register">Register</a></li>
{{ $menu_item['title'] }} <span class="caret"></span>
</span>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu-dropdown-{{ $dropdown_id }}">
@foreach($menu_item['submenu'] as $submenu_item)
<a class="dropdown-item {{ $current_page == $submenu_item['model'] ? 'active' : '' }}" href="/dashboard/{{ $submenu_item['type'] }}/{{ $submenu_item['model'] }}">{{ $submenu_item['title'] }}</a>
@endforeach
</div>
</li>
@else
<li class="nav-item">
<a class="nav-link {{ $current_page == $menu_item['model'] ? 'active' : '' }}" href="/dashboard/{{ $menu_item['type'] }}/{{ $menu_item['model'] }}">
{{ $menu_item['title'] }}
</a>
</li>
@endif @endif
@endforeach @else
@foreach(App\Dashboard::$menu as $menu_item)
@if(array_key_exists('submenu', $menu_item))
@set('dropdown_id', preg_replace([ '/\ \ */', '/[^a-z\-]/' ], [ '-', '' ], strtolower($menu_item['title'])))
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a id="user-dropdown" class="nav-link dropdown-toggle {{ $current_page == 'settings' ? 'active' : '' }}" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button
{{ Auth::user()->name }} <span class="caret"></span> id="menu-dropdown-{{ $dropdown_id }}"
</a> type="button"
class="nav-link dropdown-toggle {{ array_search($current_page, array_column($menu_item['submenu'], 'model')) !== false ? 'active' : '' }}"
data-bs-toggle="dropdown"
aria-expanded="false">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown"> {{ $menu_item['title'] }} <span class="caret"></span>
<a class="dropdown-item {{ $current_page == 'settings' ? 'active' : '' }}" href="/dashboard/settings">Settings</a> </button>
<a class="dropdown-item" href="/logout">Logout</a>
</div> <ul class="dropdown-menu" aria-labelledby="menu-dropdown-{{ $dropdown_id }}">
</li> @foreach($menu_item['submenu'] as $submenu_item)
@endif <li><a class="dropdown-item {{ $current_page == $submenu_item['model'] ? 'active' : '' }}" href="/dashboard/{{ $submenu_item['type'] }}/{{ $submenu_item['model'] }}">{{ $submenu_item['title'] }}</a></li>
</ul> @endforeach
</ul>
</li>
@else
<li class="nav-item">
<a class="nav-link {{ $current_page == $menu_item['model'] ? 'active' : '' }}" href="/dashboard/{{ $menu_item['type'] }}/{{ $menu_item['model'] }}">
{{ $menu_item['title'] }}
</a>
</li>
@endif
@endforeach
<li class="nav-item dropdown">
<button
id="user-dropdown"
type="button"
class="nav-link dropdown-toggle {{ $current_page == 'settings' ? 'active' : '' }}"
data-bs-toggle="dropdown"
aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="user-dropdown">
<li><a class="dropdown-item {{ $current_page == 'settings' ? 'active' : '' }}" href="/dashboard/settings">Settings</a></li>
<li><a class="dropdown-item" href="/logout">Logout</a></li>
</ul>
</li>
@endif
</ul>
</div>
</div> </div>
</nav> </nav>