Browse Source

fixed some print style

amr 6 years ago
parent
commit
5d2d82a554

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

@@ -136,53 +136,70 @@ export class ExistingReportComponent implements OnInit {
             <title>تقرير المركبات الموجوده</title>
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
             <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>
           </head>
       <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>
         </html>`
       );

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

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

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

@@ -127,10 +127,82 @@ export class VehicleMovementReportComponent implements OnInit {
             <title>تقرير المركبات الموجوده</title>
             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
             <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>
           </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>`
       );
       popupWin.document.close();