Skip to content

Commit

Permalink
Add files via upload (#905)
Browse files Browse the repository at this point in the history 
Hi, I have attched a sample dashboard with responsive sidebar along with table. Kindly do merge it with the master branch. 
Thanks in advance.
  • Loading branch information
@kpreetam7
kpreetam7 authored Oct 4, 2022
1 parent 7873fbe commit 0b0ae5e
Show file tree
Hide file tree
Showing 6 changed files with 307 additions and 0 deletions.
156 changes: 156 additions & 0 deletions Responsive Dashboard Table/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRM</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav class="navbar navbar-expand-lg" id="aps_navbar">
<div class="container-fluid" id="title_bar_wrapper">
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-3 col-xl-2 align-self-stretch d-flex justify-content-between">
<a class="navbar-brand" id="aps_title" href="#">Management 360&deg;</a>
<button type="button" id="aps_nav_menubtn">
<i class="bi bi-list"></i>
</button>
</div>
</div>
</nav>
<div id="aps_content_wrapper" class="container-fluid">
<div class="row align-self-stretch align-items-stretch">
<div id="aps_sidebar" class="col-xs-12 col-sm-5 col-md-4 col-lg-3 col-xl-2">
<div id="aps_sidebar_items">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Ticket Management <i
class="bi bi-ticket-perforated-fill aps_icons"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inventory <i class="bi bi-box2-fill aps_icons"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Users <i class="bi bi-people-fill aps_icons"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile <i class="bi bi-person-fill aps_icons"></i></a>
</li>
<li class="nav-item">
<a class="nav-link">Logout <i class="bi bi-box-arrow-right aps_icons"></i></a>
</li>
</ul>
</div>

</div>
<div class="col" id="aps_main">
<!-- main Include Table here -->

<h1>
ALL TICKETS
</h1>
<div>
Enable search bar here
</div>
<div>
<!-- Table-->
<table id="example" class="table" class="table-responsive" >
<caption>List of users</caption>
<thead>
<tr class="table-primary">
<th scope="col">S.No.</th>

<th scope="col">Customer Name</th>
<th scope="col">Date Created</th>
<th scope="col">Priority</th>
<th scope="col">Category</th>
<th scope="col">Sub-Category</th>
<th scope="col">Model No.</th>
<th scope="col">Serial No.</th>
<th scope="col">Summary</th>
<th scope="col">AMC</th>
<th scope="col">Status</th>
<th scope="col">Fault Found Code</th>
<th scope="col">Resolution Code</th>
<th scope="col">Resolution Remarks</th>
<th scope="col">Online resolvable</th>
<th scope="col">Ticket ID</th>
<th scope="col">Update</th>
<!-- I guess this column was no longer needed. right??-->
<!-- <th scope="col">Remove</th> -->
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<!-- <tfoot>
<tr>
<th scope="col">S.No.</th>
<th scope="col">Customer Name</th>
<th scope="col">Date Created</th>
<th scope="col">Priority</th>
<th scope="col">Category</th>
<th scope="col">Sub-Category</th>
<th scope="col">Model No.</th>
<th scope="col">Serial No.</th>
<th scope="col">Summary</th>
<th scope="col">AMC</th>
<th scope="col">Status</th>
<th scope="col">Fault Found Code</th>
<th scope="col">Resolution Code</th>
<th scope="col">Resolution Remarks</th>
<th scope="col">Online resolvable</th>
<th scope="col">Ticket ID</th>
<th scope="col">Update</th>
I guess this column was no longer needed. right??-->
<!-- <th scope="col">Remove</th>
</tr>
</tfoot> -->
</tbody>
</table>
</div>
</div>
</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"> </script>
<script src="script.js"></script>
<script src="script2.js"></script>

</body>

</html>
7 changes: 7 additions & 0 deletions Responsive Dashboard Table/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@


const menubtn = document.getElementById("aps_nav_menubtn");
const sidebar = document.getElementById("aps_sidebar");
menubtn.addEventListener("click",()=>{
sidebar.classList.toggle("active");
})
3 changes: 3 additions & 0 deletions Responsive Dashboard Table/script2.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
$(document).ready(function () {
$('#example').DataTable();
});
66 changes: 66 additions & 0 deletions Responsive Dashboard Table/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
#aps_navbar {
background: #1e354e;
color: #f5f5f5;
}
#aps_navbar a {
color: #f5f5f5 !important;
}
#aps_navbar #title_bar_wrapper button {
background: transparent;
border: transparent;
outline: none;
color: #f5f5f5;
font-size: 1.4rem;
}

#aps_content_wrapper {
height: 92vh;
overflow: hidden;
position: relative;
align-items: stretch;
}
#aps_content_wrapper #aps_sidebar {
background: #1e354e;
color: #f5f5f5;
min-height: 92vh;
position: relative;
transition-duration: 300ms;
transition-property: width;
border-top: 2px solid #f5f5f5;
}
#aps_content_wrapper #aps_sidebar a {
color: #f5f5f5;
}
#aps_content_wrapper #aps_sidebar #aps_sidebar_items .nav-link {
padding-top: 20px;
border-bottom: 2px solid #f5f5f5;
transition-duration: 50ms;
}
#aps_content_wrapper #aps_sidebar #aps_sidebar_items .nav-link:hover {
background: #f5f5f5;
cursor: pointer;
color: #1e354e;
}
#aps_content_wrapper #aps_sidebar.active {
width: 0px;
margin: 0px;
padding: 0px;
opacity: 0;
}
#aps_content_wrapper #aps_main {
height: 92vh;
overflow-y: scroll;
}
#aps_content_wrapper ::-webkit-scrollbar {
width: 10px;
}
#aps_content_wrapper ::-webkit-scrollbar-thumb {
background: #1e354e;
}
#aps_content_wrapper ::-webkit-scrollbar-thumb:hover {
background: #1e354e;
cursor: pointer;
}
#aps_content_wrapper ::-webkit-scrollbar-track {
background: none;
}/*# sourceMappingURL=style.css.map */
1 change: 1 addition & 0 deletions Responsive Dashboard Table/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 74 additions & 0 deletions Responsive Dashboard Table/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
$primary-col: #1e354e;
$secondary-col: #f5f5f5;
$sidebar-height: 92vh;

#aps_navbar {
background: $primary-col;
color: $secondary-col;

a {
color: $secondary-col !important;
}

#title_bar_wrapper {
button {
background: transparent;
border: transparent;
outline: none;
color: $secondary-col;
font-size: 1.4rem;
}
}
}

#aps_content_wrapper{
height:$sidebar-height;
overflow: hidden;
position: relative;
align-items: stretch;
#aps_sidebar{
background: $primary-col;
color: $secondary-col;
min-height:$sidebar-height;
position: relative;
a{
color:$secondary-col;
}
transition-duration: 300ms;
transition-property: width;
border-top: 2px solid $secondary-col;
#aps_sidebar_items .nav-link{
padding-top: 20px;
border-bottom: 2px solid #f5f5f5;
transition-duration: 50ms;
&:hover{
background: $secondary-col;
cursor: pointer;
color:$primary-col;
}
}
}
#aps_sidebar.active{
width: 0px;
margin: 0px;
padding: 0px;
opacity:0;
}
#aps_main{
height: $sidebar-height;
overflow-y:scroll;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: $primary-col;
}
::-webkit-scrollbar-thumb:hover {
background: $primary-col;
cursor: pointer;
}
::-webkit-scrollbar-track {
background: none;
}
}

0 comments on commit 0b0ae5e

Please sign in to comment.