<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> @{ var portfolioID = [TknParams:PortfolioID]; string ReportMode = [TknParams:ReportMode]; } @foreach (var program in @Initiative.ProgramRollupList("InitiativeID=" + portfolioID ) ) { var programID = program.InitiativeID; var programHealthClass = "btn btn-sq-xs " + program.OverallHealthStatusClass; var overallstatuscellclass = "statuscell " + program.OverallHealthStatusClass; @if ( @Initiative.ProgramRollupList("InitiativeID=" + programID).Count() >= 0 ) { <text> <div class="container-full"> <!-- Master Report Table --> <div class="datagrid"> <table> <caption> <span class="table-title"> @if ( ReportMode == "app" ) {<a href="/Initiative-Explorer/Tracker-Lite?PID=@program.InitiativeID"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span></a>} @program.InitiativeName</span> <span class="@overallstatuscellclass"> @program.OverallHealthStatusName</span> </caption> <thead> <tr> <th width="40%">Projects</th> <th width="5%">Scope</th> <th width="5%">Schedule</th> <th width="5%">Resource</th> <th width="5%">Risk</th> <th width="5%">Budget</th> <th width="15%">% Complete</th> <th width="10%">End Date</th> <th width="19%">Overall Status </th> </tr> </thead> <tbody> </text> @foreach (var project in @Initiative.ProgramRollupList("InitiativeID=" + programID) ) { var scopeClass = "btn btn-sq-xs " + project.ScopeStatusClass; var scheduleClass = "btn btn-sq-xs " + project.TimelineStatusClass; var resourceClass = "btn btn-sq-xs " + project.ResourceStatusClass; var riskClass = "btn btn-sq-xs " + project.RiskStatusClass; var budgetClass = "btn btn-sq-xs " + project.BudgetStatusClass; var projectHealthClass = "btn btn-sq-xs " + project.OverallHealthStatusClass; var projectProgressBarpct = "width:" + project.PercentComplete + "%"; var projectProgressBarlowclass = " lowprogress"; <text> <tr> <td> <strong>@project.InitiativeName</strong> @if ( ReportMode == "app" ) {<a href="/Initiative-Explorer/Tracker-Lite?PID=@project.InitiativeID" ><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span> Tracker</a>} </td> <td align="center"> <button class="@scopeClass"> </button> </td> <td align="center"> <button class="@scheduleClass"> </button> </td> <td align="center"> <button class="@resourceClass"> </button> </td> <td align="center"> <button class="@riskClass"> </button> </td> <td align="center"> <button class="@budgetClass"> </button> </td> <td> <div class="progress"> <div class="progress-bar @projectProgressBarlowclass" role="progressbar" aria-valuenow="@project.PercentComplete" aria-valuemin="0" aria-valuemax="100" style="@projectProgressBarpct"> @project.PercentComplete% </div> </div> </td> <td> @project.EndDateFormatted </td> <td> <button class="@projectHealthClass"> </button> <span>@project.OverallHealthStatusName</span> </td> </tr> </text> } <text> </tbody> </table> </div> </div> </text> } } <div class="page-break"></div>

<style> p { font-size: 12px; } .bstrap30 h4, .bstrap30 .h4 { font-size: 16px; } .bstrap30 .panel-default>.panel-heading { color: #fff; background-color: #444; border-color: #ddd; } .bstrap30 caption { padding: 0; } .bstrap30 td, .bstrap30 th { padding: 5px; vertical-align: top; } table.spacedtableSierra th, td { padding: 5px; } .table-title { -webkit-margin-before: 1.33em; -webkit-margin-after: 1.33em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-size: 13px; line-height: 26px; } .datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid { margin-bottom: 7px; font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #8C8C8C; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .datagrid table td, .datagrid table th { padding: 3px 4px; } .datagrid table thead th { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D)); background: -moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D'); background-color: #8C8C8C; color: #FFFFFF; font-size: 13px; font-weight: bold; border-left: 1px solid #A3A3A3; } .datagrid table thead th:first-child { border: none; } .datagrid table tbody td { color: #7D7D7D; border-left: 1px solid #DBDBDB; font-size: 11px; font-weight: normal; } .datagrid table tbody .alt td { background: #EBEBEB; color: #7D7D7D; } .datagrid table tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; } .datagrid table tbody td:first-child { border-left: none; } .datagrid table tbody tr:last-child td { border-bottom: none; } .datagrid table caption { background-color: #444; color: #fff; padding-left: 5px; font-size: 14px; } .bstrap30 td, .bstrap30 th { padding: 5px; } .bstrap30 .panel-primary>.panel-heading { color: #fff; border-collapse: unset; border-radius: 0PX; background-color: #444; border-color: #444; } .titletextSierra { .background-color: #444; .font-weight: heavy; .font-color: white; .font-size: 15px; } .statuscell-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .statuscell { width: 200px; float: right; font-weight: heavy; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.12857143; border-radius: 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bstrap30 .panel-primary { border-color: #444; } .bstrap30 .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 0px; -webkit-box-shadow: 0; box-shadow: 0; } .bstrap30 .progress-bar{ font-size: 11px; color: #444; background-color: #1e88c3; } </style> <style> caption h5 { color: white; } caption .btn.btn-sq-xs { float: right; margin-right: 10px; } </style>