smaller font for header, announcements full size always

readme.md

@@ -30,6 +30,9 @@ npx cap open ios
 Run this command to rebuild for iOS
 npm run build && npx cap copy ios
 
+If getting black screen:
+npx cap sync iOS
+
 ### iOS: Dev Frontend and Dev Backend (localhost)
 This option should be at the top level of capacitor.config.json
 "server": {

src/components/AppWindow.js

@@ -31,6 +31,7 @@ class AppWindow extends Shadow {
                         break;
                 }
         })
+        .height(100, pct)
         .overflowY("scroll")
         .onNavigate(() => {
             this.rerender()

src/components/TopBar.js

@@ -28,20 +28,24 @@ class TopBar extends Shadow {
                     .borderRadius("50", pct)
             }
 
-            p(global.currentApp())
+            p()
+                .state("app", function () {
+                    this.innerText = global.currentApp() === "Dashboard" ? "Announcements" : global.currentApp()
+                })
                 .color("var(--headertext)")
                 .textAlign("center")
                 .fontFamily("Arial")
-                .fontSize("3xl")
+                .fontSize("clamp(0.8rem, 40cqw, 7cqw)")
                 .fontWeight("bold")
         })
+        .containerType("inline-size")
         .paddingLeft(1, em)
         .paddingBottom(1.5, em)
         .verticalAlign("center")
         .gap(0.5, em)
         .marginTop(4, em)
         .onNavigate(() => {
-            this.$("p").innerText = global.currentApp()
+            this.$("p").attr({app: global.currentApp()})
         })
     }
 }

src/public/_/code/quill.js

@@ -1,7 +1,7 @@
 /*
     Sam Russell
     Captured Sun
-    2.21.26 - Making state() be called on initial definition
+    2.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
     2.20.26 - Adding state()
     2.19.26 - Adding dynamicText()
     2.16.26 - Adding event objects to the onTouch callbacks
@@ -472,7 +472,7 @@ HTMLElement.prototype.setUpState = function(styleFunc, cb) {
 }
 
 function StyleFunction(func) {
-    let styleFunction = function(value, unit = "px") {
+    let styleFunction = function(value, unit) {
         if(typeof value === 'function') {
             this.setUpState(styleFunction, value)
             return this
@@ -528,7 +528,7 @@ HTMLElement.prototype.borderHorizontal = StyleFunction(function(value) {
     return this
 })
 
-HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
+HTMLElement.prototype.fontSize = StyleFunction(function(value, unit) {
     
     switch(value) {
         case "6xl": 
@@ -570,7 +570,13 @@ HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
         default:
             break;
     }
-    this.style.fontSize = value + unit
+
+    if(unit) {
+        this.style.fontSize = value + unit
+    } else {
+        this.style.fontSize = value
+    }
+
     return this
 })