Skip to content

P
PERFORMA_REPLICA
Commit e0914cd1 by Saliya Randunu
Options

ui styling for detailed applicant report pdf

parent a3b9c48a
Showing with 130 additions and 47 deletions
cmsWebApp/webroot/css/common.css
...@@ -3507,7 +3507,6 @@ input.add-note-btn:hover{ ...@@ -3507,7 +3507,6 @@ input.add-note-btn:hover{
float: right; float: right;
} }
.result-bar { .result-bar {
float: left;
position: relative; position: relative;
width: 100%; width: 100%;
} }
...@@ -3522,6 +3521,7 @@ input.add-note-btn:hover{ ...@@ -3522,6 +3521,7 @@ input.add-note-btn:hover{
.result-bar ul{ .result-bar ul{
background: none; background: none;
padding: 0 !important; padding: 0 !important;
margin: 0;
} }
.red-b { .red-b {
background: #fb5d67 none repeat scroll 0 0 !important; background: #fb5d67 none repeat scroll 0 0 !important;
......
cmsWebApp/webroot/extensions/adminportal/inc/applicant_report.jsp
...@@ -159,38 +159,18 @@ ...@@ -159,38 +159,18 @@
{ {
String dotClass = answer.getAnswer() ? "" : (importance == Importance.ESSENTIAL ? "red-dot" : (importance == Importance.HIGHLY_DESIRABLE ? "yellow-dot" : "")); String dotClass = answer.getAnswer() ? "" : (importance == Importance.ESSENTIAL ? "red-dot" : (importance == Importance.HIGHLY_DESIRABLE ? "yellow-dot" : ""));
%> %>
<div class="tab-row"> <div class="tab-row fixed-height">
<div class="detail-tab-row-title col-md-4 col-sm-4 col-xs-4 <%= (importance == Importance.ESSENTIAL ? (missingReq ? "red-requirements" : "green-requirements") : "") %>" style="width: 30%"> <div class="detail-tab-row-title <%= (importance == Importance.ESSENTIAL ? (!missingReq ? "red-requirements" : "green-requirements") : "") %>">
<span class="dot-icon"></span> &nbsp; <span class="dot-icon"></span>
<oneit:toString value="<%= answer.getAssessmentCriteria().getCriteriaType() %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAssessmentCriteria().getCriteriaType() %>" mode="EscapeHTML"/>
</div> </div>
<div class="detail-tab-row-text col-md-7 col-sm-7 col-xs-7" style="width: 55%"> <div class="detail-tab-row-text" >
<oneit:toString value="<%= answer.getAssessmentCriteria() %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAssessmentCriteria() %>" mode="EscapeHTML"/> -
</div>
<div class="detail-tab-row-text col-md-1 col-sm-1 col-xs-1" style="width: 15%;">
<oneit:toString value="<%= answer.getAnswer() ? "Yes" : "No" %>" mode="EscapeHTML"/> <oneit:toString value="<%= answer.getAnswer() ? "Yes" : "No" %>" mode="EscapeHTML"/>
<%
if(answer.getNotes()!=null)
{
%>
<span class="info-toggle">
&#9432;
</span>
<%
}
%>
</div> </div>
</div> </div>
<% <%
if(answer.getNotes()!=null)
{
%>
<div class="tab-row info-panel">
<oneit:toString value="<%= answer.getNotes() %>" mode="ParagraphHTML"/>
</div>
<%
}
} }
} }
} }
...@@ -285,13 +265,14 @@ ...@@ -285,13 +265,14 @@
FactorScore factorScore = (FactorScore) factorLinkDetails.get("factorScore"); FactorScore factorScore = (FactorScore) factorLinkDetails.get("factorScore");
%> %>
<div class="tab-row"> <div class="tab-row">
<div class="tab-view-label"> <div class="detail-tab-row-title">
<oneit:toString value="<%= factorLevelLink.getFactor() %>" mode="EscapeHTML"/> <oneit:toString value="<%= factorLevelLink.getFactor() %>" mode="EscapeHTML"/>
</div> </div>
<div class="tab-view-side"> <div class="tab-view-side">
<div class="result-want"> <div class="result-want">
<div class="result"><oneit:toString value="<%= factorLevelLink.getLeftAnnot() %>" mode="EscapeHTML"/></div> <div class="result"><oneit:toString value="<%= factorLevelLink.getLeftAnnot() %>" mode="EscapeHTML"/></div>
<div class="wants"><oneit:toString value="<%= factorLevelLink.getRightAnnot() %>" mode="EscapeHTML"/></div> <div class="wants"><oneit:toString value="<%= factorLevelLink.getRightAnnot() %>" mode="EscapeHTML"/></div>
<div style="clear: both"></div>
</div> </div>
<div class="result-bar"> <div class="result-bar">
<ul> <ul>
...@@ -403,12 +384,12 @@ ...@@ -403,12 +384,12 @@
CultureNarrative cultureNarrative = (CultureNarrative) tuple.get2(); CultureNarrative cultureNarrative = (CultureNarrative) tuple.get2();
String dotClass = cultureNarrative != null && cultureNarrative.getColorCode() != null ? cultureNarrative.getColorCode().getDotCSSClass() : ""; String dotClass = cultureNarrative != null && cultureNarrative.getColorCode() != null ? cultureNarrative.getColorCode().getDotCSSClass() : "";
%> %>
<div class="detail-tab-row" id="<%= ((CultureElement)tuple.get1()).getObjectID() %>"> <div class="tab-row fixed-height" id="<%= ((CultureElement)tuple.get1()).getObjectID() %>">
<div class="detail-tab-row-title col-md-4 col-sm-4 col-xs-4"> <div class="detail-tab-row-title ">
<span class="common-dot <%= dotClass %>"></span> &nbsp; <span class="common-dot <%= dotClass %>"></span> &nbsp;
<oneit:toString value="<%= tuple.get1() %>" mode="EscapeHTML"/> <oneit:toString value="<%= tuple.get1() %>" mode="EscapeHTML"/>
</div> </div>
<div class="detail-tab-row-text col-md-8 col-sm-8 col-xs-8"> <div class="detail-tab-row-text line-height-fixed">
<oneit:toString value="<%= cultureNarrative %>" mode="EscapeHTML"/> <oneit:toString value="<%= cultureNarrative %>" mode="EscapeHTML"/>
</div> </div>
</div> </div>
......
cmsWebApp/webroot/extensions/adminportal/inc/applicant_report_header.jsp
<%@ page extends="oneit.servlets.jsp.JSPInclude" %> <%@ page extends="oneit.servlets.jsp.JSPInclude" %>
<%@include file="../../../setuprequest.jsp" %> <%@include file="../../../setuprequest.jsp" %>
<%@ page import="performa.orm.*, performa.orm.types.*, performa.chart.*, performa.utils.*"%>
<oneit:dynIncluded> <oneit:dynIncluded>
<style type="text/css" media="print,screen" > <style type="text/css" media="print,screen" >
/*@import url("//hello.myfonts.net/count/343a83");*/ /*@import url("//hello.myfonts.net/count/343a83");*/
...@@ -42,31 +42,133 @@ ...@@ -42,31 +42,133 @@
.charts-table {background: #fff;margin-top: 30px; page-break-inside: avoid;} .charts-table {background: #fff;margin-top: 30px; page-break-inside: avoid;}
.chart-cell {width: 30%; text-align: center; padding: 25px 0;border-right:1px solid #ECECEE; vertical-align: top;} .chart-cell {width:25%; text-align: center; padding: 25px 0;border-right:1px solid #ECECEE; vertical-align: top;}
.chart-info-cell{vertical-align: top;} .chart-info-cell{vertical-align: top;}
.chart-info-cell .appli-row {height: 60px; border-bottom: 1px solid #ECECEE; padding-left: 30px;line-height: 60px;} .chart-info-cell .appli-row {height: 60px; border-bottom: 1px solid #ECECEE; padding-left:25px;line-height: 60px;}
.chart-info-cell .appli-row:last-child {border-bottom: none;} .chart-info-cell .appli-row:last-child {border-bottom: none;}
.cell-title {text-transform: uppercase;color: #4A4A4A;font-size: 16px;letter-spacing: 1.45px;} .cell-title {text-transform: uppercase;color: #4A4A4A;font-size: 16px;letter-spacing: 1.45px;}
.appli-label{font-size: 12px;text-align: left; color: #4E5258;min-width: 150px; display: inline-block; vertical-align: middle;width:20% } .appli-label{font-size: 12px;text-align: left; color: #4E5258; display: inline-block; vertical-align: middle;width:20%; }
.appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 15%} .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 12%}
span.appli-progress-bar {display: inline-block; width:50%;vertical-align: middle;} span.appli-progress-bar {display: inline-block; width:65%;vertical-align: middle; }
.progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;} .progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;}
.progress-bar{background: #667281;height: 24px; } .progress-bar{background: #667281;height: 24px; }
.tab-row{ float: left; width: 100%; border-bottom: solid 1px #e3e3e3;} .tab-row{ width: 100%; border-bottom: solid 1px #e3e3e3; background-color: #F7F7F8;height:auto; min-height: 45px; line-height: 45px;}
.tab-view-label { color: #4e5258; float: left; font-size: 10px; text-align: left; text-transform: uppercase; width: 20%; padding-left: 10px; line-height: 50px;} .tab-row.fixed-height {height: 45px;}
.tab-view-side { float: right; padding: 17px 38px 17px 10px; width: 50%; } .detail-tab-row-title {font-size: 10px;letter-spacing: 0.91px;color: #4E5258;display: inline-block; vertical-align: middle;width:32%; padding-left:25px; text-transform: uppercase;}
.result-want { float: left; width: 100%; } .detail-tab-row-text {color: #7D7F82;display: inline-block; vertical-align: middle;width:45%; font-size: 12px;}
.result-bar { float: left; position: relative; width: 100%; } .line-height-fixed { line-height: 1.4;}
.like-strive{ font-size: 12px; line-height: 1.17; color: #7d7f82; float: left; width: 100%; margin-top: 8px; } .red-requirements {color: #F9623D; position: relative}
.result{ float: left; } .green-requirements {color: #67B413; position: relative}
.wants{ float: right; } .green-requirements .dot-icon {
.result-bar { float: left; position: relative; width: 100%; } top:15px;
.result-bar ul{ background: none; padding: 0 !important; } left :5px;
box-sizing: border-box;
height: 15px;
width: 15px;
border: 1px solid #67B413;
position: absolute;
border-radius: 50%;
background-repeat: no-repeat;
background-position: 34% 25%;
padding: 0;
display: block;
background-image : url('file://<%= PDFUtils.FILE_BASE_PATH %>/images/correct.png'); background-color : #67B413; background-size:55%;
}
.red-requirements .dot-icon {
top:15px;
left : 5px;
box-sizing: border-box;
height: 15px;
width: 15px;
border: 1px solid #F9623D;
position: absolute;
border-radius: 50%;
background-repeat: no-repeat;
background-position: 32% 25%;
padding: 0;
display: block;
background-image : url('file://<%= PDFUtils.FILE_BASE_PATH %>/images/icon-requirements.png'); background-color : #F9623D; background-size:20%;
}
.tab-view-side {
display: inline-block; vertical-align: middle;width:61%;
}
.result-want {
width: 100%;
font-family: "Usual-Medium";
}
.result,.wants{
font-size: 10px;
font-weight: 500;
text-align: left;
color: #4e5258;
margin-bottom: 2px;
line-height: 1.4;
}
.result{
float: left;
}
.wants{
float: right;
}
.result-bar {
float: left;
position: relative;
width: 100%;
}
.like-strive{
font-size: 12px;
line-height: 1.17;
color: #7d7f82;
float: left;
width: 100%;
}
.result-bar ul{
background: none;
padding: 0 !important;
margin: 0;
}
.red-b {
background: #fb5d67 none repeat scroll 0 0 !important;
float: left;
position: relative;
z-index: 10;
/*height: 10px;*/
}
.yellow-b{
background-color: #fedd6f !important;
float: left;
position: relative;
z-index: 10;
/*height: 10px;*/
}
.green-b{
background-color: #41bdb4 !important;
float: left;
position: relative;
z-index: 10;
/*height: 10px;*/
}
.triangle-arrow {
background: rgba(0, 0, 0, 0) url("file://<%= PDFUtils.FILE_BASE_PATH %>/images/triangle.png") no-repeat scroll center center;
height: 8px;
left: 48%;
position: absolute;
right: 0;
width: 11px;
z-index: 10;
}
@page @page
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment