Skip to content

Commit 383a532

Browse files
gemmadlougemmadlou
committed
feat(ui): enhance graph navigation with new brand styling and responsive layout updates
1 parent 45fdad4 commit 383a532

3 files changed

Lines changed: 35 additions & 30 deletions

File tree

‎public/css/app.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,28 @@ sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
34573457
z-index: 20;
34583458
min-height: 48px;
34593459
}
3460+
.graph-nav__brand {
3461+
font-size: 1.125rem;
3462+
font-weight: 700;
3463+
letter-spacing: -0.01em;
3464+
color: var(--on-surface);
3465+
display: flex;
3466+
align-items: center;
3467+
gap: 0.5rem;
3468+
margin: 0;
3469+
}
3470+
.graph-nav__brand-icon {
3471+
width: 1.5rem;
3472+
height: 1.5rem;
3473+
background: var(--primary);
3474+
border-radius: 0.25rem;
3475+
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
3476+
display: inline-flex;
3477+
align-items: center;
3478+
justify-content: center;
3479+
flex-shrink: 0;
3480+
}
3481+
.graph-nav__brand-icon .material-symbols-outlined { color: #fff; font-size: 0.875rem; }
34603482
.graph-nav__left {
34613483
display: flex;
34623484
align-items: center;

‎src/app/features/projects/projects_show.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@
4545
<!-- Top bar: graph nav -->
4646
<header class="graph-nav">
4747
<div class="graph-nav__left">
48-
{% include "app/partials/app_brand_title.html" %}
48+
<h1 class="graph-nav__brand">
49+
<span class="graph-nav__brand-icon"><span class="material-symbols-outlined">layers</span></span>
50+
{{ app_name }}
51+
</h1>
4952
<div class="graph-nav__divider"></div>
5053
<span class="graph-nav__project-title">{{ project.title }}</span>
5154
</div>
@@ -70,7 +73,7 @@
7073
<button type="button" @click="openSettings()"
7174
class="graph-nav__icon-btn"
7275
aria-label="Project settings">
73-
<span class="material-symbols-outlined text-xl">settings</span>
76+
<span class="material-symbols-outlined">settings</span>
7477
</button>
7578
<a href="/app/projects/{{ project.id }}/kanban" data-testid="kanban-view-link"
7679
class="graph-nav__icon-btn graph-nav__icon-btn--view" aria-label="Kanban view">

‎styleguide/graph-nav.html‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -35,28 +35,6 @@
3535
.sg-col { flex: 1; min-width: 240px; }
3636
.sg-swatch { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--on-surface-variant); margin-bottom: 0.5rem; }
3737
.sg-swatch__dot { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--ghost-border); }
38-
.sg-brand {
39-
font-size: 1.125rem;
40-
font-weight: 700;
41-
letter-spacing: -0.01em;
42-
color: var(--on-surface);
43-
display: flex;
44-
align-items: center;
45-
gap: 0.5rem;
46-
margin: 0;
47-
}
48-
.sg-brand__icon {
49-
width: 1.5rem;
50-
height: 1.5rem;
51-
background: var(--primary);
52-
border-radius: 0.25rem;
53-
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
54-
display: inline-flex;
55-
align-items: center;
56-
justify-content: center;
57-
flex-shrink: 0;
58-
}
59-
.sg-brand__icon .material-symbols-outlined { color: #fff; font-size: 0.875rem; }
6038
</style>
6139
</head>
6240
<body>
@@ -70,8 +48,8 @@ <h1 class="sg-title">Graph Nav</h1>
7048
<div class="sg-card">
7149
<header class="graph-nav">
7250
<div class="graph-nav__left">
73-
<h1 class="sg-brand">
74-
<span class="sg-brand__icon"><span class="material-symbols-outlined">layers</span></span>
51+
<h1 class="graph-nav__brand">
52+
<span class="graph-nav__brand-icon"><span class="material-symbols-outlined">layers</span></span>
7553
Boardtask
7654
</h1>
7755
<div class="graph-nav__divider"></div>
@@ -106,8 +84,8 @@ <h1 class="sg-brand">
10684
<div class="sg-card">
10785
<header class="graph-nav">
10886
<div class="graph-nav__left">
109-
<h1 class="sg-brand">
110-
<span class="sg-brand__icon"><span class="material-symbols-outlined">layers</span></span>
87+
<h1 class="graph-nav__brand">
88+
<span class="graph-nav__brand-icon"><span class="material-symbols-outlined">layers</span></span>
11189
Boardtask
11290
</h1>
11391
<div class="graph-nav__divider"></div>
@@ -146,8 +124,8 @@ <h1 class="sg-brand">
146124
<div class="sg-card">
147125
<header class="graph-nav">
148126
<div class="graph-nav__left">
149-
<h1 class="sg-brand">
150-
<span class="sg-brand__icon"><span class="material-symbols-outlined">layers</span></span>
127+
<h1 class="graph-nav__brand">
128+
<span class="graph-nav__brand-icon"><span class="material-symbols-outlined">layers</span></span>
151129
Boardtask
152130
</h1>
153131
<div class="graph-nav__divider"></div>
@@ -240,6 +218,8 @@ <h1 class="sg-brand">
240218
<tbody style="color:var(--on-surface);">
241219
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav</td><td>Top bar container — glass bg, flex row, border-bottom</td></tr>
242220
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__left</td><td>Left section (brand + divider + title)</td></tr>
221+
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__brand</td><td>App brand title — flex row, typography (see <code>app.css</code>)</td></tr>
222+
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__brand-icon</td><td>Primary-colored icon tile wrapping the glyph</td></tr>
243223
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__divider</td><td>Vertical 1px separator</td></tr>
244224
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__project-title</td><td>Project name text</td></tr>
245225
<tr style="border-bottom:1px solid var(--ghost-border);"><td style="padding:0.35rem 1rem 0.35rem 0; color:var(--primary);">.graph-nav__right</td><td>Right section (stats + meta + actions)</td></tr>

0 commit comments

Comments
 (0)