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.
56 lines (53 loc) • 2.17 kB
HTML
{% include widgets/layouts/navbar-vertical.html %}
<div class="nav-pf-vertical nav-pf-vertical-with-secondary-nav {% if page.hide-icons %}hidden-icons-pf{% endif %}">
<ul class="list-group">
<li class="list-group-item active">
<a href="#">
<span class="fa fa-dashboard"></span>
<span class="list-group-item-value">Dashboard</span>
</a>
</li>
<li class="list-group-item">
<a href="#">
<span class="pficon pficon-cluster"></span>
<span class="list-group-item-value">Clusters</span>
</a>
</li>
<li class="list-group-item">
<a href="#">
<span class="pficon pficon-screen"></span>
<span class="list-group-item-value">Hosts</span>
</a>
</li>
<li class="list-group-item persistent-secondary" data-target="#storage-secondary">
<a href="#">
<span class="pficon pficon-container-node"></span>
<span class="list-group-item-value">Storage</span>
</a>
{% include widgets/secondary-nav-storage.html %}
</li>
<li class="list-group-item persistent-secondary" data-target="#admin-secondary">
<a href="#">
<span class="fa fa-cog"></span>
<span class="list-group-item-value">Admin</span>
</a>
{% include widgets/secondary-nav-admin.html %}
</li>
</ul>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical container-pf-nav-pf-vertical-with-secondary {% if page.hide-icons == true %}hidden-icons-pf{% endif %}">
{% include widgets/layouts/cards-alt.html %}
</div>
<script>
$(document).ready(function() {
// matchHeight the contents of each .card-pf and then the .card-pf itself
$(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
// initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
// Initialize the vertical navigation
$().setupVerticalNavigation(true);
});
</script>