first commit
This commit is contained in:
66
resources/views/pages/advanced-ui/cropper.blade.php
Executable file
66
resources/views/pages/advanced-ui/cropper.blade.php
Executable file
@ -0,0 +1,66 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/cropperjs/cropper.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Cropper</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">CropperJs</h4>
|
||||
<p class="text-muted">Read the <a href="https://github.com/fengyuanchen/cropperjs" target="_blank"> Official CropperJs Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<input class="form-control" type="file" id="cropperImageUpload">
|
||||
</div>
|
||||
<div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="w-100" id="croppingImage" alt="cropper">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="d-flex align-items-center me-2 mt-3">
|
||||
<label class="w-50 me-3 mb-0 mb-2 mb-md-0 text-nowrap">Width (px) :</label>
|
||||
<input type="number" value="300" class="form-control img-w me-2 mb-2 mb-md-0 w-75" placeholder="Image width">
|
||||
<button class="btn btn-primary crop mb-2 mb-md-0">Crop</button>
|
||||
</div>
|
||||
<div class="mb-4 mb-md-0 mt-3">
|
||||
<a href="javascript:;" class="btn btn-outline-primary download">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 ms-auto">
|
||||
<h6 class="text-muted mb-3">Cropped Image: </h6>
|
||||
<img class="w-100 cropped-img mt-2" src="#" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/cropperjs/cropper.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/cropper.js') }}"></script>
|
||||
@endpush
|
||||
243
resources/views/pages/advanced-ui/owl-carousel.blade.php
Executable file
243
resources/views/pages/advanced-ui/owl-carousel.blade.php
Executable file
@ -0,0 +1,243 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.carousel.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.theme.default.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/animate-css/animate.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Owl Carousel</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Owl Carousel 2</h4>
|
||||
<p class="text-muted">Read the <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank"> Official Owl Carousel 2 Plugin Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Basic Example</h6>
|
||||
<div class="owl-carousel owl-theme owl-basic">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Auto Play</h6>
|
||||
<div class="owl-carousel owl-theme owl-auto-play">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Animation</h6>
|
||||
<p class="text-muted mb-3">fadeout</p>
|
||||
<div class="owl-carousel owl-theme owl-fadeout">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Animation</h6>
|
||||
<p class="text-muted mb-3">Using <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a> library.</p>
|
||||
<div class="owl-carousel owl-theme owl-animate-css">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mousewheel</h6>
|
||||
<p class="text-muted mb-3">To add mouswheel scrolling just include the fantastic plugin <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery.mousewheel.js</a>.</p>
|
||||
<div class="owl-carousel owl-theme owl-mouse-wheel">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/owl-carousel/owl.carousel.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery-mousewheel/jquery.mousewheel.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/carousel.js') }}"></script>
|
||||
@endpush
|
||||
304
resources/views/pages/advanced-ui/sortablejs.blade.php
Executable file
304
resources/views/pages/advanced-ui/sortablejs.blade.php
Executable file
@ -0,0 +1,304 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">SortableJs</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">SortableJs</h4>
|
||||
<p class="text-muted">Reorderable drag-and-drop lists for modern browsers and touch devices. Read the <a href="https://sortablejs.github.io/Sortable/" target="_blank"> Official SortableJs Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Simple list</h6>
|
||||
<ul class="list-group" id="simple-list">
|
||||
<li class="list-group-item">item 1</li>
|
||||
<li class="list-group-item">item 2</li>
|
||||
<li class="list-group-item">item 3</li>
|
||||
<li class="list-group-item">item 4</li>
|
||||
<li class="list-group-item">item 5</li>
|
||||
<li class="list-group-item">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Handle</h6>
|
||||
<ul class="list-group" id="handle-example">
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 1</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 2</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 3</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 4</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 5</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Shared lists</h6>
|
||||
<p class="text-muted mb-3">Try dragging from one list to another.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Cloning</h6>
|
||||
<p class="text-muted mb-3">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-2-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-2-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Disabling sorting</h6>
|
||||
<p class="text-muted mb-3">Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-3-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-3-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Filter</h6>
|
||||
<p class="text-muted mb-3">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.</p>
|
||||
<ul class="list-group" id="filter-example">
|
||||
<li class="list-group-item">item 1</li>
|
||||
<li class="list-group-item">item 2</li>
|
||||
<li class="list-group-item list-group-item-danger filtered">item 3</li>
|
||||
<li class="list-group-item">item 4</li>
|
||||
<li class="list-group-item">item 5</li>
|
||||
<li class="list-group-item">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Grid example</h6>
|
||||
<div class="d-flex gap-3 flex-wrap" id="grid-example">
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 1
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 2
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 3
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 4
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 5
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 6
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 7
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 8
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 9
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 10
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 11
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 12
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 13
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 14
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 15
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Nested sortables</h6>
|
||||
<p class="text-muted mb-3">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br>It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
|
||||
<div id="nested-sortable" class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.1
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.2
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.4
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/sortablejs/Sortable.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sortablejs.js') }}"></script>
|
||||
@endpush
|
||||
114
resources/views/pages/advanced-ui/sweet-alert.blade.php
Executable file
114
resources/views/pages/advanced-ui/sweet-alert.blade.php
Executable file
@ -0,0 +1,114 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Sweet Alert</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">SweetAlert2</h4>
|
||||
<p class="text-muted">Read the <a href="https://sweetalert2.github.io/" target="_blank"> Official SweetAlert2 Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Basic Alert</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('basic')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A title with a text under</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('title-and-text')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Mixin example</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('mixin')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Custom HTML description and buttons</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('custom-html')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Custom position</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('custom-position')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A message with auto close timer</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('message-with-auto-close')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">passing a parameter, you can execute something else for "Cancel"</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('passing-parameter-execute-cancel')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A message with a custom image</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('message-with-custom-image')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">With a title, an error icon, a text, and a footer</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('title-icon-text-footer')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user