Jannex
/
admin-dashboard-backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamic font size

main
alex 2024-05-18 18:59:33 +02:00
parent 490e414732
commit cfc93e5d37
4 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
groupTasks/groups/shx-product-label/index.html
View File

@ -58,9 +58,12 @@
.content {
max-width: 180px;
white-space: nowrap;
overflow: hidden;
}
.product-color {
.product-variant {
/* display: inline-block; */
font-weight: 300;
}
@ -68,7 +71,7 @@
margin-top: 10px;
font-size: 14px;
color: #464646;
font-weight: 300;
font-weight: 200;
}
.container {

40
groupTasks/groups/shx-product-label/index.js
View File

@ -1,5 +1,5 @@
const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
PRODUCT_COLOR = "{{PRODUCT_COLOR}}", // Farbe Grün/Blau/Orange
PRODUCT_VARIANT = "{{PRODUCT_VARIANT}}", // Farbe Grün/Blau/Orange or Stil Standard
PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
PRODUCT_ID = "{{PRODUCT_ID}}", // #32420
LABEL_PAPER_POSITION = "{{LABEL_PAPER_POSITION}}"; // could be a number between 1 and 12 or combination like 1,3,7
@ -8,7 +8,7 @@ const labelPaperPosition = LABEL_PAPER_POSITION.split(",");
/*
const PRODUCT_NAME = "Gizmo die Eidechse",
PRODUCT_COLOR = "Farbe Grün/Blau/Orange",
PRODUCT_VARIANT = "Farbe Grün/Blau/Orange",
PRODUCT_COLOR_CHARACTERISTICS = "(Glänzend)",
PRODUCT_ID = "#32420"; */
@ -30,22 +30,25 @@ window.onload = () => {
const content = document.createElement("div");
content.className = "content";
const productName = PRODUCT_NAME.split(" ");
const productName = PRODUCT_NAME.split("_");
const productNameFirst = document.createElement("h1");
productNameFirst.innerHTML = productName[0];
const productNameRemainingPart = document.createElement("h1");
productNameRemainingPart.innerHTML = productName.slice(1).join(" ");
productNameRemainingPart.innerHTML = productName[1];
productNameRemainingPart.style = "margin: 0";
const productColor = document.createElement("p");
productColor.innerHTML = PRODUCT_COLOR;
productColor.className = "product-color";
const productVariant = document.createElement("p");
productVariant.innerHTML = PRODUCT_VARIANT;
productVariant.className = "product-variant";
const productColorCharacteristics = document.createElement("p");
productColorCharacteristics.innerHTML = PRODUCT_COLOR_CHARACTERISTICS;
productColorCharacteristics.className = "product-color";
productColorCharacteristics.innerHTML =
PRODUCT_COLOR_CHARACTERISTICS == ""
? "\u200B" // /* Zero-Width Space needed for product variants like Standard which have no color characteristics */
: PRODUCT_COLOR_CHARACTERISTICS;
productColorCharacteristics.className = "product-variant";
const productId = document.createElement("p");
productId.innerHTML = PRODUCT_ID;
@ -53,7 +56,7 @@ window.onload = () => {
content.appendChild(productNameFirst);
content.appendChild(productNameRemainingPart);
content.appendChild(productColor);
content.appendChild(productVariant);
content.appendChild(productColorCharacteristics);
content.appendChild(productId);
@ -104,4 +107,21 @@ window.onload = () => {
labels.appendChild(label);
}
function adjustFontSize() {
const container = document.getElementsByClassName("product-variant")[0];
const text = document.getElementById("text");
const containerWidth = container.offsetWidth;
let fontSize = 100; // Startgröße in Prozent
text.style.fontSize = fontSize + "%";
// Reduziere die Schriftgröße, bis der Text in den Container passt
while (text.offsetWidth > containerWidth && fontSize > 1) {
fontSize--;
text.style.fontSize = fontSize + "%";
}
}
window.onload = adjustFontSize;
window.onresize = adjustFontSize;
};

30
groupTasks/groups/shx-product-label/index.json
View File

@ -5,7 +5,7 @@
"tasks": [
{
"name": "Produktschilder ausdrucken",
"onFinish": "pause",
"onFinish": "next",
"undoPossible": false,
"repeatPossible": true,
"scriptPath": "script.py",
@ -20,20 +20,20 @@
"type": "select",
"displayName": "Produkttyp auswählen",
"options": [
"#32420; Gizmo die Eidechse; Grün, Blau, Orange; (Glänzend)",
"#92784; Gizmo die Eidechse; Glitzer Grün; (Seidenmatt)",
"#36521; Charlie das Häschen; Hellbraun; (Matt)",
"#48273; Charlie das Häschen; Gold; (Glänzend)",
"#71936; Ruby die Schlange; Feuerrot; (Glänzend)",
"#58324; Ruby die Schlange; Rot/Blau; (Glänzend)",
"#21433; Bruno der Dino; Grün/Blau/Orange; (Glänzend)",
"#57953; Bruno der Dino; Rot/Blau; (Glänzend)",
"#90578; Bruno der Dino; Gold; (Glänzend)",
"#51563; Bruno der Dino; Himmelblau; (Fluoreszierend)",
"#23564; Flamara der Drache; Feuerrot; (Glänzend)",
"#51139; Flamara der Drache; Himmelblau; (Fluoreszierend)",
"#77970; Flamara der Drache; Gold; (Glänzend)",
"#32974; Finn der Sad Hamster; Standard; "
"#32420; Gizmo_die Eidechse; Farbe; Grün, Blau, Orange; (Glänzend)",
"#92784; Gizmo_die Eidechse; Farbe; Glitzer Grün; (Seidenmatt)",
"#36521; Charlie_das Häschen; Farbe; Hellbraun; (Matt)",
"#48273; Charlie_das Häschen; Farbe; Gold; (Glänzend)",
"#71936; Ruby_die Schlange; Farbe; Feuerrot; (Glänzend)",
"#58324; Ruby_die Schlange; Farbe; Rot/Blau; (Glänzend)",
"#21433; Bruno_der Dino; Farbe; Grün/Blau/Orange; (Glänzend)",
"#57953; Bruno_der Dino; Farbe; Rot/Blau; (Glänzend)",
"#90578; Bruno_der Dino; Farbe; Gold; (Glänzend)",
"#51563; Bruno_der Dino; Farbe; Himmelblau; (Fluoreszierend)",
"#23564; Flamara_der Drache; Farbe; Feuerrot; (Glänzend)",
"#51139; Flamara_der Drache; Farbe; Himmelblau; (Fluoreszierend)",
"#77970; Flamara_der Drache; Farbe; Gold; (Glänzend)",
"#32974; Finn der_Sad Hamster; Stil; Standard; "
],
"global": false
}

8
groupTasks/groups/shx-product-label/script.py
View File

@ -21,11 +21,11 @@ label_paper_position = label_paper_position["value"]
product_type_ids = {}
def add_product_type_id(product_type_id, product_name, product_color, product_color_characteristics):
def add_product_type_id(product_type_id, product_name, product_variant, product_color_characteristics):
product_type_ids[product_type_id] = {
"product_id": f"#{product_type_id}",
"product_name": product_name,
"product_color": f"Farbe {product_color}",
"product_variant": product_variant,
"product_color_characteristics": product_color_characteristics
}
@ -38,7 +38,7 @@ for product in products:
data = product.split("; ")
# remove the # on the start
add_product_type_id(data[0][1:], data[1], data[2], data[3])
add_product_type_id(data[0][1:], data[1], data[2] + " " + data[3], data[4])
def createPdf(sourceHtml, outputPdf):
command = [
@ -80,7 +80,7 @@ if __name__ == "__main__":
indexjs = indexjs.replace("{{PRODUCT_ID}}", product["product_id"])
indexjs = indexjs.replace("{{PRODUCT_NAME}}", product["product_name"])
indexjs = indexjs.replace("{{PRODUCT_COLOR}}", product["product_color"])
indexjs = indexjs.replace("{{PRODUCT_VARIANT}}", product["product_variant"])
indexjs = indexjs.replace("{{PRODUCT_COLOR_CHARACTERISTICS}}", product["product_color_characteristics"])
indexjs = indexjs.replace("{{LABEL_PAPER_POSITION}}", label_paper_position)