Home Explore Help
Register Sign In
gohary
/
kfmc_website
Watch 1
Star 0
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Browse Source

fixed some print style

amr 6 years ago
parent
272d5d6017
commit
5d2d82a554
3 changed files with 142 additions and 53 deletions
Unified View Show Diff Stats
  1. 60 43
      src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.ts
  2. 8 8
      src/app/dashboard/vehicle-movement-report/vehicle-movement-report/vehicle-movement-report.component.html
  3. 74 2
      src/app/dashboard/vehicle-movement-report/vehicle-movement-report/vehicle-movement-report.component.ts

+ 60 - 43
src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.ts
View File 

@@ -136,53 +136,70 @@ export class ExistingReportComponent implements OnInit {
 
             <title>تقرير المركبات الموجوده</title>
 
             <title>تقرير المركبات الموجوده</title>
 
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
 
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
 
             <style>
 
             <style>
 
-            //........Customized style.......
 
-            .table {
 
-              display:none;
 
-            }
 
-
 
-            .h1 {
 
-             width:600px;
 
-            }
 
-            .head{
 
-              margin-bottom: 10px;
 
-              width:100%;
 
-            }
 
-            .logo2{
 
-              float: right;
 
-              width:200px;
 
-              margin-right: 20px;
 
-            }
 
-            .logo1{
 
-              float: left;
 
-              margin-left: 20px;
 
-            }
 
-            table{
 
+              .row{
 
+                display: flex;
 
+                flex-wrap: wrap;
 
+                margin-right: -15px;
 
+                margin-left: -15px;
 
+              }
 
+              .col-6{
 
+                float: right;
 
+                flex: 0 0 50%;
 
+                max-width: 50%
 
+              }
 
+              .col-12{
 
+                flex-basis: 0;
 
+                flex-grow: 1;
 
+                max-width: 100%;
 
+              }
 
+              table {
 
+                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 
+                border-collapse: collapse;
 
+                width: 100%;
 
+                direction: rtl;
 
+                text-align: center;
 
+                
+              }
 
               
               
-            }
 
-            table, th, td {
 
-              border: 1px solid black;
 
-              border-collapse: collapse;
 
-              width:600px;
 
-              position: relative;
 
-              top: 50%
 
-            }
 
-            th, td {
 
-              padding: 5px;
 
-             
-            }
 
-            .title{
 
-                         }
 
+              table td, table th {
 
+                border: 1px solid #ddd;
 
+                padding: 8px;
 
+              }
 
+              
+              table tr:nth-child(even){background-color: #f2f2f2;}
 
+              
+              table tr:hover {background-color: #ddd;}
 
+              
+              table th {
 
+                padding-top: 12px;
 
+                padding-bottom: 12px;
 
+                text-align: center;
 
+                background-color: #4CAF50;
 
+                color: white;
 
+
 
+              }
 
             </style>
 
             </style>
 
           </head>
 
           </head>
 
       <body onload="window.print();window.close()">
 
       <body onload="window.print();window.close()">
 
-     
-      <img class="logo1" src="../../assets/image/logo2.png">
 
-      <img  class="logo2" src="../../assets/image/logo1.png">
 
-      
-     <h1>تقرير المركبات الموجوده</h1>
 
-     
-      ${printContents}
 
+     <div class="row">
 
+      <div class="col-6">
 
+        <img class="logo1" src="../../assets/image/logo2.png">
 
+        </div>
 
+        <div class="col-6" style="float: right">
 
+            <img  class="logo2" src="../../assets/image/logo1.png">
 
+         </div>
 
+      </div>
 
+      <div class="row">
 
+      <div class="col-12" style="width:100%;text-align: center">
 
+      <h1>تقرير المركبات الموجوده</h1>
 
+      </div>
 
+      </div>
 
+    
+     <div class="row">
 
+        <div class="col-12">
 
+        ${printContents}
 
+        </div>
 
+     </div>
 
       </body>
 
       </body>
 
         </html>`
 
         </html>`
 
       );
 
       );

+ 8 - 8
src/app/dashboard/vehicle-movement-report/vehicle-movement-report/vehicle-movement-report.component.html
View File 

@@ -24,30 +24,30 @@
 
   
   
           <div class="row" *ngIf="showTableData" id="print-section" style="margin-top: 50px">
 
           <div class="row" *ngIf="showTableData" id="print-section" style="margin-top: 50px">
 
             <div class="col-12">
 
             <div class="col-12">
 
-              <div class="row" style="margin: 20px" >
 
-                  <div class="col-4 pull-right">
 
+              <div class="row v3" style="margin: 20px" >
 
+                  <div class="col-4 pull-right d3">
 
                       <span class="title"> نوع المركيه:</span>
 
                       <span class="title"> نوع المركيه:</span>
 
                       <span class="result">{{ vehicleData[0].vehicle_type_name }}</span>
 
                       <span class="result">{{ vehicleData[0].vehicle_type_name }}</span>
 
                   </div>
 
                   </div>
 
-                  <div class="col-4">
 
+                  <div class="col-4 d3">
 
                       <span  class="title"> موديل المركبه:</span>
 
                       <span  class="title"> موديل المركبه:</span>
 
                       <span class="result">{{ vehicleData[0].vehicle_model_name }}</span>
 
                       <span class="result">{{ vehicleData[0].vehicle_model_name }}</span>
 
                   </div>
 
                   </div>
 
-                  <div class="col-4">
 
+                  <div class="col-4 d3">
 
                       <span  class="title"> رقم اللوحه:</span>
 
                       <span  class="title"> رقم اللوحه:</span>
 
                       <span class="result">{{ vehicleData[0].plate_number }}</span>
 
                       <span class="result">{{ vehicleData[0].plate_number }}</span>
 
                   </div>
 
                   </div>
 
               </div>
 
               </div>
 
-              <div class="row" style="margin-bottom: 30px;">
 
-                <div class="col-4 pull-right">
 
+              <div class="row v3" style="margin-bottom: 30px;">
 
+                <div class="col-4 pull-right d3">
 
                     <span  class="title"> الحالة:</span>
 
                     <span  class="title"> الحالة:</span>
 
                     <span class="result">{{ vehicleData[0].vehicle_status == 'used' ? 'مستعمل' : 'جديد' }}</span>
 
                     <span class="result">{{ vehicleData[0].vehicle_status == 'used' ? 'مستعمل' : 'جديد' }}</span>
 
                 </div>
 
                 </div>
 
-                  <div class="col-4">
 
+                  <div class="col-4 d3">
 
                       <span  class="title"> رقم الهيكل:</span>
 
                       <span  class="title"> رقم الهيكل:</span>
 
                       <span class="result">{{ vehicleData[0].structure_number }}</span>
 
                       <span class="result">{{ vehicleData[0].structure_number }}</span>
 
                   </div>
 
                   </div>
 
-                  <div class="col-4">
 
+                  <div class="col-4 d3">
 
                       <span  class="title"> اللون:</span>
 
                       <span  class="title"> اللون:</span>
 
                       <span class="result">{{ vehicleData[0].color }}</span>
 
                       <span class="result">{{ vehicleData[0].color }}</span>
 
                   </div>
 
                   </div>

+ 74 - 2
src/app/dashboard/vehicle-movement-report/vehicle-movement-report/vehicle-movement-report.component.ts
View File 

@@ -127,10 +127,82 @@ export class VehicleMovementReportComponent implements OnInit {
 
             <title>تقرير المركبات الموجوده</title>
 
             <title>تقرير المركبات الموجوده</title>
 
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
 
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
 
             <style>
 
             <style>
 
-                 
+            .row{
 
+              display: flex;
 
+              flex-wrap: wrap;
 
+              margin-right: -15px;
 
+              margin-left: -15px;
 
+            }
 
+            .col-6{
 
+              float: right;
 
+              flex: 0 0 50%;
 
+              max-width: 50%
 
+            }
 
+            .col-12{
 
+              flex-basis: 0;
 
+              flex-grow: 1;
 
+              max-width: 100%;
 
+            }
 
+            table {
 
+              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 
+              border-collapse: collapse;
 
+              width: 100%;
 
+              direction: rtl;
 
+              text-align: center;
 
+              
+            }
 
+            
+            table td, table th {
 
+              border: 1px solid #ddd;
 
+              padding: 8px;
 
+            }
 
+            
+            table tr:nth-child(even){background-color: #f2f2f2;}
 
+            
+            table tr:hover {background-color: #ddd;}
 
+            
+            table th {
 
+              padding-top: 12px;
 
+              padding-bottom: 12px;
 
+              text-align: center;
 
+              background-color: #4CAF50;
 
+              color: white;
 
+
 
+            }
 
+            .d3{
 
+              font-size: 15px;
 
+              padding-left: 10px;
 
+              width: 25%;
 
+              text-align: center;
 
+              direction: rtl;
 
+              margin-left: 20px;
 
+            }
 
+            v3{
 
+              direction: rtl;              
+            }
 
             </style>
 
             </style>
 
           </head>
 
           </head>
 
-      <body onload="window.print();window.close()">${printContents}</body>
 
+         <body onload="window.print();window.close()">
 
+         <div class="row">
 
+          <div class="col-6">
 
+           <img class="logo1" src="../../assets/image/logo2.png">
 
+          </div>
 
+        <div class="col-6" style="float: right">
 
+            <img  class="logo2" src="../../assets/image/logo1.png">
 
+         </div>
 
+        </div>
 
+        <div class="row">
 
+          <div class="col-12" style="width:100%;text-align: center">
 
+            <h1>تقرير حركة المركبات </h1>
 
+          </div>
 
+        </div>
 
+      
+     <div class="row">
 
+     <div class="col-12">
 
+     ${printContents}
 
+     </div>
 
+  </div>
 
+      </body>
 
         </html>`
 
         </html>`
 
       );
 
       );
 
       popupWin.document.close();
 
       popupWin.document.close();