<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Dashboard Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"><link rel='stylesheet' href='https://rawgit.com/donnyburnside/My-Grid-System/master/dist/css/style.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='dashboard-wrapper'>
<div class='dashboard-header'>
<div class='branding'>
<a class='' href='#' title='User Menu'>
<img class='component-image component-image--circle' src='https://placem.at/things?w=40&h=40'>
<span class=''>Dashboard UI</span>
</a>
</div>
<nav class='component-nav'>
<ul class='component-menu component-menu--horizontal'>
<li class=''>
<a class='' href='#' title='User Menu'>
<img class='component-image component-image--circle' src='https://placem.at/people?w=35&h=35'>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
Settings
</a>
</li>
<li class=''>
<a class='' href='#'>
Logout
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<i class='fa fa-fw fa-cog' title='Settings'></i>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<div class='button-group'>
<input class='' id='sidebar-hidden'>
<label class='' for='sidebar-hidden'></label>
<input class='' id='sidebar-mini'>
<label class='' for='sidebar-mini'></label>
<input class='' id='sidebar-full'>
<label class='' for='sidebar-full'></label>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class='dashboard-body'>
<div aria-hidden='false' class='dashboard-sidebar'>
<nav class='component-nav ui-full-height ui-scrollable'>
<ul class='component-menu component-menu--vertical'>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-institution'></i>
</span>
<span class=''>
Dashboard
</span>
</a>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-file'></i>
</span>
<span class=''>
Articles
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
List Articles
</a>
</li>
<li class=''>
<a class='' href='#'>
New Article
</a>
</li>
<li class=''>
<a class='' href='#'>
Tags
</a>
</li>
<li class=''>
<a class='' href='#'>
Deleted Articles
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-folder'></i>
</span>
<span class=''>
Categories
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
List Categories
</a>
</li>
<li class=''>
<a class='' href='#'>
New Category
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-industry'></i>
</span>
<span class=''>
Sectors
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
List Sectors
</a>
</li>
<li class=''>
<a class='' href='#'>
New Sector
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-globe'></i>
</span>
<span class=''>
Countries
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
List Countries
</a>
</li>
<li class=''>
<a class='' href='#'>
New Country
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-users'></i>
</span>
<span class=''>
Users
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
List Users
</a>
</li>
<li class=''>
<a class='' href='#'>
Roles
</a>
</li>
<li class=''>
<a class='' href='#'>
Groups
</a>
</li>
</ul>
</li>
<li class=''>
<a class='' href='#'>
<span class=''>
<i class='fa fa-fw fa-cogs'></i>
</span>
<span class=''>
Tools
</span>
</a>
<ul aria-hidden='true' class=''>
<li class=''>
<a class='' href='#'>
Rebuild Search Index
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class='dashboard-content'>
<div class='page' id='dashboard'>
<div class='page-header'>
<h1 class='page-title'>Dashboard</h1>
<div aria-hidden='false' class='page-search'>
<input class='search-field' role='search' type='search'>
</div>
<div aria-hidden='false' class='page-actions'>
<button class='button'>New</button>
<button class='button'>Save</button>
<button class='button'>Delete</button>
<button class='button'>Reset</button>
<button class='button'>Back</button>
<button class='button'>Filters</button>
</div>
<div aria-hidden='false' class='page-filters'>
<div class='page-filter' data-group='state'>
<a class='page-filter__label'>State</a>
<div aria-hidden='true' class='page-filter__dropdown'>
<a class='page-filter__option'>Published</a>
<a class='page-filter__option'>Legal Review</a>
<a class='page-filter__option'>Editorial Review</a>
<a class='page-filter__option'>Draft</a>
</div>
</div>
<div class='page-filter' data-group='country'>
<a class='page-filter__label'>Country</a>
<div aria-hidden='true' class='page-filter__dropdown'>
<a class='page-filter__option'>United Kingdom</a>
<a class='page-filter__option'>Scotland</a>
<a class='page-filter__option'>Jersey</a>
</div>
</div>
<div class='page-filter' data-group='type'>
<a class='page-filter__label'>Type</a>
<div aria-hidden='true' class='page-filter__dropdown'>
<a class='page-filter__option'>My Articles</a>
<a class='page-filter__option'>Articles needing my attention</a>
</div>
</div>
</div>
</div>
<div class='page-body'>
<div class='component-list-item'>
<div class='list-item__title'>Article One</div>
<div class='list-item__author'>Joe Bloggs</div>
<div class='list-item__review'>Legal Review</div>
<div class='list-item__state'>Published</div>
<div class='list-item__date'>2016-05-07T21:50:37+00:00</div>
<div class='list-item__country'>United Kingdom</div>
</div>
<div class='component-list-item'>
<div class='list-item__title'>Article Two</div>
<div class='list-item__author'>Jane Bloggs</div>
<div class='list-item__review'>Edit</div>
<div class='list-item__state'>Draft</div>
<div class='list-item__date'>2015-05-07T21:50:37+00:00</div>
<div class='list-item__country'>Scotland</div>
</div>
</div>
<div class='page-footer'>
<ul class='pagination'></ul>
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://rawgit.com/paulirish/matchMedia.js/master/matchMedia.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js'></script>
<script src='https://rawgit.com/javve/list.pagination.js/master/dist/list.pagination.min.js'></script>
<script src='https://rawgit.com/javve/list.fuzzysearch.js/v0.1.0/dist/list.fuzzysearch.min.js'></script><script src="./script.js"></script>
</body>
</html>
/*
Variables
*/
/*
Pen Setup
*/
html {
box-sizing:border-box;
font-size:62.5%;
}
*, *:before, *:after {
box-sizing:inherit;
}
body {
margin:0;
font-family:sans-serif;
font-size:1.6rem;
line-height:1.5;
color:#333;
background-color:#efefef;
}
/*
Layout
*/
.dashboard-wrapper {
width:100%;
}
.dashboard-header {
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:nowrap;
-webkit-box-align:center;
align-items:center;
width:100%;
height:6rem;
background-color:#fff;
border-bottom:1px solid #e0e0e0;
}
.dashboard-header .branding a {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:nowrap;
-webkit-box-align:center;
align-items:center;
width:25rem;
padding:1rem;
font-size:2.4rem;
font-weight:500;
border-right:1px solid #e0e0e0;
}
.dashboard-header .branding a img {}
.dashboard-header .branding a span {
margin-left:1rem;
}
.dashboard-header nav {
margin-left:auto;
padding:1rem;
}
.dashboard-body {
position:relative;
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:nowrap;
min-height:calc(100vh - 6rem);
margin-top:6rem;
}
.dashboard-content {
width:100%;
min-height:calc(100vh - 6rem);
}
.dashboard-sidebar {
position:fixed;
top:0;
left:0;
right:0;
z-index:999;
width:25rem;
height:100%;
padding-top:6rem;
background-color:#fff;
border-right:1px solid #e0e0e0;
}
.dashboard-sidebar:not(.dashboard-sidebar--mini)[aria-hidden="false"] {
left:0;
}
.dashboard-sidebar:not(.dashboard-sidebar--mini)[aria-hidden="false"] ~ .dashboard-content {
margin-left:25rem;
}
.dashboard-sidebar:not(.dashboard-sidebar--mini)[aria-hidden="true"] {
left:-25rem;
}
.dashboard-sidebar:not(.dashboard-sidebar--mini)[aria-hidden="true"] ~ .dashboard-content {
margin-left:0;
}
.dashboard-sidebar .component-menu li {}
.dashboard-sidebar .component-menu a span {}
/* First Level */
.dashboard-sidebar .component-menu > li a {
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
}
.dashboard-sidebar .component-menu > li a span {
display:-webkit-inline-box;
display:inline-flex;
-webkit-box-align:center;
align-items:center;
height:6rem;
padding:1rem;
}
.dashboard-sidebar .component-menu > li a span:first-child {
-webkit-box-pack:center;
justify-content:center;
width:6rem;
color:#333;
}
.dashboard-sidebar .component-menu > li a span:last-child {
-webkit-box-flex:1;
flex:1;
padding:1rem 1rem 1rem 2rem;
color:#333;
}
/* Children */
.dashboard-sidebar .component-menu li li a {}
/* Mini Sidebar */
.dashboard-sidebar--mini {
width:6rem;
}
.dashboard-sidebar--mini ~ .dashboard-content {
margin-left:6rem;
}
.dashboard-sidebar--mini .component-menu li {}
.dashboard-sidebar--mini .component-menu a span:last-child {}
/* First Level */
.dashboard-sidebar--mini .component-menu > li a span:first-child {
}
.dashboard-sidebar--mini .component-menu > li a span:last-child {
display:none;
-webkit-box-flex:0;
flex:none;
width:0;
}
/*
Pages / Views
*/
.page {
display:-webkit-box;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
min-height:calc(100vh - 6rem);
}
.page-header {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:wrap;
-webkit-box-align:center;
align-items:center;
background-color:#fff;
border-bottom:1px solid #e0e0e0;
}
.page-title {
-webkit-box-flex:1;
flex:1;
margin:1rem;
font-size:2.8rem;
font-weight:500;
}
.page-search {
margin:1rem;
}
.page-search[aria-hidden="false"] {
display:block;
}
.page-search[aria-hidden="true"] {
display:none;
}
.page-actions {
margin:1rem;
}
.page-actions[aria-hidden="false"] {
display:block;
}
.page-actions[aria-hidden="true"] {
display:none;
}
.page-filters {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:wrap;
-webkit-box-align:center;
align-items:center;
width:100%;
border-top:1px solid #e0e0e0;
}
.page-filters[aria-hidden="false"] {
display:-webkit-box;
display:flex;
}
.page-filters[aria-hidden="true"] {
display:none;
}
.page-filters .page-filter {
-webkit-box-flex:1;
flex:1;
margin:1rem;
}
.page-filters .page-filter__dropdown[aria-hidden="false"] {
display:block;
}
.page-filters .page-filter__dropdown[aria-hidden="true"] {
display:none;
}
.page-body {
-webkit-box-flex:1;
flex:1;
padding:1rem;
}
.page-footer {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:wrap;
-webkit-box-align:center;
align-items:center;
background-color:#fff;
border-top:1px solid #e0e0e0;
}
/*
Components
*/
.component-nav ul {
margin:0;
padding:0;
list-style:none;
}
.component-nav ul[aria-hidden="false"] {
display:block;
}
.component-nav ul[aria-hidden="true"] {
display:none;
}
.component-menu--vertical > li {
display:block;
width:100%;
}
.component-menu--horizontal {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:nowrap;
-webkit-box-align:center;
align-items:center;
}
/* display:inline-block; */
.component-menu--horizontal > li ~ li {
margin-left:1rem;
}
.component-menu li {}
.component-menu a {
text-decoration:none;
outline:none;
}
.component-image {
display:block;
}
.component-image--circle {
border-radius:50%;
}
.component-list-item {
display:-webkit-box;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
flex-wrap:wrap;
-webkit-box-align:center;
align-items:center;
}
/*
UI Helpers
*/
.ui-scrollable {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
/* Internet Explorer */
scrollbar-face-color:#aaa;
scrollbar-track-color:transparent;
}
/* WebKit browsers */
.ui-scrollable::-webkit-scrollbar {
width:1rem;
height:1rem;
}
.ui-scrollable::-webkit-scrollbar-thumb {
background:#aaa;
}
.ui-scrollable::-webkit-scrollbar-track {
background:transparent;
}
.ui-full-height {
height:100%;
}
//
// Function: UI
//
function ui() {
function maxwidth768action(mql){
var mql = window.matchMedia( 'screen and (max-width: 768px)' );
if ( mql.matches ) {
$('.dashboard-sidebar').addClass('dashboard-sidebar--mini');
}
else {
$('.dashboard-sidebar').removeClass('dashboard-sidebar--mini');
}
}
maxwidth768action(mql); // run on load
mql.addListener(maxwidth768action); // run whenever media query is triggered
console.log('UI loaded!');
}
//
// Function: List View (using List.js)
//
function listView() {
var thisList = 'dashboard'; // Must be an id
var options = {
listClass: 'page-body',
searchClass: 'search-field',
//indexAsync: true,
valueNames: [
'list-item__title',
'list-item__author',
'list-item__review',
'list-item__state',
'list-item__date',
'list-item__country'
],
//item: ''
};
//var values = searchableOptions;
var list = new List(thisList, options);
console.log('List View loaded!');
};
//
// Execute scripts when document is ready
//
$(document).ready(function() {
ui();
listView();
});