many styling fixes, esp. for both landscape & portrait mobile UX tooltips & navbar; core.settings now permits another device on local net to access dev server

src/apps/gameboard/static/apps/gameboard/gameboard.js

@@ -9,10 +9,13 @@ function initGameKitTooltips() {
         token.addEventListener('mouseenter', () => {
             const rect = token.getBoundingClientRect();
             portal.innerHTML = tooltip.innerHTML;
-            portal.style.left = Math.round(rect.left + rect.width / 2) + 'px';
+            portal.classList.add('active');
+            const halfW = portal.offsetWidth / 2;
+            const rawLeft = rect.left + rect.width / 2;
+            const clampedLeft = Math.max(halfW + 8, Math.min(rawLeft, window.innerWidth - halfW - 8));
+            portal.style.left = Math.round(clampedLeft) + 'px';
             portal.style.top = Math.round(rect.top) + 'px';
             portal.style.transform = 'translate(-50%, calc(-100% - 0.5rem))';
-            portal.classList.add('active');
         });
 
         token.addEventListener('mouseleave', () => {

src/apps/lyric/models.py

@@ -51,6 +51,21 @@ class Wallet(models.Model):
     writs = models.IntegerField(default=0)
     esteem = models.IntegerField(default=0)
 
+    def tooltip_name(self):
+        return "Wallet"
+
+    def tooltip_description(self):
+        return f"{self.writs} writs · {self.esteem} esteem"
+
+    def tooltip_shoptalk(self):
+        return None
+
+    def tooltip_expiry(self):
+        return None
+
+    def tooltip_text(self):
+        return f"{self.tooltip_name()}: {self.tooltip_description()}"
+
 class Token(models.Model):
     COIN = "coin"
     FREE = "Free"

src/core/settings.py

@@ -42,7 +42,8 @@ else:
     DEBUG = True
     # SECURITY WARNING: keep the secret key used in production secret!
     SECRET_KEY = 'django-insecure-&9b_h=qpjy=sshhnsyg98&jp7(t6*v78__y%h2l$b#_@6z$-9r'
-    ALLOWED_HOSTS = []
+    ALLOWED_HOSTS = ['*']
+    COMPRESS_CACHE_BACKEND = 'dummy'
 
 
 # Application definition

src/static_src/scss/_base.scss

@@ -171,6 +171,74 @@ body {
     }
 }
 
+@media (orientation: landscape) and (max-width: 1023px) {
+    body .container {
+        padding: 0.4rem 1rem;
+
+        .navbar {
+            padding: 0.2rem 0;
+
+            .navbar-brand h1 {
+                font-size: 1.2rem;
+            }
+            .btn-primary {
+                width: 3rem;
+                height: 3rem;
+                font-size: 0.75rem;
+                border-width: 0.125rem;
+            }
+        }
+
+        .row {
+            padding: 0.5rem 0;
+
+            .col-lg-6 h2 {
+                font-size: 2.1rem;
+                margin-bottom: 0.5rem;
+                // text-justify: inter-character is Firefox-only; approximate for Safari/Chrome
+                letter-spacing: 1em;
+                text-align: center;
+                text-align-last: center;
+            }
+        }
+    }
+
+    #id_footer {
+        height: 3rem;
+        padding: 0.4rem 1rem;
+        gap: 0.2rem;
+
+        #id_footer_nav a {
+            font-size: 1.4rem;
+        }
+    }
+}
+
+@media (orientation: portrait) and (max-width: 500px) {
+    body .container  {
+        .navbar {
+            .navbar-brand h1 {
+                font-size: 1.2rem;
+            }
+    
+            .btn-primary {
+                    width: 3rem;
+                    height: 3rem;
+                    font-size: 0.75rem;
+                    border-width: 0.125rem;
+            }
+        }
+
+        .row .col-lg-6 h2 {
+            text-align: center;
+            text-align-last: center;
+            letter-spacing: 0.25em;
+            margin: 0 0 0.5rem;
+            font-size: 2.2rem;
+        }
+    }
+}
+
 @media (min-width: 1024px) and (max-height: 700px) {
     body .container .navbar {
         padding: 0.5rem 0;

src/static_src/scss/_wallet-tokens.scss

@@ -50,3 +50,12 @@
         display: block;
     }
 }
+
+@media (max-width: 768px) {
+    .token .token-tooltip {
+        width: 13rem;
+        max-width: 90vw;
+        left: 0;
+        transform: none;
+    }
+}

src/templates/apps/dashboard/wallet.html

@@ -17,13 +17,27 @@
             {% if coin %}
                 <div id="id_coin_on_a_string" class="token">
                     <i class="fa-solid fa-clover"></i>
-                    <span class="token-tooltip">{{ coin.tooltip_text }}</span>
+                    <div class="token-tooltip">
+                        <h4>{{ coin.tooltip_name }}</h4>
+                        <p>{{ coin.tooltip_description }}</p>
+                        {% if coin.tooltip_shoptalk %}
+                            <small><em>{{ coin.tooltip_shoptalk }}</em></small>
+                        {% endif %}
+                        <p class="expiry">{{ coin.tooltip_expiry }}</p>
+                    </div>
                 </div>
             {% endif %}
             {% for token in free_tokens %}
                 <div id="id_free_token_{{ forloop.counter0 }}" class="token">
                     <i class="fa-solid fa-coins"></i>
-                    <span class="token-tooltip">{{ token.tooltip_text }}</span>
+                    <div class="token-tooltip">
+                        <h4>{{ token.tooltip_name }}</h4>
+                        <p>{{ token.tooltip_description }}</p>
+                        {% if token.tooltip_shoptalk %}
+                            <small><em>{{ token.tooltip_shoptalk }}</em></small>
+                        {% endif %}
+                        <p class="expiry">{{ token.tooltip_expiry }}</p>
+                    </div>
                 </div>
             {% endfor %}
         </section>