jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add alpha preview brand badge

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-05 13:19:33 -04:00
parent 244be555f9
commit 78a7517de7
5 changed files with 95 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/layouts/main/AppSidebar.vue
View File

@@ -254,9 +254,21 @@
to="/"
>
<span class="brand-mark">S</span>
<div v-if="isExpanded">
<div class="brand-name">Socialize</div>
<div class="brand-caption">{{ t('nav.brandCaption') }}</div>
<div
v-if="isExpanded"
class="brand-copy"
>
<div class="brand-heading">
<span class="brand-name-wrap">
<span class="brand-name">Socialize</span>
<span
class="brand-stage-badge"
:aria-label="t('nav.brandStageLabel')"
>
<span>{{ t('nav.brandStage') }}</span>
</span>
</span>
</div>
</div>
</router-link>
</div>
@@ -635,7 +647,7 @@
}
.brand-link {
@apply flex min-w-0 items-center gap-3 no-underline;
@apply flex min-w-0 items-start gap-3 no-underline;
color: inherit;
}
@@ -643,20 +655,38 @@
@apply w-full justify-center;
}
.brand-copy {
@apply min-w-0;
}
.brand-heading {
@apply flex min-w-0 items-center;
}
.brand-mark {
@apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1.1rem] text-xl font-black;
background: linear-gradient(135deg, #ff8a3d 0%, #ef4444 100%);
color: #fffaf2;
}
.brand-name {
@apply text-lg font-black uppercase tracking-[0.18em];
color: #172033;
.brand-name-wrap {
@apply relative inline-flex min-w-0 items-center;
}
.brand-caption {
@apply text-xs uppercase tracking-[0.24em];
color: #5d6b82;
.brand-name {
@apply min-w-0 text-lg font-black uppercase tracking-[0.18em];
color: #172033;
line-height: 2.75rem;
}
.brand-stage-badge {
@apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
background: rgba(255, 231, 199, 0.46);
border-color: rgba(242, 179, 107, 0.38);
color: #925000;
left: 0;
line-height: 1;
top: calc(100% - 0.45rem);
}
.side-menu {

4
frontend/src/locales/en.json
View File

@@ -443,8 +443,8 @@
}
},
"nav": {
"brandStage": "Preview",
"brandStageLabel": "Product stage: Preview",
"brandStage": "Alpha Preview",
"brandStageLabel": "Product stage: Alpha Preview",
"brandCaption": "Approval workflow",
"workspace": "Workspace",
"notifications": "Notifications",

4
frontend/src/locales/fr.json
View File

@@ -443,8 +443,8 @@
}
},
"nav": {
"brandStage": "Preview",
"brandStageLabel": "Statut du produit : Preview",
"brandStage": "Aperçu alpha",
"brandStageLabel": "Statut du produit : aperçu alpha",
"brandCaption": "Flux d'approbation",
"workspace": "Espace de travail",
"notifications": "Notifications",

35
frontend/src/static/components/LandingSiteMenu.vue
View File

@@ -6,7 +6,17 @@
to="/"
>
<span class="site-brand-mark">S</span>
<span class="site-brand-text">Socialize</span>
<span class="site-brand-heading">
<span class="site-brand-text-wrap">
<span class="site-brand-text">Socialize</span>
<span
class="site-brand-stage-badge"
:aria-label="t('nav.brandStageLabel')"
>
<span>{{ t('nav.brandStage') }}</span>
</span>
</span>
</span>
</router-link>
<nav
@@ -262,7 +272,7 @@
}
.site-brand {
@apply flex min-w-0 items-center gap-3 no-underline;
@apply flex min-w-0 items-start gap-3 no-underline;
color: #172033;
}
@@ -272,8 +282,27 @@
color: #fffaf2;
}
.site-brand-heading {
@apply flex min-w-0 items-center;
}
.site-brand-text-wrap {
@apply relative inline-flex min-w-0 items-center;
}
.site-brand-text {
@apply truncate text-lg font-black uppercase tracking-[0.18em];
line-height: 2.5rem;
}
.site-brand-stage-badge {
@apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
background: rgba(255, 231, 199, 0.46);
border-color: rgba(242, 179, 107, 0.38);
color: #925000;
left: 0;
line-height: 1;
top: calc(100% - 0.45rem);
}
.site-nav {
@@ -390,7 +419,7 @@
}
@media (max-width: 420px) {
.site-brand-text {
.site-brand-heading {
@apply hidden;
}