TPsoft.org/Nutrio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved label in MacroBadge.vue

Browse Source
This commit is contained in:
Igor Miňo
2026-02-14 13:09:33 +01:00
parent ee144847bd
commit be3c355b37
3 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/assets/css/style.css
View File

@ -589,7 +589,13 @@ select {
.totals-card__kcal { .totals-card__kcal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--space-sm); }
.totals-card__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-md);
} }
.totals-card__kcal-label { .totals-card__kcal-label {
@ -623,18 +629,30 @@ select {
justify-content: flex-end; justify-content: flex-end;
} }
.macro-badge-group--nowrap {
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
scrollbar-width: thin;
}
.macro-badge { .macro-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.2rem;
border-radius: 999px; border-radius: 999px;
padding: 0.24rem 0.56rem; padding: 0.24rem 0.56rem;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 0.76rem; font-size: 0.76rem;
font-weight: 600; font-weight: 400;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
} }
.macro-badge__value {
font-weight: 700;
}
.macro-badge--protein { .macro-badge--protein {
color: var(--macro-protein); color: var(--macro-protein);
border-color: color-mix(in srgb, var(--macro-protein) 30%, var(--color-border)); border-color: color-mix(in srgb, var(--macro-protein) 30%, var(--color-border));

3
frontend/src/components/common/MacroBadge.vue
View File

@ -23,6 +23,7 @@ const formattedGrams = computed(() => {
<template> <template>
<span :class="['macro-badge', `macro-badge--${macro}`]"> <span :class="['macro-badge', `macro-badge--${macro}`]">
{{ label }} {{ formattedGrams }}g <span>{{ label }}</span>
<strong class="macro-badge__value">{{ formattedGrams }}g</strong>
</span> </span>
</template> </template>

4
frontend/src/components/today/DayTotalsCard.vue
View File

@ -13,15 +13,17 @@ const { t } = useI18n()
<template> <template>
<section class="card totals-card"> <section class="card totals-card">
<h3>{{ t('today.dayTotals') }}</h3> <h3>{{ t('today.dayTotals') }}</h3>
<div class="totals-card__row">
<div class="totals-card__kcal"> <div class="totals-card__kcal">
<span class="totals-card__kcal-label">{{ t('common.kcalUnit') }}</span> <span class="totals-card__kcal-label">{{ t('common.kcalUnit') }}</span>
<strong class="totals-card__kcal-value">{{ totals.kcal }}</strong> <strong class="totals-card__kcal-value">{{ totals.kcal }}</strong>
</div> </div>
<div class="macro-badge-group"> <div class="macro-badge-group macro-badge-group--right macro-badge-group--compact macro-badge-group--nowrap">
<MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="totals.protein_g" /> <MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="totals.protein_g" />
<MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="totals.carbs_g" /> <MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="totals.carbs_g" />
<MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="totals.fat_g" /> <MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="totals.fat_g" />
<MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="totals.fiber_g" /> <MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="totals.fiber_g" />
</div> </div>
</div>
</section> </section>
</template> </template>