Use new bootstrap card from taglib.
<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:issues="/issues" xmlns:dt="/data-tables" >
+<j:jelly xmlns:j="jelly:core" xmlns:issues="/issues" xmlns:dt="/data-tables" xmlns:bs="/bootstrap">
<div class="row py-3">
+ <!-- A carousel with all pie charts on small screens -->
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 d-none d-block d-lg-block d-xl-none d-xxl-none">
-
- <div class="card card-marg-bot">
- <div data-role="page" class="card-body">
-
- <h5 class="card-title">
- ${%Overview}
- <i class="fa fa-bell icon-right fa-2x" aria-hidden="true"/>
- </h5>
-
+ <bs:card title="${%Overview}" fontAwesomeIcon="fa-bell">
<div id="overview-carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<span class="sr-only">Next</span>
</a>
</div>
+ </bs:card>
</div>
- </div>
- </div>
+ <!-- A single trend chart with the severities pie chart on large screens -->
<div class="col-xl-3 col-xxl-2 d-none d-xl-block">
- <div class="card card-marg-bot">
- <div data-role="page" class="card-body">
-
- <h5 class="card-title">
- ${%Severities Distribution}
- <i class="fa fa-chart-pie icon-right fa-2x" aria-hidden="true"/>
- </h5>
+ <bs:card title="${%Severities Distribution}" fontAwesomeIcon="fa-chart-pie">
<div id="single-severities-chart" class="graph-cursor-pointer card-chart"/>
+ </bs:card>
</div>
- </div>
- </div>
+ <!-- A single trend chart with the reference pie chart on large screens -->
<div class="col-xl-3 col-xxl-2 d-none d-xl-block">
- <div class="card card-marg-bot">
- <div data-role="page" class="card-body">
-
- <h5 class="card-title">
- ${%Reference Comparison}
- <i class="fa fa-bell icon-right fa-2x" aria-hidden="true"/>
- </h5>
+ <bs:card title="${%Reference Comparison}" fontAwesomeIcon="fa-bell">
<div id="single-trend-chart" class="graph-cursor-pointer card-chart"/>
+ </bs:card>
</div>
- </div>
- </div>
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 col-xl-6 col-xxl-8">
<issues:history/>
<j:if test="${i.isNotEmpty()}">
<div id="statistics">
- <div class="card">
- <div class="card-body">
- <h5 class="card-title">${%Details}
- <img class="icon-right" src="${resURL}/${it.labelProvider.largeIconUrl}"></img>
- </h5>
+ <bs:card title="${%Details}" pngIcon="${resURL}/${it.labelProvider.largeIconUrl}">
<ul class="nav nav-tabs flex-wrap" role="tablist" id="tab-details">
<issues:property-tab property="origin" name="${l.tools}" elements="${i.tools}"/>
</div>
- </div>
- </div>
+ </bs:card>
+
</div>
</j:if>
+
</div>
</div>
