pdf ui designs in application list report list view

cmsWebApp/webroot/extensions/adminportal/inc/applicants_list_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)
         {
@@ -56,18 +66,18 @@
             String  culture     =   FormatUtils.stringify(jobApplication.getCultureFitScore(), "PercentageWholeNumber", "0");
     %>
         <div class="appli-row">        
-            <div class="appli-list-name"> 
+            <div class="appli-list-name appli-l"> 
                 <oneit:toString value="<%= jobApplication.getCandidate() %>"    mode="EscapeHTML" />
                 <div class="appli-status">
                     <oneit:toString value="<%= jobApplication.getApplicantStatusStr() %>"   mode="EscapeHTML" />
                 </div>
             </div>
-            <div class="appli-overall">
+            <div class="appli-overall appli-l">
                 Overall rank
                 <oneit:toString value="<%= jobApplication.getOverallRank() %>"   mode="Integer" />
             </div>
             
-            <div class="appli-l eq-second-height">
+            <div class="appli-jcs appli-l eq-second-height">
                 <span class="appli-view-bar">
                     <div class="progress">
                         <div class="progress-bar" role="progressbar" aria-valuenow="<%= roleFit %>" aria-valuemin="0" aria-valuemax="100" 
@@ -79,7 +89,7 @@
                 role fit
             </div>
                         
-            <div class="appli-l eq-second-height">
+            <div class="appli-jcs appli-l eq-second-height">
                 <span class="appli-view-bar">
                     <div class="progress">
                         <div class="progress-bar" role="progressbar" aria-valuenow="<%= culture %>" aria-valuemin="0" aria-valuemax="100" 
@@ -97,7 +107,7 @@
                     String  criteria    =   FormatUtils.stringify(criteriaVal, "PercentageWholeNumber", "0");
                     boolean missingReq  =   jobApplication.hasFailedEssentialRequirements();
             %>
-                    <div class="appli-l eq-second-height">
+                    <div class="appli-jcs appli-l eq-second-height">
                         <span class="appli-view-bar">
                             <div class="progress">
                                 <div class="progress-bar <%= (criteriaVal == 100 && !missingReq ? " green" : "")%>" role="progressbar" aria-valuenow="<%= criteria %>" aria-valuemin="0" aria-valuemax="100" 
@@ -114,10 +124,11 @@
             <%
                 }
             %>           
-                        
+             <div style="clear:both"></div>            
         </div>
     <%
         }
     %>
     </div>
+    </div>
 </oneit:dynIncluded>
\ No newline at end of file

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

@@ -14,22 +14,90 @@
 
         @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;}
-        .appli-row{ width: 100%; background-color: #ffffff; }
-        .appli-list-name {color: #4a4a4a;font-size: 20px;padding: 14px 0 17px 21px;width: 22%;}
-        .appli-status { color: #767577; font-size: 11px;}
+
+     
+        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; border:1px solid red; 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; }
+        .appli-row{ width: 100%; background-color: #ffffff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.02);    margin-bottom: 16px;}
+        .appli-l {float: left;    border-left: solid 1px #eee; height:30px;}
+        .appli-list-name {color: #4a4a4a;font-size: 20px;width:27%; padding:20px 2%; height:30px; border-left: none;}
+        .appli-status { font-size: 11px;  letter-spacing: 0.9px;  text-align: left; color: #767577; text-transform: uppercase;  margin-top:5px;}
+        .appli-overall {
+            color: #4a4a4a;
+            font-size: 11px;
+            letter-spacing: 1px;
+            padding:20px 1%;
+            text-transform: uppercase;
+            width: 15%;
+            height:30px;
+            line-height: 30px;
+        }
+        .appli-overall span {
+            color: #03a0e7;
+            font-size: 36px;
+            font-weight: 300;
+            float: right;
+        }
+        .appli-jcs {
+            color: #4a4a4a;
+            font-size: 11px;
+            letter-spacing: 1px;
+            padding:20px 1%;
+            text-transform: uppercase;
+            width: 15%;
+        }
+        
+        .appli-view-bar {
+            display: inline-block;
+            width: 100%;
+            margin-bottom: 5px;
+            position: relative;
+        }
+        .appli-view-bar .progress {
+            margin-bottom: 0;
+            border-radius: 0;
+            height: 13px;
+            background: #e9ecef;
+            box-shadow: none;
+        }
+        .progress-bar {
+            float: left;
+            width: 0;
+            height: 100%;
+            font-size: 12px;
+            line-height: 20px;
+            color: #fff;
+            text-align: center;
+            background-color: #667281;
+            -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+            -webkit-transition: width .6s ease;
+            -o-transition: width .6s ease;
+            transition: width .6s ease;
+            position: relative;
+        }
+        .show-precentage {position: absolute;color:#fff;right: 1px;    top: -3px; font-size: 9px;font-weight: 500;}
+       
         
         @page
         {
             size: A4 portrait;
            margin : 0;
-            background: #e9ecef;
             @top-left { content: element(header);}
+            
         }
+        
+      
     </style>
 </oneit:dynIncluded>