patternfly-sass 3.7.0 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/fonts/patternfly/OpenSans-Bold-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-Bold-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-Bold-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
- data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
- data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +0 -0
- data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
- data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
- data/assets/fonts/patternfly/fontawesome-webfont.eot +0 -0
- data/assets/fonts/patternfly/fontawesome-webfont.svg +44 -14
- data/assets/fonts/patternfly/fontawesome-webfont.ttf +0 -0
- data/assets/fonts/patternfly/fontawesome-webfont.woff +0 -0
- data/assets/fonts/patternfly/fontawesome-webfont.woff2 +0 -0
- data/assets/images/patternfly/apple-touch-icon-precomposed-114.png +0 -0
- data/assets/images/patternfly/apple-touch-icon-precomposed-144.png +0 -0
- data/assets/images/patternfly/apple-touch-icon-precomposed-57.png +0 -0
- data/assets/images/patternfly/apple-touch-icon-precomposed-72.png +0 -0
- data/assets/images/patternfly/bg-login.jpg +0 -0
- data/assets/images/patternfly/logo-alt.svg +18 -18
- data/assets/images/patternfly/logo.svg +22 -22
- data/assets/javascripts/patternfly.js +290 -91
- data/assets/javascripts/patternfly.min.js +2 -1
- data/assets/stylesheets/patternfly/_layouts.scss +23 -42
- data/assets/stylesheets/patternfly/_list-view.scss +7 -0
- data/assets/stylesheets/patternfly/_navbar.scss +3 -3
- data/assets/stylesheets/patternfly/_notifications-drawer.scss +16 -3
- data/assets/stylesheets/patternfly/_toolbar.scss +120 -14
- data/assets/stylesheets/patternfly/_variables.scss +20 -5
- data/assets/stylesheets/patternfly/_vertical-nav.scss +631 -381
- data/assets/stylesheets/patternfly/_wizard.scss +105 -14
- data/assets/stylesheets/patternfly/lib/bootstrap-datepicker.scss +0 -1
- data/bower.json +11 -11
- data/lib/patternfly-sass/version.rb +2 -2
- data/patternfly-sass.gemspec +2 -2
- data/spec/html/about-modal.html +1 -1
- data/spec/html/accordions.html +1 -1
- data/spec/html/alerts.html +1 -1
- data/spec/html/area-charts.html +3 -3
- data/spec/html/badges.html +1 -1
- data/spec/html/bar-charts.html +3 -3
- data/spec/html/basic.html +2 -2
- data/spec/html/blank-slate.html +1 -1
- data/spec/html/bootstrap-combobox.html +2 -2
- data/spec/html/bootstrap-datepicker.html +2 -2
- data/spec/html/bootstrap-select.html +2 -2
- data/spec/html/bootstrap-switch.html +1 -1
- data/spec/html/bootstrap-touchspin.html +2 -2
- data/spec/html/bootstrap-treeview-2.html +3 -3
- data/spec/html/bootstrap-treeview.html +3 -3
- data/spec/html/breadcrumbs.html +1 -1
- data/spec/html/buttons.html +1 -1
- data/spec/html/cards.html +4 -4
- data/spec/html/code.html +1 -1
- data/spec/html/dashboard.html +3 -3
- data/spec/html/datatables-columns.html +3 -3
- data/spec/html/datatables.html +2 -2
- data/spec/html/dist/css/patternfly-additions.css +1093 -794
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +2 -2
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +133 -14
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +6 -6
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/donut-charts.html +3 -3
- data/spec/html/dropdowns.html +1 -1
- data/spec/html/form.html +2 -2
- data/spec/html/forms.html +1 -1
- data/spec/html/horizontal-navigation.html +5 -7
- data/spec/html/icons.html +1 -1
- data/spec/html/index.html +15 -15
- data/spec/html/infotip.html +1 -1
- data/spec/html/labels.html +1 -1
- data/spec/html/line-charts.html +3 -3
- data/spec/html/list-group.html +1 -1
- data/spec/html/list-view-rows.html +592 -0
- data/spec/html/list-view.html +314 -309
- data/spec/html/login.html +1 -1
- data/spec/html/modals.html +1 -1
- data/spec/html/navbar.html +2 -2
- data/spec/html/notification-drawer-horizontal-nav.html +1451 -0
- data/spec/html/{notifications-drawer.html → notification-drawer-vertical-nav.html} +146 -265
- data/spec/html/pagination.html +1 -1
- data/spec/html/panels.html +1 -1
- data/spec/html/pie-charts.html +3 -3
- data/spec/html/popovers.html +1 -1
- data/spec/html/progress-bars.html +1 -1
- data/spec/html/search.html +1 -1
- data/spec/html/spinner.html +1 -1
- data/spec/html/tab.html +2 -2
- data/spec/html/tables.html +1 -1
- data/spec/html/tabs.html +1 -1
- data/spec/html/time-picker.html +2 -2
- data/spec/html/toast.html +1 -1
- data/spec/html/toolbar.html +43 -8
- data/spec/html/tooltip.html +1 -1
- data/spec/html/typography-2.html +1 -1
- data/spec/html/typography.html +1 -1
- data/spec/html/utilization-bar-charts.html +3 -3
- data/spec/html/{layout-alt-fixed-inner-scroll.html → vertical-navigation-primary-only.html} +61 -192
- data/spec/html/{layout-alt-fixed.html → vertical-navigation-with-secondary.html} +120 -184
- data/spec/html/{vertical-navigation-without-icons.html → vertical-navigation-with-tertiary-no-icons.html} +212 -155
- data/spec/html/{vertical-navigation.html → vertical-navigation-with-tertiary-pins.html} +212 -155
- data/spec/html/wizard.html +88 -48
- metadata +21 -21
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +0 -917
- data/spec/html/layout-alt-fixed-with-footer.html +0 -917
data/spec/html/login.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
|
|
27
27
|
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
|
28
28
|
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
29
|
-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.
|
|
29
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
30
|
<script src="../../dist/js/patternfly.min.js"></script>
|
|
31
31
|
</head>
|
|
32
32
|
<div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
|
data/spec/html/modals.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
|
|
27
27
|
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
|
28
28
|
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
29
|
-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.
|
|
29
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
30
|
<script src="../../dist/js/patternfly.min.js"></script>
|
|
31
31
|
</head>
|
|
32
32
|
|
data/spec/html/navbar.html
CHANGED
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
|
|
27
27
|
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
|
28
28
|
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
29
|
-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.
|
|
30
|
-
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.
|
|
29
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
|
|
31
31
|
<script src="../../dist/js/patternfly.min.js"></script>
|
|
32
32
|
</head>
|
|
33
33
|
|
|
@@ -0,0 +1,1451 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
|
|
3
|
+
<!--[if gt IE 9]><!-->
|
|
4
|
+
<html lang="en-us" class="layout-pf">
|
|
5
|
+
<!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<title>Notification Drawer for Horizontal Navigation - PatternFly</title>
|
|
8
|
+
<meta charset="UTF-8">
|
|
9
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
|
|
12
|
+
<!-- iPad retina icon -->
|
|
13
|
+
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
|
|
14
|
+
<!-- iPad retina icon (iOS < 7) -->
|
|
15
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
|
|
16
|
+
<!-- iPad non-retina icon -->
|
|
17
|
+
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
|
|
18
|
+
<!-- iPad non-retina icon (iOS < 7) -->
|
|
19
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
|
|
20
|
+
<!-- iPhone 6 Plus icon -->
|
|
21
|
+
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
|
|
22
|
+
<!-- iPhone retina icon (iOS < 7) -->
|
|
23
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
|
|
24
|
+
<!-- iPhone non-retina icon (iOS < 7) -->
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
|
|
26
|
+
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
|
|
27
|
+
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
|
28
|
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
29
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
|
|
31
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
|
|
32
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
|
|
33
|
+
<script src="../../dist/js/patternfly.min.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
<div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
|
|
36
|
+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
|
|
37
|
+
<span class="pficon pficon-close"></span>
|
|
38
|
+
</button>
|
|
39
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
40
|
+
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>.
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<body class="cards-pf">
|
|
44
|
+
<nav class="navbar navbar-default navbar-pf" role="navigation">
|
|
45
|
+
<div class="navbar-header">
|
|
46
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
|
|
47
|
+
<span class="sr-only">Toggle navigation</span>
|
|
48
|
+
<span class="icon-bar"></span>
|
|
49
|
+
<span class="icon-bar"></span>
|
|
50
|
+
<span class="icon-bar"></span>
|
|
51
|
+
</button>
|
|
52
|
+
<a class="navbar-brand" href="/">
|
|
53
|
+
<img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="collapse navbar-collapse navbar-collapse-1">
|
|
57
|
+
<ul class="nav navbar-nav navbar-utility">
|
|
58
|
+
<li class="drawer-pf-trigger dropdown">
|
|
59
|
+
<a class="nav-item-iconic drawer-pf-trigger-icon">
|
|
60
|
+
<span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<a href="#">Status</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li class="dropdown">
|
|
67
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
68
|
+
<span class="pficon pficon-user"></span>
|
|
69
|
+
Brian Johnson <b class="caret"></b>
|
|
70
|
+
</a>
|
|
71
|
+
<ul class="dropdown-menu">
|
|
72
|
+
<li>
|
|
73
|
+
<a href="#">Link</a>
|
|
74
|
+
</li>
|
|
75
|
+
<li>
|
|
76
|
+
<a href="#">Another link</a>
|
|
77
|
+
</li>
|
|
78
|
+
<li>
|
|
79
|
+
<a href="#">Something else here</a>
|
|
80
|
+
</li>
|
|
81
|
+
<li class="divider"></li>
|
|
82
|
+
<li class="dropdown-submenu">
|
|
83
|
+
<a tabindex="-1" href="#">More options</a>
|
|
84
|
+
<ul class="dropdown-menu">
|
|
85
|
+
<li>
|
|
86
|
+
<a href="#">Link</a>
|
|
87
|
+
</li>
|
|
88
|
+
<li>
|
|
89
|
+
<a href="#">Another link</a>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<a href="#">Something else here</a>
|
|
93
|
+
</li>
|
|
94
|
+
<li class="divider"></li>
|
|
95
|
+
<li class="dropdown-header">Nav header</li>
|
|
96
|
+
<li>
|
|
97
|
+
<a href="#">Separated link</a>
|
|
98
|
+
</li>
|
|
99
|
+
<li class="divider"></li>
|
|
100
|
+
<li>
|
|
101
|
+
<a href="#">One more separated link</a>
|
|
102
|
+
</li>
|
|
103
|
+
</ul>
|
|
104
|
+
</li>
|
|
105
|
+
<li class="divider"></li>
|
|
106
|
+
<li>
|
|
107
|
+
<a href="#">One more separated link</a>
|
|
108
|
+
</li>
|
|
109
|
+
</ul>
|
|
110
|
+
</li>
|
|
111
|
+
</ul>
|
|
112
|
+
<div class="drawer-pf hide drawer-pf-notifications-non-clickable">
|
|
113
|
+
<div class="drawer-pf-title">
|
|
114
|
+
<h3 class="text-center">Notifications Drawer</h3>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="panel-group" id="notification-drawer-accordion">
|
|
117
|
+
<div class="panel panel-default">
|
|
118
|
+
<div class="panel-heading" data-component="collapse-heading">
|
|
119
|
+
<h4 class="panel-title">
|
|
120
|
+
<a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
|
|
121
|
+
Notification Tab 1
|
|
122
|
+
</a>
|
|
123
|
+
</h4>
|
|
124
|
+
<span class="panel-counter">5 New Events</span>
|
|
125
|
+
</div>
|
|
126
|
+
<div id="fixedCollapseOne" class="panel-collapse collapse in">
|
|
127
|
+
<div class="panel-body">
|
|
128
|
+
<div class="drawer-pf-notification unread">
|
|
129
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
130
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
131
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
132
|
+
</button>
|
|
133
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
134
|
+
<li><a href="#">Action</a></li>
|
|
135
|
+
<li><a href="#">Another action</a></li>
|
|
136
|
+
<li><a href="#">Something else here</a></li>
|
|
137
|
+
<li role="separator" class="divider"></li>
|
|
138
|
+
<li><a href="#">Separated link</a></li>
|
|
139
|
+
</ul>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
143
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
144
|
+
<div class="drawer-pf-notification-info">
|
|
145
|
+
<span class="date">3/31/16</span>
|
|
146
|
+
<span class="time">12:12:44 PM</span>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="drawer-pf-notification unread">
|
|
150
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
151
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
152
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
153
|
+
</button>
|
|
154
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
155
|
+
<li><a href="#">Action</a></li>
|
|
156
|
+
<li><a href="#">Another action</a></li>
|
|
157
|
+
<li><a href="#">Something else here</a></li>
|
|
158
|
+
<li role="separator" class="divider"></li>
|
|
159
|
+
<li><a href="#">Separated link</a></li>
|
|
160
|
+
</ul>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
164
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
165
|
+
<div class="drawer-pf-notification-info">
|
|
166
|
+
<span class="date">3/31/16</span>
|
|
167
|
+
<span class="time">12:12:44 PM</span>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="drawer-pf-notification">
|
|
171
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
172
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
173
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
174
|
+
</button>
|
|
175
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
176
|
+
<li><a href="#">Action</a></li>
|
|
177
|
+
<li><a href="#">Another action</a></li>
|
|
178
|
+
<li><a href="#">Something else here</a></li>
|
|
179
|
+
<li role="separator" class="divider"></li>
|
|
180
|
+
<li><a href="#">Separated link</a></li>
|
|
181
|
+
</ul>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
185
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
186
|
+
<div class="drawer-pf-notification-info">
|
|
187
|
+
<span class="date">3/31/16</span>
|
|
188
|
+
<span class="time">12:12:44 PM</span>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="drawer-pf-notification">
|
|
192
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
193
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
194
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
195
|
+
</button>
|
|
196
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
197
|
+
<li><a href="#">Action</a></li>
|
|
198
|
+
<li><a href="#">Another action</a></li>
|
|
199
|
+
<li><a href="#">Something else here</a></li>
|
|
200
|
+
<li role="separator" class="divider"></li>
|
|
201
|
+
<li><a href="#">Separated link</a></li>
|
|
202
|
+
</ul>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
206
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
207
|
+
<div class="drawer-pf-notification-info">
|
|
208
|
+
<span class="date">3/31/16</span>
|
|
209
|
+
<span class="time">12:12:44 PM</span>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
</div>
|
|
214
|
+
<div class="drawer-pf-action">
|
|
215
|
+
<button class="btn btn-link btn-block">Mark All Read</button>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="panel panel-default">
|
|
220
|
+
<div class="panel-heading" data-component="collapse-heading">
|
|
221
|
+
<h4 class="panel-title">
|
|
222
|
+
<a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
|
|
223
|
+
Notification Tab 2
|
|
224
|
+
</a>
|
|
225
|
+
</h4>
|
|
226
|
+
<span class="panel-counter">5 New Events</span>
|
|
227
|
+
</div>
|
|
228
|
+
<div id="fixedCollapseTwo" class="panel-collapse collapse">
|
|
229
|
+
<div class="panel-body">
|
|
230
|
+
<div class="drawer-pf-notification unread">
|
|
231
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
232
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
233
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
234
|
+
</button>
|
|
235
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
236
|
+
<li><a href="#">Action</a></li>
|
|
237
|
+
<li><a href="#">Another action</a></li>
|
|
238
|
+
<li><a href="#">Something else here</a></li>
|
|
239
|
+
<li role="separator" class="divider"></li>
|
|
240
|
+
<li><a href="#">Separated link</a></li>
|
|
241
|
+
</ul>
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
245
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
246
|
+
<div class="drawer-pf-notification-info">
|
|
247
|
+
<span class="date">3/31/16</span>
|
|
248
|
+
<span class="time">12:12:44 PM</span>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
<div class="drawer-pf-notification unread">
|
|
252
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
253
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
254
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
255
|
+
</button>
|
|
256
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
257
|
+
<li><a href="#">Action</a></li>
|
|
258
|
+
<li><a href="#">Another action</a></li>
|
|
259
|
+
<li><a href="#">Something else here</a></li>
|
|
260
|
+
<li role="separator" class="divider"></li>
|
|
261
|
+
<li><a href="#">Separated link</a></li>
|
|
262
|
+
</ul>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
266
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
267
|
+
<div class="drawer-pf-notification-info">
|
|
268
|
+
<span class="date">3/31/16</span>
|
|
269
|
+
<span class="time">12:12:44 PM</span>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="drawer-pf-notification">
|
|
273
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
274
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
275
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
276
|
+
</button>
|
|
277
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
278
|
+
<li><a href="#">Action</a></li>
|
|
279
|
+
<li><a href="#">Another action</a></li>
|
|
280
|
+
<li><a href="#">Something else here</a></li>
|
|
281
|
+
<li role="separator" class="divider"></li>
|
|
282
|
+
<li><a href="#">Separated link</a></li>
|
|
283
|
+
</ul>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
287
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
288
|
+
<div class="drawer-pf-notification-info">
|
|
289
|
+
<span class="date">3/31/16</span>
|
|
290
|
+
<span class="time">12:12:44 PM</span>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="drawer-pf-notification">
|
|
294
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
295
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
296
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
297
|
+
</button>
|
|
298
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
299
|
+
<li><a href="#">Action</a></li>
|
|
300
|
+
<li><a href="#">Another action</a></li>
|
|
301
|
+
<li><a href="#">Something else here</a></li>
|
|
302
|
+
<li role="separator" class="divider"></li>
|
|
303
|
+
<li><a href="#">Separated link</a></li>
|
|
304
|
+
</ul>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
308
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
309
|
+
<div class="drawer-pf-notification-info">
|
|
310
|
+
<span class="date">3/31/16</span>
|
|
311
|
+
<span class="time">12:12:44 PM</span>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<div class="drawer-pf-notification unread">
|
|
316
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
317
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
318
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
319
|
+
</button>
|
|
320
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
321
|
+
<li><a href="#">Action</a></li>
|
|
322
|
+
<li><a href="#">Another action</a></li>
|
|
323
|
+
<li><a href="#">Something else here</a></li>
|
|
324
|
+
<li role="separator" class="divider"></li>
|
|
325
|
+
<li><a href="#">Separated link</a></li>
|
|
326
|
+
</ul>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
330
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
331
|
+
<div class="drawer-pf-notification-info">
|
|
332
|
+
<span class="date">3/31/16</span>
|
|
333
|
+
<span class="time">12:12:44 PM</span>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="drawer-pf-notification unread">
|
|
337
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
338
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
339
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
340
|
+
</button>
|
|
341
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
342
|
+
<li><a href="#">Action</a></li>
|
|
343
|
+
<li><a href="#">Another action</a></li>
|
|
344
|
+
<li><a href="#">Something else here</a></li>
|
|
345
|
+
<li role="separator" class="divider"></li>
|
|
346
|
+
<li><a href="#">Separated link</a></li>
|
|
347
|
+
</ul>
|
|
348
|
+
</div>
|
|
349
|
+
|
|
350
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
351
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
352
|
+
<div class="drawer-pf-notification-info">
|
|
353
|
+
<span class="date">3/31/16</span>
|
|
354
|
+
<span class="time">12:12:44 PM</span>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="drawer-pf-notification">
|
|
358
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
359
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
360
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
361
|
+
</button>
|
|
362
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
363
|
+
<li><a href="#">Action</a></li>
|
|
364
|
+
<li><a href="#">Another action</a></li>
|
|
365
|
+
<li><a href="#">Something else here</a></li>
|
|
366
|
+
<li role="separator" class="divider"></li>
|
|
367
|
+
<li><a href="#">Separated link</a></li>
|
|
368
|
+
</ul>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
372
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
373
|
+
<div class="drawer-pf-notification-info">
|
|
374
|
+
<span class="date">3/31/16</span>
|
|
375
|
+
<span class="time">12:12:44 PM</span>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="drawer-pf-notification">
|
|
379
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
380
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
381
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
382
|
+
</button>
|
|
383
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
384
|
+
<li><a href="#">Action</a></li>
|
|
385
|
+
<li><a href="#">Another action</a></li>
|
|
386
|
+
<li><a href="#">Something else here</a></li>
|
|
387
|
+
<li role="separator" class="divider"></li>
|
|
388
|
+
<li><a href="#">Separated link</a></li>
|
|
389
|
+
</ul>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
393
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
394
|
+
<div class="drawer-pf-notification-info">
|
|
395
|
+
<span class="date">3/31/16</span>
|
|
396
|
+
<span class="time">12:12:44 PM</span>
|
|
397
|
+
</div>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="drawer-pf-notification unread">
|
|
401
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
402
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
403
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
404
|
+
</button>
|
|
405
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
406
|
+
<li><a href="#">Action</a></li>
|
|
407
|
+
<li><a href="#">Another action</a></li>
|
|
408
|
+
<li><a href="#">Something else here</a></li>
|
|
409
|
+
<li role="separator" class="divider"></li>
|
|
410
|
+
<li><a href="#">Separated link</a></li>
|
|
411
|
+
</ul>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
415
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
416
|
+
<div class="drawer-pf-notification-info">
|
|
417
|
+
<span class="date">3/31/16</span>
|
|
418
|
+
<span class="time">12:12:44 PM</span>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="drawer-pf-notification unread">
|
|
422
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
423
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
424
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
425
|
+
</button>
|
|
426
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
427
|
+
<li><a href="#">Action</a></li>
|
|
428
|
+
<li><a href="#">Another action</a></li>
|
|
429
|
+
<li><a href="#">Something else here</a></li>
|
|
430
|
+
<li role="separator" class="divider"></li>
|
|
431
|
+
<li><a href="#">Separated link</a></li>
|
|
432
|
+
</ul>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
436
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
437
|
+
<div class="drawer-pf-notification-info">
|
|
438
|
+
<span class="date">3/31/16</span>
|
|
439
|
+
<span class="time">12:12:44 PM</span>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
<div class="drawer-pf-notification">
|
|
443
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
444
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
445
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
446
|
+
</button>
|
|
447
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
448
|
+
<li><a href="#">Action</a></li>
|
|
449
|
+
<li><a href="#">Another action</a></li>
|
|
450
|
+
<li><a href="#">Something else here</a></li>
|
|
451
|
+
<li role="separator" class="divider"></li>
|
|
452
|
+
<li><a href="#">Separated link</a></li>
|
|
453
|
+
</ul>
|
|
454
|
+
</div>
|
|
455
|
+
|
|
456
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
457
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
458
|
+
<div class="drawer-pf-notification-info">
|
|
459
|
+
<span class="date">3/31/16</span>
|
|
460
|
+
<span class="time">12:12:44 PM</span>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
<div class="drawer-pf-notification">
|
|
464
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
465
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
466
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
467
|
+
</button>
|
|
468
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
469
|
+
<li><a href="#">Action</a></li>
|
|
470
|
+
<li><a href="#">Another action</a></li>
|
|
471
|
+
<li><a href="#">Something else here</a></li>
|
|
472
|
+
<li role="separator" class="divider"></li>
|
|
473
|
+
<li><a href="#">Separated link</a></li>
|
|
474
|
+
</ul>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
478
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
479
|
+
<div class="drawer-pf-notification-info">
|
|
480
|
+
<span class="date">3/31/16</span>
|
|
481
|
+
<span class="time">12:12:44 PM</span>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
<div class="drawer-pf-loading text-center">
|
|
486
|
+
<span class="spinner spinner-xs spinner-inline"></span> Loading More
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="drawer-pf-action">
|
|
490
|
+
<button class="btn btn-link btn-block">Mark All Read</button>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="panel panel-default">
|
|
495
|
+
<div class="panel-heading" data-component="collapse-heading">
|
|
496
|
+
<h4 class="panel-title">
|
|
497
|
+
<a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
|
|
498
|
+
Notification Tab 3
|
|
499
|
+
</a>
|
|
500
|
+
</h4>
|
|
501
|
+
<span class="panel-counter">5 New Events</span>
|
|
502
|
+
</div>
|
|
503
|
+
<div id="fixedCollapseThree" class="panel-collapse collapse">
|
|
504
|
+
<div class="panel-body">
|
|
505
|
+
<div class="drawer-pf-notification unread">
|
|
506
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
507
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
508
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
509
|
+
</button>
|
|
510
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
511
|
+
<li><a href="#">Action</a></li>
|
|
512
|
+
<li><a href="#">Another action</a></li>
|
|
513
|
+
<li><a href="#">Something else here</a></li>
|
|
514
|
+
<li role="separator" class="divider"></li>
|
|
515
|
+
<li><a href="#">Separated link</a></li>
|
|
516
|
+
</ul>
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
520
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
521
|
+
<div class="drawer-pf-notification-info">
|
|
522
|
+
<span class="date">3/31/16</span>
|
|
523
|
+
<span class="time">12:12:44 PM</span>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="drawer-pf-notification unread">
|
|
527
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
528
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
529
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
530
|
+
</button>
|
|
531
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
532
|
+
<li><a href="#">Action</a></li>
|
|
533
|
+
<li><a href="#">Another action</a></li>
|
|
534
|
+
<li><a href="#">Something else here</a></li>
|
|
535
|
+
<li role="separator" class="divider"></li>
|
|
536
|
+
<li><a href="#">Separated link</a></li>
|
|
537
|
+
</ul>
|
|
538
|
+
</div>
|
|
539
|
+
|
|
540
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
541
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
542
|
+
<div class="drawer-pf-notification-info">
|
|
543
|
+
<span class="date">3/31/16</span>
|
|
544
|
+
<span class="time">12:12:44 PM</span>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
<div class="drawer-pf-notification">
|
|
548
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
549
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
550
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
551
|
+
</button>
|
|
552
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
553
|
+
<li><a href="#">Action</a></li>
|
|
554
|
+
<li><a href="#">Another action</a></li>
|
|
555
|
+
<li><a href="#">Something else here</a></li>
|
|
556
|
+
<li role="separator" class="divider"></li>
|
|
557
|
+
<li><a href="#">Separated link</a></li>
|
|
558
|
+
</ul>
|
|
559
|
+
</div>
|
|
560
|
+
|
|
561
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
562
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
563
|
+
<div class="drawer-pf-notification-info">
|
|
564
|
+
<span class="date">3/31/16</span>
|
|
565
|
+
<span class="time">12:12:44 PM</span>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
<div class="drawer-pf-notification">
|
|
569
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
570
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
571
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
572
|
+
</button>
|
|
573
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
574
|
+
<li><a href="#">Action</a></li>
|
|
575
|
+
<li><a href="#">Another action</a></li>
|
|
576
|
+
<li><a href="#">Something else here</a></li>
|
|
577
|
+
<li role="separator" class="divider"></li>
|
|
578
|
+
<li><a href="#">Separated link</a></li>
|
|
579
|
+
</ul>
|
|
580
|
+
</div>
|
|
581
|
+
|
|
582
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
583
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
584
|
+
<div class="drawer-pf-notification-info">
|
|
585
|
+
<span class="date">3/31/16</span>
|
|
586
|
+
<span class="time">12:12:44 PM</span>
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
589
|
+
|
|
590
|
+
<div class="drawer-pf-notification unread">
|
|
591
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
592
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
593
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
594
|
+
</button>
|
|
595
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
596
|
+
<li><a href="#">Action</a></li>
|
|
597
|
+
<li><a href="#">Another action</a></li>
|
|
598
|
+
<li><a href="#">Something else here</a></li>
|
|
599
|
+
<li role="separator" class="divider"></li>
|
|
600
|
+
<li><a href="#">Separated link</a></li>
|
|
601
|
+
</ul>
|
|
602
|
+
</div>
|
|
603
|
+
|
|
604
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
605
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
606
|
+
<div class="drawer-pf-notification-info">
|
|
607
|
+
<span class="date">3/31/16</span>
|
|
608
|
+
<span class="time">12:12:44 PM</span>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="drawer-pf-notification unread">
|
|
612
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
613
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
614
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
615
|
+
</button>
|
|
616
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
617
|
+
<li><a href="#">Action</a></li>
|
|
618
|
+
<li><a href="#">Another action</a></li>
|
|
619
|
+
<li><a href="#">Something else here</a></li>
|
|
620
|
+
<li role="separator" class="divider"></li>
|
|
621
|
+
<li><a href="#">Separated link</a></li>
|
|
622
|
+
</ul>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
626
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
627
|
+
<div class="drawer-pf-notification-info">
|
|
628
|
+
<span class="date">3/31/16</span>
|
|
629
|
+
<span class="time">12:12:44 PM</span>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="drawer-pf-notification">
|
|
633
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
634
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
635
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
636
|
+
</button>
|
|
637
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
638
|
+
<li><a href="#">Action</a></li>
|
|
639
|
+
<li><a href="#">Another action</a></li>
|
|
640
|
+
<li><a href="#">Something else here</a></li>
|
|
641
|
+
<li role="separator" class="divider"></li>
|
|
642
|
+
<li><a href="#">Separated link</a></li>
|
|
643
|
+
</ul>
|
|
644
|
+
</div>
|
|
645
|
+
|
|
646
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
647
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
648
|
+
<div class="drawer-pf-notification-info">
|
|
649
|
+
<span class="date">3/31/16</span>
|
|
650
|
+
<span class="time">12:12:44 PM</span>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
<div class="drawer-pf-notification">
|
|
654
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
655
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
656
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
657
|
+
</button>
|
|
658
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
659
|
+
<li><a href="#">Action</a></li>
|
|
660
|
+
<li><a href="#">Another action</a></li>
|
|
661
|
+
<li><a href="#">Something else here</a></li>
|
|
662
|
+
<li role="separator" class="divider"></li>
|
|
663
|
+
<li><a href="#">Separated link</a></li>
|
|
664
|
+
</ul>
|
|
665
|
+
</div>
|
|
666
|
+
|
|
667
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
668
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
669
|
+
<div class="drawer-pf-notification-info">
|
|
670
|
+
<span class="date">3/31/16</span>
|
|
671
|
+
<span class="time">12:12:44 PM</span>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
|
|
675
|
+
<div class="drawer-pf-notification unread">
|
|
676
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
677
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
678
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
679
|
+
</button>
|
|
680
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
681
|
+
<li><a href="#">Action</a></li>
|
|
682
|
+
<li><a href="#">Another action</a></li>
|
|
683
|
+
<li><a href="#">Something else here</a></li>
|
|
684
|
+
<li role="separator" class="divider"></li>
|
|
685
|
+
<li><a href="#">Separated link</a></li>
|
|
686
|
+
</ul>
|
|
687
|
+
</div>
|
|
688
|
+
|
|
689
|
+
<span class="pficon pficon-info pull-left"></span>
|
|
690
|
+
<span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
|
|
691
|
+
<div class="drawer-pf-notification-info">
|
|
692
|
+
<span class="date">3/31/16</span>
|
|
693
|
+
<span class="time">12:12:44 PM</span>
|
|
694
|
+
</div>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="drawer-pf-notification unread">
|
|
697
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
698
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
699
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
700
|
+
</button>
|
|
701
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
702
|
+
<li><a href="#">Action</a></li>
|
|
703
|
+
<li><a href="#">Another action</a></li>
|
|
704
|
+
<li><a href="#">Something else here</a></li>
|
|
705
|
+
<li role="separator" class="divider"></li>
|
|
706
|
+
<li><a href="#">Separated link</a></li>
|
|
707
|
+
</ul>
|
|
708
|
+
</div>
|
|
709
|
+
|
|
710
|
+
<span class="pficon pficon-ok pull-left"></span>
|
|
711
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
712
|
+
<div class="drawer-pf-notification-info">
|
|
713
|
+
<span class="date">3/31/16</span>
|
|
714
|
+
<span class="time">12:12:44 PM</span>
|
|
715
|
+
</div>
|
|
716
|
+
</div>
|
|
717
|
+
<div class="drawer-pf-notification">
|
|
718
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
719
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
720
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
721
|
+
</button>
|
|
722
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
723
|
+
<li><a href="#">Action</a></li>
|
|
724
|
+
<li><a href="#">Another action</a></li>
|
|
725
|
+
<li><a href="#">Something else here</a></li>
|
|
726
|
+
<li role="separator" class="divider"></li>
|
|
727
|
+
<li><a href="#">Separated link</a></li>
|
|
728
|
+
</ul>
|
|
729
|
+
</div>
|
|
730
|
+
|
|
731
|
+
<span class="pficon pficon-warning-triangle-o pull-left"></span>
|
|
732
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
733
|
+
<div class="drawer-pf-notification-info">
|
|
734
|
+
<span class="date">3/31/16</span>
|
|
735
|
+
<span class="time">12:12:44 PM</span>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
<div class="drawer-pf-notification">
|
|
739
|
+
<div class="dropdown pull-right dropdown-kebab-pf">
|
|
740
|
+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
741
|
+
<span class="fa fa-ellipsis-v"></span>
|
|
742
|
+
</button>
|
|
743
|
+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
|
744
|
+
<li><a href="#">Action</a></li>
|
|
745
|
+
<li><a href="#">Another action</a></li>
|
|
746
|
+
<li><a href="#">Something else here</a></li>
|
|
747
|
+
<li role="separator" class="divider"></li>
|
|
748
|
+
<li><a href="#">Separated link</a></li>
|
|
749
|
+
</ul>
|
|
750
|
+
</div>
|
|
751
|
+
|
|
752
|
+
<span class="pficon pficon-error-circle-o pull-left"></span>
|
|
753
|
+
<span class="drawer-pf-notification-message">Another Event Notification</span>
|
|
754
|
+
<div class="drawer-pf-notification-info">
|
|
755
|
+
<span class="date">3/31/16</span>
|
|
756
|
+
<span class="time">12:12:44 PM</span>
|
|
757
|
+
</div>
|
|
758
|
+
</div>
|
|
759
|
+
|
|
760
|
+
</div>
|
|
761
|
+
<div class="drawer-pf-action">
|
|
762
|
+
<button class="btn btn-link btn-block">Mark All Read</button>
|
|
763
|
+
</div>
|
|
764
|
+
</div>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
<script>
|
|
769
|
+
$(document).ready(function() {
|
|
770
|
+
// Show/Hide Notifications Drawer
|
|
771
|
+
$('.drawer-pf-trigger').click(function() {
|
|
772
|
+
var $drawer = $('.drawer-pf');
|
|
773
|
+
|
|
774
|
+
$(this).toggleClass('open');
|
|
775
|
+
if ($drawer.hasClass('hide')) {
|
|
776
|
+
$drawer.removeClass('hide');
|
|
777
|
+
setTimeout(function () {
|
|
778
|
+
if (window.dispatchEvent) {
|
|
779
|
+
window.dispatchEvent(new Event('resize'));
|
|
780
|
+
}
|
|
781
|
+
// Special case for IE
|
|
782
|
+
if ($(document).fireEvent) {
|
|
783
|
+
$(document).fireEvent('onresize');
|
|
784
|
+
}
|
|
785
|
+
}, 100);
|
|
786
|
+
} else {
|
|
787
|
+
$drawer.addClass('hide');
|
|
788
|
+
}
|
|
789
|
+
});
|
|
790
|
+
// Mark All Read
|
|
791
|
+
$('.panel-collapse').each(function (index, panel) {
|
|
792
|
+
var $panel = $(panel);
|
|
793
|
+
$panel.on('click', '.drawer-pf-action .btn', function() {
|
|
794
|
+
$panel.find('.unread').removeClass('unread');
|
|
795
|
+
$(panel.parentElement).find('.panel-counter').text('0 New Events');
|
|
796
|
+
});
|
|
797
|
+
});
|
|
798
|
+
|
|
799
|
+
$('#notification-drawer-accordion').initCollapseHeights('.panel-body');
|
|
800
|
+
});
|
|
801
|
+
</script>
|
|
802
|
+
<ul class="nav navbar-nav navbar-primary">
|
|
803
|
+
<li>
|
|
804
|
+
<a href="#">First Link</a>
|
|
805
|
+
</li>
|
|
806
|
+
<li class="active">
|
|
807
|
+
<a href="#">Another Link</a>
|
|
808
|
+
</li>
|
|
809
|
+
<li>
|
|
810
|
+
<a href="#">And Another</a>
|
|
811
|
+
</li>
|
|
812
|
+
<li>
|
|
813
|
+
<a href="#">As a General Rule</a>
|
|
814
|
+
</li>
|
|
815
|
+
<li>
|
|
816
|
+
<a href="#">Five to Seven Links</a>
|
|
817
|
+
</li>
|
|
818
|
+
<li>
|
|
819
|
+
<a href="#">Is Good</a>
|
|
820
|
+
</li>
|
|
821
|
+
</ul>
|
|
822
|
+
</div>
|
|
823
|
+
</nav>
|
|
824
|
+
<div class="container-fluid container-cards-pf">
|
|
825
|
+
<div class="row row-cards-pf">
|
|
826
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
827
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
828
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
829
|
+
<h2 class="card-pf-title">
|
|
830
|
+
<span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
831
|
+
</h2>
|
|
832
|
+
<div class="card-pf-body">
|
|
833
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
834
|
+
<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>
|
|
835
|
+
</p>
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
|
|
839
|
+
</div>
|
|
840
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
841
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
842
|
+
<h2 class="card-pf-title">
|
|
843
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
|
|
844
|
+
</h2>
|
|
845
|
+
<div class="card-pf-body">
|
|
846
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
847
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
848
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
|
|
849
|
+
</p>
|
|
850
|
+
</div>
|
|
851
|
+
</div>
|
|
852
|
+
|
|
853
|
+
</div>
|
|
854
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
855
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
856
|
+
<h2 class="card-pf-title">
|
|
857
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
|
|
858
|
+
</h2>
|
|
859
|
+
<div class="card-pf-body">
|
|
860
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
861
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
862
|
+
</p>
|
|
863
|
+
</div>
|
|
864
|
+
</div>
|
|
865
|
+
|
|
866
|
+
</div>
|
|
867
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
868
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
869
|
+
<h2 class="card-pf-title">
|
|
870
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
|
|
871
|
+
</h2>
|
|
872
|
+
<div class="card-pf-body">
|
|
873
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
874
|
+
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
|
|
875
|
+
</p>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
</div><!-- /row -->
|
|
880
|
+
<div class="row row-cards-pf">
|
|
881
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
882
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
883
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
884
|
+
<h2 class="card-pf-title">
|
|
885
|
+
<span class="fa fa-rebel"></span>
|
|
886
|
+
<span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
887
|
+
</h2>
|
|
888
|
+
<div class="card-pf-body">
|
|
889
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
890
|
+
<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>
|
|
891
|
+
</p>
|
|
892
|
+
</div>
|
|
893
|
+
</div>
|
|
894
|
+
|
|
895
|
+
</div>
|
|
896
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
897
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
898
|
+
<h2 class="card-pf-title">
|
|
899
|
+
<a href="#">
|
|
900
|
+
<span class="fa fa-paper-plane"></span>
|
|
901
|
+
<span class="card-pf-aggregate-status-count">20</span> Amet
|
|
902
|
+
</a>
|
|
903
|
+
</h2>
|
|
904
|
+
<div class="card-pf-body">
|
|
905
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
906
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
907
|
+
</p>
|
|
908
|
+
</div>
|
|
909
|
+
</div>
|
|
910
|
+
|
|
911
|
+
</div>
|
|
912
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
913
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
914
|
+
<h2 class="card-pf-title">
|
|
915
|
+
<a href="#">
|
|
916
|
+
<span class="pficon pficon-cluster"></span>
|
|
917
|
+
<span class="card-pf-aggregate-status-count">9</span> Adipiscing
|
|
918
|
+
</a>
|
|
919
|
+
</h2>
|
|
920
|
+
<div class="card-pf-body">
|
|
921
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
922
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
923
|
+
</p>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
|
|
927
|
+
</div>
|
|
928
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
929
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
930
|
+
<h2 class="card-pf-title">
|
|
931
|
+
<a href="#">
|
|
932
|
+
<span class="pficon pficon-image"></span>
|
|
933
|
+
<span class="card-pf-aggregate-status-count">12</span> Lorem
|
|
934
|
+
</a>
|
|
935
|
+
</h2>
|
|
936
|
+
<div class="card-pf-body">
|
|
937
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
938
|
+
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
|
|
939
|
+
</p>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
</div>
|
|
944
|
+
<div class="row row-cards-pf">
|
|
945
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
946
|
+
<div class="col-xs-12 col-sm-6">
|
|
947
|
+
<div class="card-pf">
|
|
948
|
+
<div class="card-pf-heading">
|
|
949
|
+
<h2 class="card-pf-title">
|
|
950
|
+
Top Utilized Clusters
|
|
951
|
+
</h2>
|
|
952
|
+
</div>
|
|
953
|
+
<div class="card-pf-body">
|
|
954
|
+
<div class="progress-description">
|
|
955
|
+
RHOS6-Controller
|
|
956
|
+
</div>
|
|
957
|
+
<div class="progress progress-label-top-right">
|
|
958
|
+
<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">
|
|
959
|
+
<span><strong>190.0 of 200.0 GB</strong> Used</span>
|
|
960
|
+
</div>
|
|
961
|
+
<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">
|
|
962
|
+
<span class="sr-only">5% Available</span>
|
|
963
|
+
</div>
|
|
964
|
+
</div>
|
|
965
|
+
<div class="progress-description">
|
|
966
|
+
CFMEQE-Cluster
|
|
967
|
+
</div>
|
|
968
|
+
<div class="progress progress-label-top-right">
|
|
969
|
+
<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">
|
|
970
|
+
<span><strong>100.0 of 200.0 GB</strong> Used</span>
|
|
971
|
+
</div>
|
|
972
|
+
<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">
|
|
973
|
+
<span class="sr-only">50% Available</span>
|
|
974
|
+
</div>
|
|
975
|
+
</div>
|
|
976
|
+
<div class="progress-description">
|
|
977
|
+
RHOS-Undercloud
|
|
978
|
+
</div>
|
|
979
|
+
<div class="progress progress-label-top-right">
|
|
980
|
+
<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">
|
|
981
|
+
<span><strong>140.0 of 200.0 GB</strong> Used</span>
|
|
982
|
+
</div>
|
|
983
|
+
<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">
|
|
984
|
+
<span class="sr-only">30% Available</span>
|
|
985
|
+
</div>
|
|
986
|
+
</div>
|
|
987
|
+
<div class="progress-description">
|
|
988
|
+
RHEL6-Controller
|
|
989
|
+
</div>
|
|
990
|
+
<div class="progress progress-label-top-right">
|
|
991
|
+
<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">
|
|
992
|
+
<span><strong>153.0 of 200.0 GB</strong> Used</span>
|
|
993
|
+
</div>
|
|
994
|
+
<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">
|
|
995
|
+
<span class="sr-only">23.5% Available</span>
|
|
996
|
+
</div>
|
|
997
|
+
</div>
|
|
998
|
+
</div>
|
|
999
|
+
</div>
|
|
1000
|
+
|
|
1001
|
+
</div>
|
|
1002
|
+
<div class="col-xs-12 col-sm-6">
|
|
1003
|
+
<div class="card-pf">
|
|
1004
|
+
<div class="card-pf-heading">
|
|
1005
|
+
<h2 class="card-pf-title">
|
|
1006
|
+
Quotas
|
|
1007
|
+
</h2>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="card-pf-body">
|
|
1010
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
1011
|
+
<div class="progress-description">
|
|
1012
|
+
CPU
|
|
1013
|
+
</div>
|
|
1014
|
+
<div class="progress">
|
|
1015
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
1016
|
+
<span><strong>115 of 460</strong> MHz</span>
|
|
1017
|
+
</div>
|
|
1018
|
+
<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">
|
|
1019
|
+
<span class="sr-only">75% Available</span>
|
|
1020
|
+
</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
</div>
|
|
1023
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
1024
|
+
<div class="progress-description">
|
|
1025
|
+
Memory
|
|
1026
|
+
</div>
|
|
1027
|
+
<div class="progress">
|
|
1028
|
+
<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">
|
|
1029
|
+
<span><strong>8 of 16</strong> GB</span>
|
|
1030
|
+
</div>
|
|
1031
|
+
<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">
|
|
1032
|
+
<span class="sr-only">50% Available</span>
|
|
1033
|
+
</div>
|
|
1034
|
+
</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
1037
|
+
<div class="progress-description">
|
|
1038
|
+
Pods
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="progress">
|
|
1041
|
+
<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">
|
|
1042
|
+
<span><strong>5 of 8</strong> Total</span>
|
|
1043
|
+
</div>
|
|
1044
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
|
|
1045
|
+
<span class="sr-only">37.5% Available</span>
|
|
1046
|
+
</div>
|
|
1047
|
+
</div>
|
|
1048
|
+
</div>
|
|
1049
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
1050
|
+
<div class="progress-description">
|
|
1051
|
+
Services
|
|
1052
|
+
</div>
|
|
1053
|
+
<div class="progress">
|
|
1054
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
1055
|
+
<span><strong>2 of 2</strong> Total</span>
|
|
1056
|
+
</div>
|
|
1057
|
+
</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
</div>
|
|
1061
|
+
|
|
1062
|
+
</div>
|
|
1063
|
+
</div><!-- /row -->
|
|
1064
|
+
<div class="row row-cards-pf">
|
|
1065
|
+
<div class="col-md-12">
|
|
1066
|
+
<div class="card-pf card-pf-utilization">
|
|
1067
|
+
<div class="card-pf-heading">
|
|
1068
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
1069
|
+
<h2 class="card-pf-title">
|
|
1070
|
+
Utilization
|
|
1071
|
+
</h2>
|
|
1072
|
+
</div>
|
|
1073
|
+
<div class="card-pf-body">
|
|
1074
|
+
<div class="row">
|
|
1075
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
1076
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
1077
|
+
<p class="card-pf-utilization-details">
|
|
1078
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
1079
|
+
<span class="card-pf-utilization-card-details-description">
|
|
1080
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
1081
|
+
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
1082
|
+
</span>
|
|
1083
|
+
</p>
|
|
1084
|
+
<div id="chart-pf-donut-1"></div>
|
|
1085
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
|
|
1086
|
+
<script>
|
|
1087
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
1088
|
+
donutConfig.bindto = '#chart-pf-donut-1';
|
|
1089
|
+
donutConfig.color = {
|
|
1090
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
1091
|
+
};
|
|
1092
|
+
donutConfig.data = {
|
|
1093
|
+
type: "donut",
|
|
1094
|
+
columns: [
|
|
1095
|
+
["Used", 95],
|
|
1096
|
+
["Available", 5]
|
|
1097
|
+
],
|
|
1098
|
+
groups: [
|
|
1099
|
+
["used", "available"]
|
|
1100
|
+
],
|
|
1101
|
+
order: null
|
|
1102
|
+
};
|
|
1103
|
+
donutConfig.tooltip = {
|
|
1104
|
+
contents: function (d) {
|
|
1105
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
1106
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
1107
|
+
'</span>';
|
|
1108
|
+
}
|
|
1109
|
+
};
|
|
1110
|
+
|
|
1111
|
+
var chart1 = c3.generate(donutConfig);
|
|
1112
|
+
var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
|
|
1113
|
+
donutChartTitle.text("");
|
|
1114
|
+
donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
1115
|
+
donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
1116
|
+
|
|
1117
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
1118
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-1';
|
|
1119
|
+
sparklineConfig.data = {
|
|
1120
|
+
columns: [
|
|
1121
|
+
['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
1122
|
+
],
|
|
1123
|
+
type: 'area'
|
|
1124
|
+
};
|
|
1125
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
1126
|
+
</script>
|
|
1127
|
+
</div>
|
|
1128
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
1129
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
1130
|
+
<p class="card-pf-utilization-details">
|
|
1131
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
1132
|
+
<span class="card-pf-utilization-card-details-description">
|
|
1133
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
1134
|
+
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
1135
|
+
</span>
|
|
1136
|
+
</p>
|
|
1137
|
+
<div id="chart-pf-donut-2"></div>
|
|
1138
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
|
|
1139
|
+
<script>
|
|
1140
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
1141
|
+
donutConfig.bindto = '#chart-pf-donut-2';
|
|
1142
|
+
donutConfig.color = {
|
|
1143
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
1144
|
+
};
|
|
1145
|
+
donutConfig.data = {
|
|
1146
|
+
type: "donut",
|
|
1147
|
+
columns: [
|
|
1148
|
+
["Used", 41],
|
|
1149
|
+
["Available", 59]
|
|
1150
|
+
],
|
|
1151
|
+
groups: [
|
|
1152
|
+
["used", "available"]
|
|
1153
|
+
],
|
|
1154
|
+
order: null
|
|
1155
|
+
};
|
|
1156
|
+
donutConfig.tooltip = {
|
|
1157
|
+
contents: function (d) {
|
|
1158
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
1159
|
+
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
|
|
1160
|
+
'</span>';
|
|
1161
|
+
}
|
|
1162
|
+
};
|
|
1163
|
+
|
|
1164
|
+
var chart3 = c3.generate(donutConfig);
|
|
1165
|
+
var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
|
|
1166
|
+
donutChartTitle.text("");
|
|
1167
|
+
donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
1168
|
+
donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
1169
|
+
|
|
1170
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
1171
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-2';
|
|
1172
|
+
sparklineConfig.data = {
|
|
1173
|
+
columns: [
|
|
1174
|
+
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
1175
|
+
],
|
|
1176
|
+
type: 'area'
|
|
1177
|
+
};
|
|
1178
|
+
var chart4 = c3.generate(sparklineConfig);
|
|
1179
|
+
</script>
|
|
1180
|
+
</div>
|
|
1181
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
1182
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
1183
|
+
<p class="card-pf-utilization-details">
|
|
1184
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
1185
|
+
<span class="card-pf-utilization-card-details-description">
|
|
1186
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
1187
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
1188
|
+
</span>
|
|
1189
|
+
</p>
|
|
1190
|
+
<div id="chart-pf-donut-3"></div>
|
|
1191
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
|
|
1192
|
+
<script>
|
|
1193
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
1194
|
+
donutConfig.bindto = '#chart-pf-donut-3';
|
|
1195
|
+
donutConfig.color = {
|
|
1196
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
1197
|
+
};
|
|
1198
|
+
donutConfig.data = {
|
|
1199
|
+
type: "donut",
|
|
1200
|
+
columns: [
|
|
1201
|
+
["Used", 85],
|
|
1202
|
+
["Available", 15]
|
|
1203
|
+
],
|
|
1204
|
+
groups: [
|
|
1205
|
+
["used", "available"]
|
|
1206
|
+
],
|
|
1207
|
+
order: null
|
|
1208
|
+
};
|
|
1209
|
+
donutConfig.tooltip = {
|
|
1210
|
+
contents: function (d) {
|
|
1211
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
1212
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
1213
|
+
'</span>';
|
|
1214
|
+
}
|
|
1215
|
+
};
|
|
1216
|
+
|
|
1217
|
+
var chart5 = c3.generate(donutConfig);
|
|
1218
|
+
var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
|
|
1219
|
+
donutChartTitle.text("");
|
|
1220
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
1221
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
1222
|
+
|
|
1223
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
1224
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-3';
|
|
1225
|
+
sparklineConfig.data = {
|
|
1226
|
+
columns: [
|
|
1227
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
1228
|
+
],
|
|
1229
|
+
type: 'area'
|
|
1230
|
+
};
|
|
1231
|
+
var chart6 = c3.generate(sparklineConfig);
|
|
1232
|
+
</script>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
</div>
|
|
1236
|
+
</div>
|
|
1237
|
+
|
|
1238
|
+
</div>
|
|
1239
|
+
</div><!-- /row -->
|
|
1240
|
+
<div class="row row-cards-pf">
|
|
1241
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
1242
|
+
<div class="card-pf card-pf-utilization">
|
|
1243
|
+
<h2 class="card-pf-title">
|
|
1244
|
+
Network
|
|
1245
|
+
</h2>
|
|
1246
|
+
<div class="card-pf-body">
|
|
1247
|
+
<p class="card-pf-utilization-details">
|
|
1248
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
1249
|
+
<span class="card-pf-utilization-card-details-description">
|
|
1250
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
1251
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
1252
|
+
</span>
|
|
1253
|
+
</p>
|
|
1254
|
+
<div id="chart-pf-donut-4"></div>
|
|
1255
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
|
|
1256
|
+
<script>
|
|
1257
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
1258
|
+
|
|
1259
|
+
var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
1260
|
+
donutConfig.bindto = '#chart-pf-donut-4';
|
|
1261
|
+
donutConfig.color = {
|
|
1262
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
1263
|
+
};
|
|
1264
|
+
donutConfig.data = {
|
|
1265
|
+
type: "donut",
|
|
1266
|
+
columns: [
|
|
1267
|
+
["Used", 85],
|
|
1268
|
+
["Available", 15]
|
|
1269
|
+
],
|
|
1270
|
+
groups: [
|
|
1271
|
+
["used", "available"]
|
|
1272
|
+
],
|
|
1273
|
+
order: null
|
|
1274
|
+
};
|
|
1275
|
+
donutConfig.tooltip = {
|
|
1276
|
+
contents: function (d) {
|
|
1277
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
1278
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
1279
|
+
'</span>';
|
|
1280
|
+
}
|
|
1281
|
+
};
|
|
1282
|
+
|
|
1283
|
+
var chart1 = c3.generate(donutConfig);
|
|
1284
|
+
var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
|
|
1285
|
+
donutChartTitle.text("");
|
|
1286
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
1287
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
1288
|
+
|
|
1289
|
+
var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
|
1290
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-4';
|
|
1291
|
+
sparklineConfig.data = {
|
|
1292
|
+
columns: [
|
|
1293
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
1294
|
+
],
|
|
1295
|
+
type: 'area'
|
|
1296
|
+
};
|
|
1297
|
+
|
|
1298
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
1299
|
+
</script>
|
|
1300
|
+
</div>
|
|
1301
|
+
</div>
|
|
1302
|
+
|
|
1303
|
+
</div>
|
|
1304
|
+
</div><!-- /row -->
|
|
1305
|
+
<div class="row row-cards-pf">
|
|
1306
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1307
|
+
<div class="col-xs-12 col-sm-6 col-md-5">
|
|
1308
|
+
<div class="card-pf">
|
|
1309
|
+
<div class="card-pf-heading">
|
|
1310
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
1311
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
1312
|
+
Last 30 Days <span class="caret"></span>
|
|
1313
|
+
</button>
|
|
1314
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
1315
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
1316
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
1317
|
+
</ul>
|
|
1318
|
+
</div>
|
|
1319
|
+
<h2 class="card-pf-title">
|
|
1320
|
+
Card Title
|
|
1321
|
+
</h2>
|
|
1322
|
+
</div>
|
|
1323
|
+
<div class="card-pf-body">
|
|
1324
|
+
<p>[card contents]</p>
|
|
1325
|
+
</div>
|
|
1326
|
+
</div>
|
|
1327
|
+
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="col-xs-12 col-sm-6 col-md-7">
|
|
1330
|
+
<div class="card-pf">
|
|
1331
|
+
<h2 class="card-pf-title">
|
|
1332
|
+
Card Title
|
|
1333
|
+
</h2>
|
|
1334
|
+
<div class="card-pf-body">
|
|
1335
|
+
<p>[card contents]</p>
|
|
1336
|
+
</div>
|
|
1337
|
+
<div class="card-pf-footer">
|
|
1338
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
1339
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
1340
|
+
Last 30 Days <span class="caret"></span>
|
|
1341
|
+
</button>
|
|
1342
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
1343
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
1344
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
1345
|
+
</ul>
|
|
1346
|
+
</div>
|
|
1347
|
+
<p>
|
|
1348
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
1349
|
+
<span class="pficon pficon-add-circle-o"></span>Add New Cluster
|
|
1350
|
+
</a>
|
|
1351
|
+
</p>
|
|
1352
|
+
</div>
|
|
1353
|
+
</div>
|
|
1354
|
+
|
|
1355
|
+
</div>
|
|
1356
|
+
</div><!-- /row -->
|
|
1357
|
+
<div class="row row-cards-pf">
|
|
1358
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1359
|
+
<div class="col-xs-12 col-sm-5 col-md-5">
|
|
1360
|
+
<div class="card-pf">
|
|
1361
|
+
<h2 class="card-pf-title">
|
|
1362
|
+
Card Title
|
|
1363
|
+
</h2>
|
|
1364
|
+
<div class="card-pf-body">
|
|
1365
|
+
<p>[card contents]</p>
|
|
1366
|
+
</div>
|
|
1367
|
+
<div class="card-pf-footer">
|
|
1368
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
1369
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
1370
|
+
Last 30 Days <span class="caret"></span>
|
|
1371
|
+
</button>
|
|
1372
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
1373
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
1374
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
1375
|
+
</ul>
|
|
1376
|
+
</div>
|
|
1377
|
+
<p>
|
|
1378
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
1379
|
+
<span class="pficon pficon-flag"></span>View CPU Events
|
|
1380
|
+
</a>
|
|
1381
|
+
</p>
|
|
1382
|
+
</div>
|
|
1383
|
+
</div>
|
|
1384
|
+
</div>
|
|
1385
|
+
<div class="col-xs-12 col-sm-7 col-md-7">
|
|
1386
|
+
<div class="card-pf">
|
|
1387
|
+
<h2 class="card-pf-title">
|
|
1388
|
+
Card Title
|
|
1389
|
+
</h2>
|
|
1390
|
+
<div class="card-pf-body">
|
|
1391
|
+
<p>[card contents]</p>
|
|
1392
|
+
</div>
|
|
1393
|
+
</div>
|
|
1394
|
+
</div>
|
|
1395
|
+
</div>
|
|
1396
|
+
<div class="row row-cards-pf">
|
|
1397
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1398
|
+
<div class="col-xs-6 col-sm-8 col-md-8">
|
|
1399
|
+
<div class="card-pf">
|
|
1400
|
+
<div class="card-pf-body">
|
|
1401
|
+
<p>[card contents]</p>
|
|
1402
|
+
</div>
|
|
1403
|
+
<div class="card-pf-footer">
|
|
1404
|
+
<p><a href="#">Footer link</a></p>
|
|
1405
|
+
</div>
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
<div class="col-xs-6 col-sm-4 col-md-4">
|
|
1409
|
+
<div class="card-pf">
|
|
1410
|
+
<div class="card-pf-body">
|
|
1411
|
+
<p>[card contents]</p>
|
|
1412
|
+
</div>
|
|
1413
|
+
<div class="card-pf-footer">
|
|
1414
|
+
<p><a href="#">Footer link</a></p>
|
|
1415
|
+
</div>
|
|
1416
|
+
</div>
|
|
1417
|
+
</div>
|
|
1418
|
+
</div><!-- /row -->
|
|
1419
|
+
<div class="row row-cards-pf">
|
|
1420
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1421
|
+
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
1422
|
+
<div class="card-pf">
|
|
1423
|
+
<div class="card-pf-body">
|
|
1424
|
+
<p>[card contents]</p>
|
|
1425
|
+
</div>
|
|
1426
|
+
</div>
|
|
1427
|
+
</div>
|
|
1428
|
+
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
1429
|
+
<div class="card-pf">
|
|
1430
|
+
<div class="card-pf-body">
|
|
1431
|
+
<p>[card contents]</p>
|
|
1432
|
+
</div>
|
|
1433
|
+
</div>
|
|
1434
|
+
</div>
|
|
1435
|
+
</div><!-- /row -->
|
|
1436
|
+
|
|
1437
|
+
</div>
|
|
1438
|
+
<script>
|
|
1439
|
+
$(document).ready(function() {
|
|
1440
|
+
// matchHeight the contents of each .card-pf and then the .card-pf itself
|
|
1441
|
+
$(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
|
|
1442
|
+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
|
|
1443
|
+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
|
|
1444
|
+
$(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
|
|
1445
|
+
|
|
1446
|
+
// initialize tooltips
|
|
1447
|
+
$('[data-toggle="tooltip"]').tooltip();
|
|
1448
|
+
});
|
|
1449
|
+
</script>
|
|
1450
|
+
</body>
|
|
1451
|
+
</html>
|