styling & subsequent testing bugs fixed across apps.dash.tests.ITs.test_views, functional_tests.test_dashboard,_dashboard.scss & apps/dash/_partials/_applets.html

src/apps/dashboard/tests/integrated/test_views.py

@@ -269,15 +269,17 @@ class ViewAuthListTest(TestCase):
         response = self.client.get(reverse("view_list", args=[self.our_list.id]))
         self.assertEqual(response.status_code, 200)
 
+@override_settings(COMPRESS_ENABLED=False)
 class SetPaletteTest(TestCase):
     def setUp(self):
         self.user = User.objects.create(email="a@b.cde")
         self.client.force_login(self.user)
         self.url = reverse("home")
+        Applet.objects.get_or_create(slug="palette", defaults={"name": "Palette"})
     
     def test_anonymous_user_is_redirected_home(self):
         response = self.client.post("/dashboard/set_palette")
-        self.assertRedirects(response, "/")
+        self.assertRedirects(response, "/", fetch_redirect_response=False)
 
     def test_set_palette_updates_user_palette(self):
         User.objects.filter(pk=self.user.pk).update(palette="palette-sheol")
@@ -289,11 +291,11 @@ class SetPaletteTest(TestCase):
         response = self.client.post("/dashboard/set_palette", data={"palette": "palette-nirvana"})
         self.user.refresh_from_db()
         self.assertEqual(self.user.palette, "palette-default")
-        self.assertRedirects(response, "/")
+        self.assertRedirects(response, "/", fetch_redirect_response=False)
 
     def test_set_palette_redirects_home(self):
         response = self.client.post("/dashboard/set_palette", data={"palette": "palette-default"})
-        self.assertRedirects(response, "/")
+        self.assertRedirects(response, "/", fetch_redirect_response=False)
 
     def test_my_lists_contains_set_palette_form(self):
         response = self.client.get(self.url)
@@ -322,6 +324,7 @@ class SetPaletteTest(TestCase):
         swatches = parsed.cssselect(".swatch")
         self.assertEqual(len(swatches), len(response.context["palettes"]))
 
+@override_settings(COMPRESS_ENABLED=False)
 class ProfileViewTest(TestCase):
     def setUp(self):
         self.user = User.objects.create(email="discoman@example.com")
@@ -335,22 +338,21 @@ class ProfileViewTest(TestCase):
     def test_post_username_requires_login(self):
         self.client.logout()
         response = self.client.post("/dashboard/set_profile", data={"username": "somnambulist"})
-        self.assertRedirects(response, "/?next=/dashboard/set_profile")
+        self.assertRedirects(response, "/?next=/dashboard/set_profile", fetch_redirect_response=False)
 
     def test_dash_renders_username_applet(self):
         response = self.client.get("/")
         parsed = lxml.html.fromstring(response.content)
         [applet] = parsed.cssselect("#id_applet_username")
-        self.assertIn("di…an@e…e.com", applet.text_content())
+        self.assertIn("@", applet.text_content())
-        [_] = parsed.cssselect("#id_new_username")
+        [input_el] = parsed.cssselect("#id_new_username")
+        self.assertEqual("", input_el.get("value"))
 
     def test_dash_shows_display_name_in_applet(self):
         self.user.username = "discoman"
         self.user.save()
         response = self.client.get("/")
         parsed = lxml.html.fromstring(response.content)
-        [applet] = parsed.cssselect("#id_applet_username")
-        self.assertIn("discoman", applet.text_content())
         [username_input] = parsed.cssselect("#id_new_username")
         self.assertEqual("discoman", username_input.get("value"))
 

src/functional_tests/test_dashboard.py

@@ -19,10 +19,10 @@ class DashboardMaintenanceTest(FunctionalTest):
         self.browser.get(self.live_server_url)
         # 3. Find the username applet on the page; look for a <section> or <div> with id="id_username_applet"
         self.browser.find_element(By.ID, "id_applet_username")
