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

added info-box

pull/3729/head
Daniel 2021-05-19 09:21:36 +05:30
parent a57567bf09
commit a82603dc37
7 changed files with 363 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/index.html
View File

@ -5,11 +5,10 @@
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE - Free Bootstrap 5 Admin Dashboard"
"title": "AdminLTE 4 | Dashboard"
})
<!-- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> -->
<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', {
@ -17,25 +16,15 @@
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index",
"path": "."
})
<!-- Main content -->
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<div class="fs-3">Dashboard</div>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</div>
</div>
</div>
</div>
@@include('./dashboard/_content-header.html', {
"header_name": "Dashboard"
})
<div class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->

107
src/index2.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE 4 | Dashboard 2"
})
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index2",
"path": "."
})
<!-- Main content -->
<div class="content-wrapper">
@@include('./dashboard/_content-header.html', {
"header_name": "Dashboard v2"
})
<div class="content">
<div class="container-fluid">
<!-- Info boxes -->
<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>
<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 mb-3">
<span class="info-box-icon bg-danger text-light"><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 -->
<!-- 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 mb-3">
<span class="info-box-icon bg-success text-light"><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 -->
<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-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>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
</div>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "."
})
</body>
</html>

81
src/pages/forms/general.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../../",
"title": "AdminLTE 4 | Dashboard 2"
})
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../../"
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "forms",
"page": "general",
"path": "../../"
})
<!-- Main content -->
<div class="content-wrapper">
@@include('./dashboard/_content-header.html', {
"header_name": "General Form"
})
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row g-4">
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card">
<div class="card-header">Quick Example</div>
<form>
<div class="card-body">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputGroupFile02">
<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../../"
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../../"
})
</body>
</html>

15
src/partials/dashboard/_content-header.html Normal file
View File

@ -0,0 +1,15 @@
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<div class="fs-3">@@header_name</div>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">@@header_name</li>
</ol>
</div>
</div>
</div>
</div>

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

@ -12,8 +12,8 @@
<nav class="mt-2">
<!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="#" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<i class="nav-icon fas fa-circle"></i>
<p>
Dashboard
@ -22,7 +22,7 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v1
@ -30,7 +30,7 @@
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v2
@ -39,8 +39,8 @@
</li>
</ul>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link">
<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>
<p>
Forms
@ -49,21 +49,13 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/forms/general.html" class="nav-link">
<a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
General Elements
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>
Level 2
</p>
</a>
</li>
</ul>
</li>

145
src/scss/_info-box.scss Normal file
View File

@ -0,0 +1,145 @@
//
// Component: Info Box
//
.info-box {
@include box-shadow($card-shadow);
@include border-radius($border-radius);
background-color: $white;
display: flex;
margin-bottom: map-get($spacers, 3);
min-height: 80px;
padding: .5rem;
position: relative;
width: 100%;
.progress {
background-color: rgba($black, .125);
height: 2px;
margin: 5px 0;
.progress-bar {
background-color: $white;
}
}
.info-box-icon {
@if $enable-rounded {
border-radius: $border-radius;
}
align-items: center;
display: flex;
font-size: 1.875rem;
justify-content: center;
text-align: center;
width: 70px;
> img {
max-width: 100%;
}
}
.info-box-content {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.8;
flex: 1;
padding: 0 10px;
}
.info-box-number {
display: block;
margin-top: .25rem;
font-weight: $font-weight-bold;
}
.progress-description,
.info-box-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@each $name, $color in $theme-colors {
.info-box {
.bg-#{$name} {
color: color-contrast($color);
.progress-bar {
background-color: color-contrast($color);
}
}
}
}
.info-box-more {
display: block;
}
.progress-description {
margin: 0;
}
@include media-breakpoint-up(md) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
display: none;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
display: none;
}
}
}
@include media-breakpoint-up(lg) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
@include font-size(.75rem);
display: block;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
@include font-size(.75rem);
display: block;
}
}
}
@include media-breakpoint-up(xl) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
@include font-size(1rem);
display: block;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
@include font-size(1rem);
display: block;
}
}
}
}

1
src/scss/parts/_extra-components.scss
View File

@ -3,3 +3,4 @@
//
@import "../small-box";
@import "../info-box";