ui fixes in applicatnt grid view report pdf

cmsWebApp/webroot/css/common.css

@@ -3552,6 +3552,7 @@ input.add-note-btn:hover{
   right: 0;
   width: 11px;
   z-index: 10;
+  top: 19px;
 }
 .appli-int-status{
   font-size: 11px;

cmsWebApp/webroot/extensions/adminportal/inc/applicants_grid_report.jsp

@@ -45,10 +45,20 @@
 
         </div>
         <div class="white-header">
-            All Applicants
-            <span><%= applications.size() %> Applicants</span>
+              <div style="clear:both"></div>
+          
+                 <div class="main-appli-name">
+                     <div class="appli-name"> All Applicants </div>
+                 </div>
+                 <div class="appli-count">
+                     <%= applications.size() %> Applicants
+                 </div>
+           
        </div>  
             
+       
+        <div class="view-appli-list">
+           
     <%
         for (JobApplication jobApplication : applications)
         {
@@ -59,36 +69,44 @@
     %>
     
             <div class="appl-c-box">
-                <div class="gridbox">
+                <div class="gridbox-title">
                     <div class="gridbox-applicant">
                         <oneit:toString value="<%= jobApplication.getCandidate() %>"    mode="EscapeHTML" />
                     </div>
                 </div>
                 <div class="overall-suitablity">
                     <div class="overall">overall rank</div>
-                    <div class="over-all-rank">
+                    <div class="over-all blue">
                         <oneit:toString value="<%= overallRank %>"   mode="Integer" />
                     </div>
+                     <div style="clear:both"></div>
                 </div>
                 <div class="jcc-box">
                     <div class="job-match jcc">
-                        <img src="images/app-job-match-icon.png"> role fit 
+                        <div class="jcc-title">
+                        <img src="file:///<%= PDFUtils.FILE_BASE_PATH %>/images/job-match-icon.png" /> role fit 
+                        </div>
                         <span>
                             <oneit:toString value="<%= jobApplication.getRoleFitPercentage() %>"    mode="PercentageWholeNumber" />
                         </span>
                     </div>
                     <div class="culture jcc">
-                        <img src="images/culture-icon.png"> culture fit
+                         <div class="jcc-title">
+                        <img src="file:///<%= PDFUtils.FILE_BASE_PATH %>/images/culture-icon.png" /> culture fit
+                         </div>
                         <span>
                             <oneit:toString value="<%= jobApplication.getCultureFitScore() %>"  mode="PercentageWholeNumber" />
                         </span>
                     </div>
+                        
                     <%
                         if(job.getIncludeAssessmentCriteria()==Boolean.TRUE)
                         {
                     %>
                             <div class="criteria jcc <%=(missingReq ? "red-bg" : "green-bg")%> ">
-                                <img src="images/<%=(missingReq ? "icon-requirements_small.png" : "critarea_white.png")%>"> requirements
+                                <div class="jcc-title">
+                                <img src="file:///<%= PDFUtils.FILE_BASE_PATH %>/images/<%=(missingReq ? "icon-requirements_small.png" : "critarea_white.png")%>"/> requirements
+                                </div>
                                 <span>
                                     <oneit:toString value="<%= jobApplication.getRequirementFitScore() %>"  mode="PercentageWholeNumber" />
                                 </span>
@@ -96,10 +114,13 @@
                     <%
                         }
                     %>
+                     <div style="clear:both"></div>
                 </div>
             </div>
     <%
         }
     %>
+   
+    </div>
       </div>
 </oneit:dynIncluded>
\ No newline at end of file

cmsWebApp/webroot/extensions/adminportal/inc/applicants_grid_report_header.jsp

@@ -14,28 +14,108 @@
 
         @font-face {font-family: 'Usual-Regular';src: url('../../../fonts/343A83_3_0.eot');src: url('../../../fonts/343A83_3_0.eot?#iefix') format('embedded-opentype'),url('../../../fonts/343A83_3_0.woff2') format('woff2'),url('../../../fonts/343A83_3_0.woff') format('woff'),url('../../../fonts/343A83_3_0.ttf') format('truetype');}
         
+        body { margin: 5mm;   background-color: #e9ecef; }
         div.header{background-color: #1a2531; height: 80px; line-height: 80px; padding: 0 30px ;}
-        div.white-header {background-color: #fff; height:170px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 30px ;}
-
             .chief-officer {color: #ffffff; text-align: left; font-size: 26px; font-weight: 300; margin-bottom: 15px; float:left; width:60%}
             .chief-officer .ref-no {color: #8E97A0;}
             .by-name {color: #ffffff; float: right;  width:30%;text-align: right;}
         
+        div.white-header {background-color: #fff; height:80px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 30px ;}
+            .applicant-details {height: 80px; line-height: 80px;  margin:0 }
+            .main-appli-name {display: inline-block; width: 38%;  }
+            .appli-name{color: #1A2531; text-align: left; font-size: 26px; font-weight: 300; font-family: "Usual-Light";}
+            .appli-applied{color: #7d7f82; text-align: left; font-size: 12px; margin-top: 6px;}
+            .appli-count {display: inline-block; width: 60%;text-align: right;color: #8E97A0;font-size: 15px; }
+        
+        .view-appli-list {padding: 20px 0; }
+        .appl-c-box{display: inline-block;width:23%;text-align: left;background: #ffffff none repeat scroll 0 0;margin: 0.8% 0.8%;}
         
-        .appl-c-box{display: inline-block;width: 19%;text-align: left;background: #ffffff none repeat scroll 0 0;margin: 0.4% 0.4%;width: 19.05%;}
-        .cb-title{color: #ffffff;font-size: 16px;padding: 13.5px 16px;float: left;width: 100%;}
-        .gridbox{background-color: #4A4A4A; padding: 10px;}
+        .gridbox-title{background-color: #4A4A4A; padding: 10px;font-size: 16px;}
         .gridbox-applicant{color: #FFFFFF;font-size: 16px;}
         
+        .overall-suitablity{
+            width: 100%;
+            height: 60px;
+            line-height: 60px;
+            padding-left: 15px;
+        }
+          .overall{
+            font-size: 10px;
+            font-weight: 500;
+            letter-spacing: 0.9px;    
+            text-transform: uppercase;
+            color: #7d7f82;
+            font-family: "Usual-Medium";
+            display: inline-block;
+             vertical-align: middle;
+             width: 70%;
+        }
+        .overall.f-60{
+            margin-top: 30px;
+        }
+        
+        .over-all{
+            font-size: 30px;
+            vertical-align: middle;
+            font-weight: 300;
+            display: inline-block;
+            width: 15%;
+            padding-right: 10px;
+        }
+        .over-all span{
+            font-family: "Usual-Light";
+        }
+        .over-all.f-60 span{
+            font-family: "Usual-Regular";
+            font-size: 40px;
+        }
+        .jcc-box {
+             width: 100%;
+        }
+        .jcc {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            border-top: solid 1px #edeff0;
+            text-transform: uppercase;
+            font-size: 10px;
+            /*font-weight: 500;*/
+            letter-spacing: 0.9px;
+           
+            line-height: 40px;
+            font-family: "Usual-Medium";
+            color: #4E5258;
+        }
+        .jcc-title {
+            display: inline-block;
+            width: 65%;
+            padding-left: 10px;
+             line-height: 40px;
+        }
+        .jcc img {margin-right: 8px;}
+        .jcc span {
+            width: 25%;
+            display: inline-block;
+            font-size: 22px;
+            font-weight: 300;
+            text-align: right;
+            color: #7d7f82;
+            font-family: "Usual-Light";
+           
+            
+        }
+      
         .jcc-box .red-bg {background-color: #F9623D; color : #fff;}
         .jcc-box .red-bg span , .jcc-box .green-bg span{color : #fff;}
         .jcc-box .green-bg {background-color: #67B413;color : #fff;}
       
+        
+        .blue {color: #03a0e7 !important;}
         @page
         {
             size: A4 portrait;
             margin : 0;
-            background: #e9ecef;
             @top-left { content: element(header);}
         }
     </style>