-        # 4. Assert it shows the current display name (truncated email: di…an@e…e.com)
-        self.assertIn("di…an@e…e.com", self.browser.find_element(By.ID, "id_applet_username").text)
         # 5. Find the username input field inside the applet & type a username
         username_input = self.browser.find_element(By.CSS_SELECTOR, "#id_new_username")
+        # 4. Assert it shows the current display name (truncated email: di…an@e…e.com) NOPE the username value itself now
+        self.assertEqual("", username_input.get_attribute("value"))
         # 6. Type a username, e.g., discoman
         username_input.send_keys("discoman")
         self.wait_for(

src/static_src/scss/_dashboard.scss

@@ -57,7 +57,7 @@ body.page-dashboard {
     overflow-y: auto;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-auto-rows: calc((100cqw - 11 * var(--grid-gap)) / 12);
+    grid-auto-rows: 3rem;
     gap: var(--grid-gap);
     padding: 0.75rem;
 
@@ -69,6 +69,50 @@ body.page-dashboard {
         grid-column: span var(--applet-cols, 12);
         grid-row: span var(--applet-rows, 3);
     }
+
+    #id_applet_palette {
+        padding: 0;
+        border-color: rgba(var(--secUser), 1);
+
+        .palette-scroll {
+            display: flex;
+            gap: 0.5rem;
+            overflow-x: auto;
+            padding: 1rem;
+            height: 100%;
+            scrollbar-width: none;
+            &::-webkit-scrollbar { display: none; }
+        }
+    }
+
+    #id_applet_username {
+        display: flex;
+        align-items: center;
+
+        .username-field {
+            display: flex;
+            align-items: baseline;
+            gap: 0.1em;
+
+            .username-at{
+                user-select: none;
+                pointer-events: none;    
+            }
+            
+            input {
+                background: transparent;
+                border: none;
+                outline: none;
+                font-size: 1.8rem;
+                font-weight: bold;
+                color: rgba(var(--secUser), 0.875);;
+                font-family: inherit;
+                padding: 0;
+                width: auto;
+            }
+        }
+
+    }
 }
 
 @media (max-height: 500px) {

src/templates/apps/dashboard/_partials/_applets.html

@@ -53,20 +53,19 @@
                 <section
                     id="id_applet_username"
                     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
-                    >
+                >
-                    <h1>{{ user|display_name }}</h1>
+                    <form method="POST" action="{% url "set_profile" %}">
-                    <div class="form-container">
+                        {% csrf_token %}
-                        <form method="POST" action="{% url "set_profile" %}">
+                        <div class="username-field">
-                            {% csrf_token %}
+                            <span class="username-at">@</span>
                             <input
-                            id="id_new_username"
+                                id="id_new_username"
-                            name="username"
+                                name="username"
-                            class="form-control"
+                                required
-                            required
+                                value="{{ user.username|default:'' }}"
-                            value="{{ user.username|default:'' }}"
                             >
-                        </form>
+                        </div>
-                    </div>
+                    </form>
                 </section>
             {% elif entry.applet.slug == "palette" %}
                 <section
@@ -74,19 +73,21 @@
                     class="palette"
                     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                 >
-                    {% for palette in palettes %}
+                    <div class="palette-scroll">
-                        <div class="palette-item">
+                        {% for palette in palettes %}
-                            <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
+                            <div class="palette-item">
-                            {% if not palette.locked %}
+                                <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
-                                <form method="POST" action="{% url "set_palette" %}">
+                                {% if not palette.locked %}
-                                    {% csrf_token %}
+                                    <form method="POST" action="{% url "set_palette" %}">
-                                    <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
+                                        {% csrf_token %}
-                                </form>
+                                        <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
-                            {% else %}
+                                    </form>
-                                <span class="btn btn-disabled">&times;</span>
+                                {% else %}
-                            {% endif %}
+                                    <span class="btn btn-disabled">&times;</span>
-                        </div>
+                                {% endif %}
-                    {% endfor %}
+                            </div>
+                        {% endfor %}
+                    </div>
                 </section>
             {% endif %}
         {% endif %}