Fix #138: Fix navigation bar link icons and text appearing on separate lines #139

Closed

typosaurus wants to merge 1 commits from typosaurus/ticket-138 into master

typosaurus commented

2026-07-26 16:43:48 +02:00

Collaborator

Resolves #138.

Plan

Implementation Plan

1. Add "Quizzes" link to navigation templates

File: devplacepy/templates/base.html

Line ~70 (desktop .topnav-links): Insert the new link after the existing "News" link so the order becomes:
🏠 Home | 📝 Posts | 📰 News | 📄 Gists | 🚀 Projects | 🌱 Farm | 📝 Quizzes
Use the same HTML structure as the other links:
```
<a class="topnav-link" href="{{ url_for('quizzes.index') }}">
 📝 Quizzes
</a>
```

Line ~133 (mobile .topnav-mobile-links): Insert a corresponding link with the mobile class:

<a class="topnav-mobile-link" href="{{ url_for('quizzes.index') }}">
    <span class="icon">📝</span> Quizzes
</a>

Note: The actual route quizzes.index does not exist yet. Choose a placeholder route that corresponds to the future Quizzes feature (e.g., a static URL /quizzes). Since the ticket is only about the layout bug, create a minimal route in devplacepy/routes/quizzes.py:
```
from flask import Blueprint, render_template

quizzes_bp = Blueprint('quizzes', __name__)

@quizzes_bp.route('/quizzes')
def index():
    return render_template('quizzes/index.html')  # start with a stub
```
Register the blueprint in app.py.

2. Harden `.topnav-link` CSS to prevent line-wrapping

File: static/css/base.css

Add to .topnav-link block (line ~622):
```
display: flex;
align-items: center;
gap: 0.375rem;
white-space: nowrap;
```
This matches the pattern already used for .topnav-mobile-link and ensures the icon and text always stay on one line.
Optionally ensure .icon has display: inline-block (line ~952):
```
display: inline-block;
```
This makes the width: 20px effective, though the flex approach on the parent already provides alignment.

3. Add Playwright e2e test for icon+text layout

File: tests/e2e/root.py (or create new tests/e2e/quizzes.py)

Add a test that:

Navigates to the landing page.
Locates all .topnav-link elements.
For each, assert that the getBoundingClientRect() top coordinate of the .icon child equals the top coordinate of the text node (or the anchor’s innerText appears on same line).
Simpler: assert that no .topnav-link has a computed line-height different from its height (indicating wrapping), or that the anchor’s scrollHeight equals its clientHeight.

Example:

def test_topnav_links_icon_and_text_same_line(page):
    page.goto("/")
    links = page.locator(".topnav-link")
    count = links.count()
    for i in range(count):
        link = links.nth(i)
        icon = link.locator(".icon")
        text = link.inner_text().replace(icon.inner_text(), "").strip()
        # Check bounding boxes - they should overlap in y-axis
        icon_box = icon.bounding_box()
        text_range = link.locator(f"text={text}").bounding_box()
        assert icon_box["y"] == text_range["y"], f"Link {i} icon and text not on same line"

4. Ensure test infrastructure is solid

Before running tests, install Playwright browsers: playwright install chromium.
If the test command does not include that, add a step in the plan to run it.

Definition of Done

The "Quizzes" link appears in the desktop .topnav-links and mobile .topnav-mobile-links navigation bars with correct icon and text.
The .topnav-link CSS class now includes display: flex; align-items: center; gap: 0.375rem; white-space: nowrap.
A minimal Quizzes route exists (e.g., /quizzes) and the link points to it without 404 errors.
All existing e2e tests pass (including those for navigation link presence, leaderboard, mobile hamburger).
The new test test_topnav_links_icon_and_text_same_line passes, verifying that for every .topnav-link the icon and text bounding boxes have the same vertical position.
The project’s verification command succeeds:
```
pip install -e '.[dev]' -q && python -m pytest tests/e2e/root.py tests/e2e/feed.py (and any new test file)
```
(Note: Playwright browsers must be installed prior; add playwright install chromium if not already done in CI.)

