github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

widgets.html page added

pull/3729/head
Daniel 2021-05-20 09:17:16 +05:30
parent 01e5b1ce2c
commit 20a53c6c95
8 changed files with 553 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.html
View File

@ -31,7 +31,7 @@
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-primary text-light">
<div class="small-box bg-primary">
<div class="inner">
<h3>150</h3>
@ -46,7 +46,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success text-light">
<div class="small-box bg-success">
<div class="inner">
<h3>53<sup class="fs-5">%</sup></h3>
@ -61,7 +61,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning text-light">
<div class="small-box bg-warning">
<div class="inner">
<h3>44</h3>
@ -76,7 +76,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-danger text-light">
<div class="small-box bg-danger">
<div class="inner">
<h3>65</h3>

14
src/index2.html
View File

@ -30,7 +30,7 @@
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-info text-light"><i class="fas fa-cog"></i></span>
<span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
@ -45,8 +45,8 @@
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-danger text-light"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box">
<span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
@ -62,8 +62,8 @@
<!-- <div class="clearfix hidden-md-up"></div> -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-success text-light"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box">
<span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
@ -75,8 +75,8 @@
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-warning text-light"><i class="fas fa-users"></i></span>
<div class="info-box">
<span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">New Members</span>

419
src/pages/widgets.html Normal file
View File

@ -0,0 +1,419 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../",
"title": "AdminLTE 4 | General Form Elements"
})
<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": "pages",
"page": "widgets",
"path": "../"
})
<!-- Main content -->
<div class="content-wrapper">
@@include('./dashboard/_content-header.html', {
"header_name": "Widgets"
})
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<h5 class="mb-2">Info Box</h5>
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">
10
<small>%</small>
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
<span class="info-box-number">760</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<!-- fix for small devices only -->
<!-- <div class="clearfix hidden-md-up"></div> -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">New Members</span>
<span class="info-box-number">2,000</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-none">
<span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">
10
<small>%</small>
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-sm">
<span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
<span class="info-box-number">760</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<!-- fix for small devices only -->
<!-- <div class="clearfix hidden-md-up"></div> -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow">
<span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">New Members</span>
<span class="info-box-number">2,000</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box shadow-lg">
<span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-primary">
<span class="info-box-icon"><i class="far fa-bookmark"></i></span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-warning">
<span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
<div class="info-box-content">
<span class="info-box-text">Events</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-danger">
<span class="info-box-icon"><i class="fas fa-comments"></i></span>
<div class="info-box-content">
<span class="info-box-text">Comments</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-primary bg-gradient">
<span class="info-box-icon"><i class="far fa-bookmark"></i></span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-success bg-gradient">
<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-warning bg-gradient">
<span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
<div class="info-box-content">
<span class="info-box-text">Events</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-danger bg-gradient">
<span class="info-box-icon"><i class="fas fa-comments"></i></span>
<div class="info-box-content">
<span class="info-box-text">Comments</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.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 -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../"
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../"
})
</body>
</html>

9
src/partials/dashboard/_sidenav.html
View File

@ -47,6 +47,15 @@
</li>
</ul>
</li>
<li class="nav-item">
<a href="@@path/pages/widgets.html" class="nav-link @@if (context.page === 'widgets') {active}">
<i class="nav-icon fas fa-circle"></i>
<p>
Widgets
<span class="right badge bg-danger">New</span>
</p>
</a>
</li>
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
<a href="#" class="nav-link @@if (context.mainPage === 'forms') {active}">
<i class="nav-icon fas fa-circle"></i>

81
src/scss/_colors.scss Normal file
View File

@ -0,0 +1,81 @@
//
// Misc: Colors
//
// Background colors (theme colors)
@each $name, $color in $theme-colors {
@include background-variant($name, $color);
}
// Background colors (colors)
@each $name, $color in $colors {
@include background-variant($name, $color);
}
.bg-gray {
background-color: $gray-500;
color: color-contrast($gray-500);
}
.bg-gray-light {
background-color: tint-color($gray-200, 3%);
color: color-contrast(tint-color($gray-200, 3%)) !important;
}
.bg-black {
background-color: $black;
color: color-contrast($black) !important;
}
.bg-white {
background-color: $white;
color: color-contrast($white) !important;
}
// Backgrund Color Disabled
[class^="bg-"].disabled {
opacity: .65;
}
// Text muted hover
a.text-muted:hover {
color: $primary !important;
}
// Link Styles
.link-muted {
color: shade-color($gray-500, 30%);
&:hover,
&:focus {
color: shade-color($gray-500, 40%);
}
}
.link-black {
color: $gray-600;
&:hover,
&:focus {
color: tint-color($gray-500, 20%);
}
}
// // Accent colors (theme colors)
// @each $name, $color in $theme-colors {
// @include accent-variant($name, $color);
// }
// // Accent colors (colors)
// @each $name, $color in $colors {
// @include accent-variant($name, $color);
// }
// Accent button override fix
[class*="accent-"] {
@each $name, $color in $theme-colors {
a.btn-#{$name} {
color: color-contrast($color);
}
}
}

1
src/scss/_mixins.scss
View File

@ -10,4 +10,5 @@
@import "mixins/nav-treeview-dark";
@import "mixins/nav-treeview-light";
@import "mixins/cards";
@import "mixins/backgrounds";
@import "mixins/miscellaneous";

31
src/scss/mixins/_backgrounds.scss Normal file
View File

@ -0,0 +1,31 @@
//
// Mixins: Backgrounds
//
// Background Variant
@mixin background-variant($name, $color) {
.bg-#{$name} {
background-color: #{$color} !important;
&,
> a {
color: color-contrast($color) !important;
}
&.btn {
&:hover {
border-color: shade-color($color, 10%);
color: shade-color(color-contrast($color), 7.5%);
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
&:active,
&.active {
background-color: shade-color($color, 10%) !important;
border-color: shade-color($color, 12.5%);
color: color-contrast(shade-color($color, 10%));
}
}
}
}

1
src/scss/parts/_miscellaneous.scss
View File

@ -4,3 +4,4 @@
@import "../miscellaneous";
@import "../text";
@import "../colors";