unified header_title template values across dashboard applet destination pages; styled &/ added applet titles across all applets

src/apps/dashboard/static/apps/scripts/wallet.js

@@ -23,15 +23,22 @@ const initWallet = () => {
         const section = addBtn.closest('section');
         const rowPx = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
         const updateRows = () => {
-            const rows = Math.ceil(section.scrollHeight / rowPx) + 1;
+            const sectionTop = section.getBoundingClientRect().top;
+            let maxBottom = sectionTop;
+            for (const child of section.children) {
+                if (child.hidden) continue;
+                maxBottom = Math.max(maxBottom, child.getBoundingClientRect().bottom);
+            }
+            const padBot = parseFloat(getComputedStyle(section).paddingBottom);
+            const rows = Math.ceil((maxBottom - sectionTop + padBot) / rowPx) + 1;
             section.style.setProperty('--applet-rows', String(rows));
         };
         paymentEl.on('ready', () => {
             updateRows();
-            const iframe = document.querySelector('#id_stripe_payment_element iframe');
+            const stripeContainer = document.getElementById('id_stripe_payment_element');
-            if (iframe) {
+            if (stripeContainer) {
-                const obs = new MutationObserver(updateRows);
+                const obs = new ResizeObserver(updateRows);
-                obs.observe(iframe, { attributes: true, attributeFilter: ['style'] });
+                obs.observe(stripeContainer);
                 section._stripeObs = obs;
             }
         });

src/functional_tests/my_notes_page.py

@@ -16,7 +16,7 @@ class MyNotesPage:
         self.test.wait_for(
             lambda: self.test.assertIn(
                 email,
-                self.test.browser.find_element(By.TAG_NAME, "h2").text.lower(),
+                self.test.browser.find_element(By.CSS_SELECTOR, ".navbar-identity").text.lower(),
             )
         )
         return self

src/static_src/scss/_applets.scss

@@ -105,6 +105,7 @@
             inset -0.125rem -0.125rem 0 rgba(var(--ninUser), 0.125),
             inset 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.8)
         ;
+        background-color: rgba(0, 0, 0, 0.125);
         border-radius: 0.75rem;
         padding: 1rem;
         overflow: hidden;

src/static_src/scss/_dashboard.scss

@@ -30,16 +30,14 @@ body.page-dashboard {
 }
 
 #id_applets_container {
-    #id_applet_my_lists {
+    #id_applet_my_notes {
         padding: 1.25rem 1.5rem;
         display: flex;
         flex-direction: column;
 
-        .my-lists-main {
+        h2 { flex-shrink: 0; margin-bottom: 0.25rem; }
-            font-size: 1.6rem;
-        }
 
-        .my-lists-container {
+        .my-notes-container {
             flex: 1;
             min-height: 0;
             overflow-y: auto;
@@ -59,6 +57,14 @@ body.page-dashboard {
 
     }
 
+    #id_applet_wallet {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        h2 { flex-shrink: 0; margin-bottom: 0; }
+    }
+    
     #id_applet_palette {
         padding: 0;
 

src/static_src/scss/_wallet-tokens.scss

@@ -87,11 +87,23 @@ body.page-wallet {
 
 .wallet-tokens {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: center;
-    justify-content: space-evenly;
     overflow: visible;
 
+    h2 {
+        flex-shrink: 0;
+        margin-bottom: 0;
+    }
+
+    .token-row {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+        overflow: visible;
+    }
+
     .token {
         font-size: 1.5rem;
     }

src/templates/apps/dashboard/_partials/_applet-my-notes.html

@@ -2,7 +2,7 @@
     id="id_applet_my_notes"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
-    <a href="{% url 'my_notes' user.id %}" class="my-notes-main">My notes:</a>
+    <h2><a href="{% url 'my_notes' user.id %}" class="my-notes-main">My notes</a></h2>
     <div class="my-notes-container">
         <ul>
             {% for note in recent_notes %}

src/templates/apps/dashboard/_partials/_applet-wallet.html

@@ -2,6 +2,6 @@
     id="id_applet_wallet"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
-    <span>Writs: {{ user.wallet.writs }}</span>
+    <h2><a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a></h2>
-    <a href="{% url "wallet" %}" class="wallet-manage-link">Manage Wallet</a>
+    <span><i class="fa-solid fa-ticket"></i>: {{ user.wallet.writs }}</span>
 </section>

src/templates/apps/dashboard/my_notes.html

@@ -1,7 +1,8 @@
 {% extends "core/base.html" %}
 {% load lyric_extras %}
 
-{% block header_text %}{{ user|display_name }}'s notes{% endblock header_text %}
+{% block title_text %}Dashnotes{% endblock title_text %}
+{% block header_text %}<span>Dash</span>notes{% endblock header_text %}
 
 {% block content %}
     <h3>{{ owner|display_name }}'s notes</h3>

src/templates/apps/dashboard/note.html

@@ -1,8 +1,8 @@
 {% extends "core/base.html" %}
 {% load lyric_extras %}
 
-{% block title_text %}Your note{% endblock title_text %}
+{% block title_text %}Dashnote{% endblock title_text %}
-{% block header_text %}Your note{% endblock header_text %}
+{% block header_text %}<span>Dash</span>note{% endblock header_text %}
 
 
 {% block extra_header %}

src/templates/apps/wallet/_partials/_applet-wallet-balances.html

@@ -2,6 +2,7 @@
     id="id_wallet_balances"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
+    <h2>Balances</h2>
     <div><i class="fa-solid fa-ticket"></i>: <span id="id_writs_balance">{{ wallet.writs }}</span></div>
     <div>Esteem: <span id="id_esteem_balance">{{ wallet.esteem }}</span></div>
     <div id="id_tithe_token_shop">

src/templates/apps/wallet/_partials/_applet-wallet-payment.html

@@ -2,7 +2,7 @@
     id="id_payment_methods"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
-    <h2>Payment Methods</h2>
+    <h2>Payment methods</h2>
     <button id="id_add_payment_method">Add Payment Method</button>
     <div id="id_stripe_payment_element"></div>
     <button id="id_save_payment_method" hidden>Save Card</button>

src/templates/apps/wallet/_partials/_applet-wallet-tokens.html

@@ -2,6 +2,8 @@
     class="wallet-tokens"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
+    <h2>Tokens</h2>
+    <div class="token-row">
     {% if coin %}
         <div id="id_coin_on_a_string" class="token">
             <i class="fa-solid fa-clover"></i>
@@ -50,4 +52,5 @@
             </div>
         </div>
     {% endfor %}
+    </div>
 </section>