mirror of https://github.com/ColorlibHQ/AdminLTE
split widgets html
Daniel
parent
ba2a2cebfe
commit
aea69fb70a
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- For RTL verison -->
|
||||
<!-- <html lang="en" dir="rtl"> -->
|
||||
<head>
|
||||
@@include('./_head.html', {
|
||||
"path": "../..",
|
||||
"title": "AdminLTE 4 | Widgets - Cards"
|
||||
})
|
||||
</head>
|
||||
<body class="layout-fixed">
|
||||
<div class="wrapper">
|
||||
@@include('./dashboard/_topbar.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
|
||||
@@include('./dashboard/_sidenav.html', {
|
||||
"mainPage": "widgets",
|
||||
"page": "cards",
|
||||
"path": "../.."
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content-wrapper">
|
||||
@@include('./dashboard/_content-header.html', {
|
||||
"header_name": "Widgets - Cards"
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<h4 class="mb-2 mt-4">Cards</h4>
|
||||
<h5 class="mb-2">Abilities</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
@@include('./dashboard/_footer.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
@@include('./_scripts.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,26 +4,26 @@
|
|||
<!-- <html lang="en" dir="rtl"> -->
|
||||
<head>
|
||||
@@include('./_head.html', {
|
||||
"path": "..",
|
||||
"title": "AdminLTE 4 | Widgets"
|
||||
"path": "../..",
|
||||
"title": "AdminLTE 4 | Widgets - Info Box"
|
||||
})
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
</head>
|
||||
<body class="layout-fixed">
|
||||
<div class="wrapper">
|
||||
@@include('./dashboard/_topbar.html', {
|
||||
"path": ".."
|
||||
"path": "../.."
|
||||
})
|
||||
|
||||
@@include('./dashboard/_sidenav.html', {
|
||||
"mainPage": "pages",
|
||||
"page": "widgets",
|
||||
"path": ".."
|
||||
"mainPage": "widgets",
|
||||
"page": "info-box",
|
||||
"path": "../.."
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content-wrapper">
|
||||
@@include('./dashboard/_content-header.html', {
|
||||
"header_name": "Widgets"
|
||||
"header_name": "Widgets - Info Box"
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content">
|
||||
|
|
@ -332,161 +332,6 @@
|
|||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
|
||||
<!-- Small Box (Stat card) -->
|
||||
<h5 class="mb-2 mt-4">Small Box</h5>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-primary">
|
||||
<div class="inner">
|
||||
<h3>150</h3>
|
||||
|
||||
<p>New Orders</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-bag"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-success">
|
||||
<div class="inner">
|
||||
<h3>53<sup class="fs-5">%</sup></h3>
|
||||
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-stats-bars"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-warning">
|
||||
<div class="inner">
|
||||
<h3>44</h3>
|
||||
|
||||
<p>User Registrations</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-person-add"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-danger">
|
||||
<div class="inner">
|
||||
<h3>65</h3>
|
||||
|
||||
<p>Unique Visitors</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-pie-graph"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<h4 class="mb-2 mt-4">Cards</h4>
|
||||
<h5 class="mb-2">Abilities</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
|
|
@ -494,13 +339,13 @@
|
|||
<!-- /.content-wrapper -->
|
||||
|
||||
@@include('./dashboard/_footer.html', {
|
||||
"path": ".."
|
||||
"path": "../.."
|
||||
})
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
@@include('./_scripts.html', {
|
||||
"path": ".."
|
||||
"path": "../.."
|
||||
})
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- For RTL verison -->
|
||||
<!-- <html lang="en" dir="rtl"> -->
|
||||
<head>
|
||||
@@include('./_head.html', {
|
||||
"path": "../..",
|
||||
"title": "AdminLTE 4 | Widgets - Small Box"
|
||||
})
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
</head>
|
||||
<body class="layout-fixed">
|
||||
<div class="wrapper">
|
||||
@@include('./dashboard/_topbar.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
|
||||
@@include('./dashboard/_sidenav.html', {
|
||||
"mainPage": "widgets",
|
||||
"page": "small-box",
|
||||
"path": "../.."
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content-wrapper">
|
||||
@@include('./dashboard/_content-header.html', {
|
||||
"header_name": "Widgets - Small Box"
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Small Box (Stat card) -->
|
||||
<h5 class="mb-2">Small Box</h5>
|
||||
<section class="row">
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-primary">
|
||||
<div class="inner">
|
||||
<h3>150</h3>
|
||||
|
||||
<p>New Orders</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-bag"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-success">
|
||||
<div class="inner">
|
||||
<h3>53<sup class="fs-5">%</sup></h3>
|
||||
|
||||
<p>Bounce Rate</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-stats-bars"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-warning">
|
||||
<div class="inner">
|
||||
<h3>44</h3>
|
||||
|
||||
<p>User Registrations</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-person-add"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<!-- small box -->
|
||||
<div class="small-box bg-danger">
|
||||
<div class="inner">
|
||||
<h3>65</h3>
|
||||
|
||||
<p>Unique Visitors</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="inner-icon ion ion-pie-graph"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ./col -->
|
||||
</section>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
@@include('./dashboard/_footer.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
@@include('./_scripts.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -41,15 +41,36 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="@@path/pages/widgets.html" class="nav-link @@if (context.page === 'widgets') {active}">
|
||||
<li class="nav-item @@if (context.mainPage === 'widgets') {menu-open}">
|
||||
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'widgets') {active}">
|
||||
<i class="nav-icon fas fa-circle"></i>
|
||||
<p>
|
||||
Widgets
|
||||
<span class="end badge bg-danger">New</span>
|
||||
<i class="end fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="@@path/pages/widgets/small-box.html" class="nav-link @@if (context.page === 'small-box') {active}">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<p>Small Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="@@path/pages/widgets/info-box.html" class="nav-link @@if (context.page === 'info-box') {active}">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<p>info Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="@@path/pages/widgets/cards.html" class="nav-link @@if (context.page === 'cards') {active}">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<p>Cards</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item @@if (context.mainPage === 'layout') {menu-open}">
|
||||
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'layout') {active}">
|
||||
<i class="nav-icon fas fa-circle"></i>
|
||||
|
|
|
|||
Loading…
Reference in New Issue