Tweak HTML template

src/wireviz/templates/din-6771.html

@@ -29,29 +29,13 @@
       font-size: 2.8mm;
     }
 
-    img {
+    /* Canvas size based on DIN 823 / DIN 6771 / EN ISO 5457 */
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%);
-      max-height: 100%;
-      max-width: 100%;
-    }
-
-    svg {
-      max-width: 95%;
-      max-height: 100%;
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%);
-    }
 
     #frame {
       position: relative;
       border: 0.35mm solid black
     }
 
-    /* Canvas size based on DIN 823 / DIN 6771 / EN ISO 5457 */
-
     .A4, .sheetsize_default { /* portrait */
       width: 180mm;
       height: 277mm;
@@ -67,6 +51,26 @@
       height: 400mm;
     }
 
+    #diagram {
+      position: relative;
+      top: 0;
+      left: 0;
+      max-width: 100%;
+      height: calc(100% - 13 * 4.25mm);
+      /* TODO: auto-adapt to height of title block + BOM table;
+               BOM table might be above (A4) or to the left (A3 and larger) of the title block */
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    #diagram svg, #diagram img {
+      max-width: 95%;
+      max-height: 100%;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     #titleblock {
       position: absolute;
       bottom: 0mm;
@@ -102,20 +106,12 @@
       text-align: left;
     }
 
-    #bom .bom_col_qty {
+    #bom .bom_col_id {
-      text-align: right;
+      text-align: center;
     }
 
-    #diagram {
+    #bom .bom_col_qty {
-      position: relative;
+      text-align: right;
-      top: 0;
-      left: 0;
-      max-width: 100%;
-      height: calc(100% - 13 * 4.25mm);
-      /* TODO: auto-adapt to height of title block + BOM table;
-               BOM table might be above (A4) or to the left (A3 and larger) of the title block */
-      text-align: center;
-      vertical-align: middle;
     }
 
     .name {
@@ -184,12 +180,13 @@
     <div id="frame" class="sheetsize_default">
 
       <div id="diagram">
-        <!-- %diagram% -->
 
         <div id="description">
           <!-- %description% -->
         </div>
 
+        <!-- %diagram% -->
+
         <div id="notes">
           <!-- %notes% -->
         </div>