Better label rendering for web printing.

pos_barcode_tare/static/src/css/pos_barcode_tare.css

@@ -6,22 +6,39 @@
     color: inherit;
 }
 
-.pos .pos-tare-label {
-    width: 300px;
-    background-color: white;
-    margin: 20px;
-    padding: 15px;
-    font-size: 21px;
-    padding-bottom:30px;
-    display: inline-block;
-    font-family: "Inconsolata";
-    border: solid 1px rgb(220,220,220);
-    border-radius: 3px;
-    overflow: hidden;
+.pos .tare-screen .centered-content {
+    text-align:center;
 }
 
-.pos .pos-tare-label .caption {
+@media screen {
+    .pos .tare-screen .pos-tare-label-container {
+        width: 300px;
+        background-color: white;
+        margin: 20px;
+        padding: 15px;
+        font-size: 21px;
+        padding-bottom:30px;
+        font-family: "Inconsolata";
+        border: solid 1px rgb(220,220,220);
+        border-radius: 3px;
+        overflow: hidden;
+        text-align: center;
+        display: inline-block;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .pos .tare-screen .pos-tare-label-container img {
+        width: 50mm;
+        height: 45mm;
+    }
+}
+
+.pos .tare-screen .pos-tare-label-container .caption {
     display: block;
+        text-overflow: ellipsis;
+        flex-basis: 100vw;
 }
 
 .pos .tare-screen .pos-directions-for-user {
@@ -48,12 +65,7 @@
     margin-right: auto;
 }
 
-.pos .pos-tare-label img {
-    width: 50mm;
-    height: 45mm;
-}
-
-.pos .tare-screen .print-label {
+.pos .tare-screen .centered-content .print-label {
     text-align: center;
     font-size: 32px;
     background: rgb(110,200,155);
@@ -65,47 +77,47 @@
 }
 
 @media print {
+    body {
+        position: relative !important;
+    }
+
     .pos .tare-screen header,
     .pos .tare-screen .top-content,
-    .pos .tare-screen .centered-content .print-label,
+    .pos .tare-screen .print-label,
     .pos .tare-screen .pos-directions-for-user {
         display: none !important;
     }
 
+    .pos .tare-screen .screen-content {
+        max-width: unset !important;
+    }
+
     .pos .tare-screen .centered-content {
         position: static;
+        text-align: center;
         border: none;
+        width: 100vw;
+        height: 100vh;
+        margin: 0mm;
+        page-break-inside: avoid;
+        overflow: hidden;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        left: unset !important;
+        right: unset !important;
     }
 
-    .pos .pos-tare-label .caption {
-        display: block;
-    }
-
-    .pos .pos-tare-paper {
-        margin: 0;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        width: 99% !important;
-        height: 99% !important;
-        display: block;
-        position: fixed;
-        display: flex !important;
-        justify-content: center !important;
-        align-items: center !important;
-    }
-
-    .pos-tare-label img {
-        width: 27mm !important;
-        height: 21mm !important;
-        display: run-in;
+    .pos .tare-screen .centered-content .pos-tare-label-container  img {
+        width: 90vw;
+        height: 70vh;
     }
 
-    .pos .pos-tare-label {
-        margin: 0;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        position: fixed !important;
-        border: none !important;
-        font-size: 10px !important;
+    .pos .tare-screen .centered-content .pos-tare-label-container .caption {
+        text-overflow: ellipsis;
+        font-size: 5vh;
+        flex-basis: 100%;
     }
 }