patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
1,219 lines (1,105 loc) • 65.5 kB
HTML
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us" class="layout-pf layout-pf-fixed">
<!--<![endif]-->
<head>
<title>Notification Drawer for Vertical Navigation - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="./../../dist/js/patternfly.min.js"></script>
</head>
<div class="toast-notifications-list-pf">
<div class="toast-pf alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
<span class="pficon pficon-close"></span>
</button>
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
</div>
<body class="cards-pf">
<nav class="navbar navbar-pf-vertical">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<img class="navbar-brand-icon" src="./../../dist/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="./../../dist/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" target="_blank" class="nav-item-iconic nav-item-iconic-new-window"><span title="Launch" class="fa fa-external-link"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-iconic">
<li class="drawer-pf-trigger dropdown">
<a class="nav-item-iconic drawer-pf-trigger-icon">
<span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Username" class="fa pficon-user"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Preferences</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
<div class="drawer-pf hide drawer-pf-notifications-non-clickable">
<div class="drawer-pf-title">
<a class="drawer-pf-toggle-expand"></a>
<h3 class="text-center">Notifications Drawer</h3>
</div>
<div class="panel-group" id="notification-drawer-accordion">
<div class="panel panel-default">
<div class="panel-heading" data-component="collapse-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
Notification Tab 1
</a>
</h4>
<span class="panel-counter">5 New Events</span>
</div>
<div id="fixedCollapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight21" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight21">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight31" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight31">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight41" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight41">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
</div>
<div class="drawer-pf-action">
<button class="btn btn-link btn-block">Mark All Read</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-component="collapse-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
Notification Tab 2
</a>
</h4>
<span class="panel-counter">5 New Events</span>
</div>
<div id="fixedCollapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight22" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight22">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight32" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight32">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight42" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight42">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight23" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight23">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight33" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight33">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight43" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight43">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight24" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight24">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight34" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight34">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight44" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight44">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-loading text-center">
<span class="spinner spinner-xs spinner-inline"></span> Loading More
</div>
</div>
<div class="drawer-pf-action">
<button class="btn btn-link btn-block">Mark All Read</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-component="collapse-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
Notification Tab 3
</a>
</h4>
<span class="panel-counter">5 New Events</span>
</div>
<div id="fixedCollapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight25" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight25">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight35" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight35">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight45" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight45">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight16">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight26" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight26">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight36" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight36">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight46" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight46">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight17" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight17">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-info pull-left"></span>
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification unread">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight27" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight27">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-ok pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight37" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight37">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-warning-triangle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
<div class="drawer-pf-notification">
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight47" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight47">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<span class="pficon pficon-error-circle-o pull-left"></span>
<span class="drawer-pf-notification-message">Another Event Notification</span>
<div class="drawer-pf-notification-info">
<span class="date">3/31/16</span>
<span class="time">12:12:44 PM</span>
</div>
</div>
</div>
<div class="drawer-pf-action">
<button class="btn btn-link btn-block">Mark All Read</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Show/Hide Notifications Drawer
$('.drawer-pf-trigger').click(function() {
var $drawer = $('.drawer-pf');
$(this).toggleClass('open');
if ($drawer.hasClass('hide')) {
$drawer.removeClass('hide');
setTimeout(function () {
if (window.dispatchEvent) {
window.dispatchEvent(new Event('resize'));
}
// Special case for IE
if ($(document).fireEvent) {
$(document).fireEvent('onresize');
}
}, 100);
} else {
$drawer.addClass('hide');
}
});
$('.drawer-pf-toggle-expand').click(function() {
var $drawer = $('.drawer-pf');
var $drawerNotifications = $drawer.find('.drawer-pf-notification');
if ($drawer.hasClass('drawer-pf-expanded')) {
$drawer.removeClass('drawer-pf-expanded');
$drawerNotifications.removeClass('expanded-notification');
} else {
$drawer.addClass('drawer-pf-expanded');
$drawerNotifications.addClass('expanded-notification');
}
});
// Mark All Read
$('.panel-collapse').each(function (index, panel) {
var $panel = $(panel);
$panel.on('click', '.drawer-pf-action .btn', function() {
$panel.find('.unread').removeClass('unread');
$(panel.parentElement).find('.panel-counter').text('0 New Events');
});
});
$('#notification-drawer-accordion').initCollapseHeights('.panel-body');
});
</script>
</nav>
</nav> <!--/.navbar-->
<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus
">
<ul class="list-group">
<li class="list-group-item">
<a>
<span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
<span class="list-group-item-value">Dashboard</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
<span class="list-group-item-value">Dolor</span>
</a>
</li>
<li class="list-group-item active secondary-nav-item-pf" data-target="#ipsum-secondary">
<a>
<span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
<span class="list-group-item-value">Ipsum</span>
</a>
<div id="-secondary" class="nav-pf-secondary-nav">
<div class="nav-item-pf-header">
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
<span>Ipsum</span>
</div>
<ul class="list-group">
<li class="list-group-item active " data-target="#ipsum-intellegam-tertiary">
<a>
<span class="list-group-item-value">Intellegam</span>
</a>
</li>
<li class="list-group-item " data-target="#ipsum-copiosae-tertiary">
<a>
<span class="list-group-item-value">Copiosae</span>
</a>
</li>
<li class="list-group-item " data-target="#ipsum-patrioque-tertiary">
<a>
<span class="list-group-item-value">Patrioque</span>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item secondary-nav-item-pf" data-target="#amet-secondary">
<a>
<span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
<span class="list-group-item-value">Amet</span>
</a>
<div id="amet-secondary" class="nav-pf-secondary-nav">
<div class="nav-item-pf-header">
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
<span>Amet</span>
</div>
<ul class="list-group">
<li class="list-group-item " data-target="#amet-detracto-tertiary">
<a>
<span class="list-group-item-value">Detracto Suscipiantur</span>
</a>
</li>
<li class="list-group-item " data-target="#amet-mediocrem-tertiary">
<a>
<span class="list-group-item-value">Mediocrem</span>
</a>
</li>
<li class="list-group-item " data-target="#amet-corrumpit-tertiary">
<a>
<span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a>
<span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
<span class="list-group-item-value">Adipscing</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
<span class="list-group-item-value">Lorem</span>
</a>
</li>
<li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" data-target="#amet-secondary">
<a>
<span class="pficon pficon-user" data-toggle="tooltip" title="" data-original-title="User"></span>
<span class="list-group-item-value">User</span>
</a>
<div id="user-secondary" class="nav-pf-secondary-nav">
<div class="nav-item-pf-header">
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
<span>User</span>
</div>
<ul class="list-group">
<li class="list-group-item">
<a>
<span class="list-group-item-value">Preferences</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="list-group-item-value">Logout</span>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" data-target="#amet-secondary">
<a>
<span class="pficon pficon-help" data-toggle="tooltip" title="" data-original-title="Amet"></span>
<span class="list-group-item-value">Help</span>
</a>
<div id="help-secondary" class="nav-pf-secondary-nav">
<div class="nav-item-pf-header">
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
<span>Help</span>
</div>
<ul class="list-group">
<li class="list-group-item">
<a>
<span class="list-group-item-value">Help</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="list-group-item-value">About</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
">
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
</p>
</div>
</div>
</div>
</div><!-- /row -->
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="fa fa-rebel"></span>
<span class="card-pf-aggregate-status-count">0</span> Ipsum
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<a href="#">
<span class="fa fa-paper-plane"></span>
<span class="card-pf-aggregate-status-count">20</span> Amet
</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<a href="#">
<span class="pficon pficon-cluster"></span>
<span class="card-pf-aggregate-status-count">9</span> Adipiscing
</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<a href="#">
<span class="pficon pficon-image"></span>
<span class="card-pf-aggregate-status-count">12</span> Lorem
</a>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
</p>
</div>
</div>
</div>
</div>
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-6">
<div class="card-pf">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Top Utilized Clusters
</h2>
</div>
<div class="card-pf-body">
<div class="progress-description">
RHOS6-Controller
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;" data-toggle="tooltip" title="95% Used">
<span><strong>190.0 of 200.0 GB</strong> Used</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
<span class="sr-only">5% Available</span>
</div>
</div>
<div class="progress-description">
CFMEQE-Cluster
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Used">
<span><strong>100.0 of 200.0 GB</strong> Used</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
<span class="sr-only">50% Available</span>
</div>
</div>
<div class="progress-description">
RHOS-Undercloud
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" data-toggle="tooltip" title="70% Used">
<span><strong>140.0 of 200.0 GB</strong> Used</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
<span class="sr-only">30% Available</span>
</div>
</div>
<div class="progress-description">
RHEL6-Controller
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">
<span><strong>153.0 of 200.0 GB</strong> Used</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
<span class="sr-only">23.5% Available</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="card-pf">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Quotas
</h2>
</div>
<div class="card-pf-body">
<div class="progress-container progress-description-left progress-label-right">
<div class="progress-description">
CPU
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
<span><strong>115 of 460</strong> MHz</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
<span class="sr-only">75% Available</span>
</div>
</div>
</div>
<div class="progress-container progress-description-left progress-label-right">
<div class="progress-description">
Memory
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
<span><strong>8 of 16</strong> GB</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
<span class="sr-only">50% Available</span>
</div>
</div>
</div>
<div class="progress-container progress-description-left progress-label-right">
<div class="progress-description">
Pods
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
<span><strong>5 of 8</strong> Total</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5