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

11024
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,10 +138,12 @@
@endforeach @endforeach
<div class="row"> <div class="row">
<div class="col-12">
<button id="back" type="button" class="back-button btn btn-secondary">Back</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> <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>
<div id="loading-modal"> <div id="loading-modal">

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,9 +1,18 @@
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="/dashboard"> <a class="navbar-brand" href="/dashboard">
{{ env('APP_NAME') }} Dashboard {{ env('APP_NAME') }} Dashboard
</a> </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
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#dashboard-navbar"
aria-controls="dashboard-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> <span class="navbar-toggler-icon">
<span class="navbar-toggler-icon-bar"></span> <span class="navbar-toggler-icon-bar"></span>
<span class="navbar-toggler-icon-bar"></span> <span class="navbar-toggler-icon-bar"></span>
@ -12,7 +21,7 @@
</button> </button>
<div id="dashboard-navbar" class="collapse navbar-collapse"> <div id="dashboard-navbar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ms-auto">
@if (Auth::guest()) @if (Auth::guest())
<li class="nav-item"><a class="nav-link {{ $current_page == 'login' ? 'active' : '' }}" href="/login">Login</a></li> <li class="nav-item"><a class="nav-link {{ $current_page == 'login' ? 'active' : '' }}" href="/login">Login</a></li>
@ -25,15 +34,21 @@
@set('dropdown_id', preg_replace([ '/\ \ */', '/[^a-z\-]/' ], [ '-', '' ], strtolower($menu_item['title']))) @set('dropdown_id', preg_replace([ '/\ \ */', '/[^a-z\-]/' ], [ '-', '' ], strtolower($menu_item['title'])))
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<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"> <button
{{ $menu_item['title'] }} <span class="caret"></span> id="menu-dropdown-{{ $dropdown_id }}"
</span> 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="menu-dropdown-{{ $dropdown_id }}"> {{ $menu_item['title'] }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu-dropdown-{{ $dropdown_id }}">
@foreach($menu_item['submenu'] as $submenu_item) @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> <li><a class="dropdown-item {{ $current_page == $submenu_item['model'] ? 'active' : '' }}" href="/dashboard/{{ $submenu_item['type'] }}/{{ $submenu_item['model'] }}">{{ $submenu_item['title'] }}</a></li>
@endforeach @endforeach
</div> </ul>
</li> </li>
@else @else
<li class="nav-item"> <li class="nav-item">
@ -45,16 +60,23 @@
@endforeach @endforeach
<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="user-dropdown"
</a> type="button"
class="nav-link dropdown-toggle {{ $current_page == 'settings' ? 'active' : '' }}"
data-bs-toggle="dropdown"
aria-expanded="false">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown"> {{ Auth::user()->name }} <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="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> </li>
@endif @endif
</ul> </ul>
</div> </div>
</div>
</nav> </nav>