CPM Adjust QR code spacing

worldskills · Jan 16, 2025 · cdda03e · cdda03e
1 parent f501244
commit cdda03e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/app/badges/wse2025-cpm/wse2025-cpm.component.css b/src/app/badges/wse2025-cpm/wse2025-cpm.component.css
@@ -34,7 +34,8 @@
   display: grid; 
   grid-template-columns: 3fr 7fr;
   grid-template-rows: repeat(4, auto); 
-  gap: 3mm 4mm;
+  grid-column-gap: 5mm;
+  grid-row-gap: 2mm;
   grid-template-areas: 
     "photo info"
     "aaa ."
@@ -75,22 +76,23 @@
 }
 
 .wse-aaa {
-  height: 10mm;
+  width: 100%;
 }
 
 .wse-grid-zones {
   grid-area: zones;
   border: 0.3mm solid #000;
-  padding: 3mm;
   display: flex;
   justify-content: space-between;
 }
 
 .wse-zones-grid {
+  padding: 3mm;
+  padding-bottom: 1mm;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 2mm;
+  grid-column-gap: 4mm;
   grid-row-gap: 2mm;
 }
 
@@ -99,10 +101,14 @@
   height: 14mm;
 }
 
+.wse-zone-village {
+  height: 16mm;
+}
+
 .wse-qrcode {
   display: block;
-  width: 30mm;
-  height: 30mm;
+  width: 38mm;
+  height: 38mm;
 }
 
 .wse-grid-delegate-type {

diff --git a/src/app/badges/wse2025-cpm/wse2025-cpm.component.html b/src/app/badges/wse2025-cpm/wse2025-cpm.component.html
@@ -26,9 +26,9 @@
 
         <div class="wse-grid-zones">
             <div class="wse-zones-grid">
-                <div><img *ngIf="hasZone('C')" src="assets/badges/wse2025-cpm/Catering_text.png" class="wse-zone"></div>
-                <div><img *ngIf="hasZone('SKT')" src="assets/badges/wse2025-cpm/Skills_Village_Tour_text.png" class="wse-zone"></div>
-                <div><img *ngIf="hasZone('T')" src="assets/badges/wse2025-cpm/Transport_text.png" class="wse-zone"></div>
+                <div><img *ngIf="hasZone('C')" src="assets/badges/wse2025-cpm/Catering_text.png" class="wse-zone wse-zone-catering"></div>
+                <div><img *ngIf="hasZone('SKT')" src="assets/badges/wse2025-cpm/Skills_Village_Tour_text.png" class="wse-zone wse-zone-village"></div>
+                <div><img *ngIf="hasZone('T')" src="assets/badges/wse2025-cpm/Transport_text.png" class="wse-zone wse-zone-transport"></div>
                 <div><img *ngIf="hasZone('VT')" src="assets/badges/wse2025-cpm/Venue_Tour_text.png" class="wse-zone"></div>
                 <div><img *ngIf="hasZone('W')" src="assets/badges/wse2025-cpm/Workshops_text.png" class="wse-zone"></div>
             </div>