Add new A2 templates

VERSION

-2.17.0
+2.18.0

frontend/src/views/back_in_full_force_tour_social_A2/BackInFullForceTourSocialA2.vue

@@ -176,8 +176,8 @@ export default {
         <Canvas
           ref="canvas"
           :redrawFunction="redraw"
-          width="2000"
-          height="2000"
+          width="2480"
+          height="3580"
         />
       </template>
 

frontend/src/views/back_in_full_force_tour_social_A2/canvas.js

@@ -6,7 +6,7 @@ import {
   checkTextBoxHeight,
 } from "../../components/canvas/utils";
 import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
-import backgroundURL from "../../assets/template/back_in_full_force_tour_social/background.png";
+import backgroundURL from "../../assets/template/back_in_full_force_tour_social_a2/background.png";
 import backgroundURLInverted from "../../assets/template/make_a_wish_banner/background_inverted.png";
 import COLORS from "../../colors";
 
@@ -63,31 +63,31 @@ const redraw = async (canvas, options) => {
   const textMarginLeft = Math.ceil(canvas.width * 0.1);
   const textMarginRight = Math.ceil(canvas.width * 0.078);
 
-  let mainTextMarginBottom = Math.ceil(canvas.height * 0.35) + Math.ceil(canvas.height * 0.15);
-  const dateTextMarginBottom = Math.ceil(canvas.height * 0.63) + Math.ceil(canvas.height * 0.25);
-  const timeTextBoxMarginBottom = Math.ceil(canvas.height * 0.565) + Math.ceil(canvas.height * 0.235);
-  const locationTextBoxMarginBottom = Math.ceil(canvas.height * 0.32) + Math.ceil(canvas.height * 0.14);
-  const attendeesTextBoxMarginBottom = Math.ceil(canvas.height * 0.1) + Math.ceil(canvas.height * 0.11);
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.3) + Math.ceil(canvas.height * 0.13);
+  const dateTextMarginBottom = Math.ceil(canvas.height * 0.605) + Math.ceil(canvas.height * 0.305);
+  const timeTextBoxMarginBottom = Math.ceil(canvas.height * 0.535) + Math.ceil(canvas.height * 0.312);
+  const locationTextBoxMarginBottom = Math.ceil(canvas.height * 0.27) + Math.ceil(canvas.height * 0.12);
+  const attendeesTextBoxMarginBottom = Math.ceil(canvas.height * 0.09) + Math.ceil(canvas.height * 0.065);
 
-  const mainTextSize = Math.ceil(canvas.height * 0.185);
+  const mainTextSize = Math.ceil(canvas.height * 0.175);
   const mainTextLineHeight = 1;
 
-  const dateTextSize = Math.ceil(canvas.height * 0.055);
-  const timeTextSize = Math.ceil(canvas.height * 0.05);
-  const attendeesTextSize = Math.ceil(canvas.height * 0.04);
+  const dateTextSize = Math.ceil(canvas.height * 0.046);
+  const timeTextSize = Math.ceil(canvas.height * 0.04);
+  const attendeesTextSize = Math.ceil(canvas.height * 0.027);
   const attendeesTextLineHeight = 1;
 
-  const locationTextSize = Math.ceil(canvas.height * 0.055);
+  const locationTextSize = Math.ceil(canvas.height * 0.044);
   const locationTextLineHeight = 1;
 
-  const contractedByTextSize = Math.ceil(canvas.height * 0.01);
+  const contractedByTextSize = Math.ceil(canvas.height * 0.015);
   const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
   const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03);
 
   if (options.dateText !== null) {
     /* BEGIN Date text render */
 
-    const dateTextWidth = canvas.width;
+    const dateTextWidth = canvas.width * 5; // IDFK
 
     console.log(options);
 
@@ -136,7 +136,7 @@ const redraw = async (canvas, options) => {
   if (options.timeText !== null) {
     /* BEGIN Time text render */
 
-    const timeTextWidth = canvas.width;
+    const timeTextWidth = canvas.width * 5; // IDFK
 
     const highlightedData = transformHighlightedText(
       options.timeText,
@@ -297,11 +297,11 @@ const redraw = async (canvas, options) => {
 
       backgroundImage = new fabric.Image(backgroundImage, {
         top: 0,
-        left: 0,
+        left: -50,
         zIndex: 10,
         selectable: false,
       });
-      backgroundImage.scaleToWidth(canvas.width);
+      backgroundImage.scaleToHeight(canvas.height);
 
       previousBackgroundImageColor = options.colors.background;