Opened automatically by Typosaurus.

Resolves #138. ## Plan ## Implementation Plan ### 1. Add "Quizzes" link to navigation templates **File: `devplacepy/templates/base.html`** - **Line ~70 (desktop `.topnav-links`):** Insert the new link after the existing "News" link so the order becomes: `🏠 Home | 📝 Posts | 📰 News | 📄 Gists | 🚀 Projects | 🌱 Farm | 📝 Quizzes` Use the same HTML structure as the other links: ```html <a class="topnav-link" href="{{ url_for('quizzes.index') }}"> 📝 Quizzes </a> ``` - **Line ~133 (mobile `.topnav-mobile-links`):** Insert a corresponding link with the mobile class: ```html <a class="topnav-mobile-link" href="{{ url_for('quizzes.index') }}"> 📝 Quizzes </a> ``` - **Note:** The actual route `quizzes.index` does not exist yet. Choose a placeholder route that corresponds to the future Quizzes feature (e.g., a static URL `/quizzes`). Since the ticket is only about the layout bug, create a minimal route in `devplacepy/routes/quizzes.py`: ```python from flask import Blueprint, render_template quizzes_bp = Blueprint('quizzes', __name__) @quizzes_bp.route('/quizzes') def index(): return render_template('quizzes/index.html') # start with a stub ``` Register the blueprint in `app.py`. ### 2. Harden `.topnav-link` CSS to prevent line-wrapping **File: `static/css/base.css`** - **Add to `.topnav-link` block (line ~622):** ```css display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; ``` This matches the pattern already used for `.topnav-mobile-link` and ensures the icon and text always stay on one line. - **Optionally ensure `.icon` has `display: inline-block` (line ~952):** ```css display: inline-block; ``` This makes the `width: 20px` effective, though the flex approach on the parent already provides alignment. ### 3. Add Playwright e2e test for icon+text layout **File: `tests/e2e/root.py` (or create new `tests/e2e/quizzes.py`)** Add a test that: - Navigates to the landing page. - Locates all `.topnav-link` elements. - For each, assert that the `getBoundingClientRect()` top coordinate of the `.icon` child equals the top coordinate of the text node (or the anchor’s `innerText` appears on same line). - Simpler: assert that no `.topnav-link` has a computed `line-height` different from its `height` (indicating wrapping), or that the anchor’s scrollHeight equals its clientHeight. Example: ```python def test_topnav_links_icon_and_text_same_line(page): page.goto("/") links = page.locator(".topnav-link") count = links.count() for i in range(count): link = links.nth(i) icon = link.locator(".icon") text = link.inner_text().replace(icon.inner_text(), "").strip() # Check bounding boxes - they should overlap in y-axis icon_box = icon.bounding_box() text_range = link.locator(f"text={text}").bounding_box() assert icon_box["y"] == text_range["y"], f"Link {i} icon and text not on same line" ``` ### 4. Ensure test infrastructure is solid - Before running tests, install Playwright browsers: `playwright install chromium`. - If the test command does not include that, add a step in the plan to run it. --- ## Definition of Done - [ ] The "Quizzes" link appears in the desktop `.topnav-links` and mobile `.topnav-mobile-links` navigation bars with correct icon and text. - [ ] The `.topnav-link` CSS class now includes `display: flex; align-items: center; gap: 0.375rem; white-space: nowrap`. - [ ] A minimal Quizzes route exists (e.g., `/quizzes`) and the link points to it without 404 errors. - [ ] All existing e2e tests pass (including those for navigation link presence, leaderboard, mobile hamburger). - [ ] The new test `test_topnav_links_icon_and_text_same_line` passes, verifying that for every `.topnav-link` the icon and text bounding boxes have the same vertical position. - [ ] The project’s verification command succeeds: ```bash pip install -e '.[dev]' -q && python -m pytest tests/e2e/root.py tests/e2e/feed.py (and any new test file) ``` (Note: Playwright browsers must be installed prior; add `playwright install chromium` if not already done in CI.) Opened automatically by Typosaurus.

typosaurus added 1 commit 2026-07-26 16:43:48 +02:00