Add background and scale the font size

emfcamp · May 24, 2024 · 8efeed3 · 8efeed3
1 parent eb747e3
commit 8efeed3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/temporary-sign/background.png b/temporary-sign/background.png
diff --git a/temporary-sign/index.html b/temporary-sign/index.html
@@ -23,7 +23,9 @@
                 <template v-else> {{ status }} </template>
             </div>
             <template v-if="structure">
-                <h1 :style="{fontSize: `${structure.fontSize}px` }">{{structure.Structure}}</h1>
+                <div class="name">
+                    <h1 :style="{fontSize: `${structure.fontSize}px` }">{{structure.Structure}}</h1>
+                </div>
 
                 <div class="furniture" v-if="structure.Furniture">
                     <h2>Furniture</h2>

diff --git a/temporary-sign/temporary-sign.css b/temporary-sign/temporary-sign.css
@@ -22,10 +22,34 @@ body {
     height: 700px;
     padding: 4px;
     position: relative;
+    background: #ffffff url(background.png) center center/cover no-repeat;
+    display: flex;
+    flex-direction: column;
+}
+
+.name {
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    padding: 20px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.furniture {
+    bottom: 0;
+    left: 0;
+    justify-self: flex-end;
+    margin-right: 275px;
+    padding: 0 20px 10px 20px;
+    background: rgba(255, 255, 255, 0.8);
 }
 
 h1 {
     text-align: center;
+    margin: 0px;
 }
 
 h2 {
@@ -70,13 +94,7 @@ tbody tr:nth-child(odd) {
     background-color: #f0f0f0;
 }
 
-.furniture {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    padding: 4px 10px;
-}
+
 
 .qrcode img {
     display: block;

diff --git a/temporary-sign/temporary-sign.ts b/temporary-sign/temporary-sign.ts
@@ -51,7 +51,23 @@ const normalizeBetweenTwoRanges = (val, minVal, maxVal, newMin, newMax) => {
 
 
 function scaleFont(words) {
-    return normalizeBetweenTwoRanges(words.length, 0, 100, 256, 10)
+    if (words.length < 10) {
+        return 256
+    }
+
+    if (words.length < 20) {
+        return 170
+    }
+
+    if (words.length < 30) {
+        return 150
+    }
+
+    if (words.length < 40) {
+        return 125
+    }
+
+    return normalizeBetweenTwoRanges(words.length, 0, 80, 256, 100)
 }
 
 function tweakUrl(url) {