Skip to content

Commit

Permalink
Update chips design
Browse files Browse the repository at this point in the history
  • Loading branch information
@karlomikus
karlomikus committed Dec 15, 2024
1 parent 5b7a3ba commit c2c12c3
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 16 deletions.
8 changes: 4 additions & 4 deletions src/assets/chips.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.item-details__chips {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
gap: var(--gap-size-2);
margin-bottom: 1rem;
}

.item-details__chips__group__title {
font-size: 0.7rem;
margin-bottom: 0.2rem;
font-size: 0.65rem;
margin-bottom: -2px;
color: var(--clr-gray-600);
}

Expand All @@ -25,7 +25,7 @@
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
gap: var(--gap-size-2);
}

.chip {
Expand Down
10 changes: 5 additions & 5 deletions src/components/Cocktail/CocktailDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,39 +543,39 @@ fetchShoppingList()
<div class="item-details__chips__group__title">{{ t('tag.tags') }}:</div>
<ul class="chips-list">
<li v-for="tag in cocktail.tags" :key="tag.id">
<RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
<RouterLink :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
</li>
</ul>
</div>
<div v-if="cocktail.glass" class="item-details__chips__group">
<div class="item-details__chips__group__title">{{ t('glass-type.title') }}:</div>
<ul class="chips-list">
<li>
<RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
<RouterLink :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
</li>
</ul>
</div>
<div v-if="cocktail.method" class="item-details__chips__group">
<div class="item-details__chips__group__title">{{ t('method.title') }}:</div>
<ul class="chips-list">
<li>
<RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
<RouterLink :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
</li>
</ul>
</div>
<div v-if="cocktail.abv && cocktail.abv > 0" class="item-details__chips__group">
<div class="item-details__chips__group__title">{{ t('ABV') }}:</div>
<ul class="chips-list">
<li>
<RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
<RouterLink :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
</li>
</ul>
</div>
<div v-if="cocktail.rating" class="item-details__chips__group">
<div class="item-details__chips__group__title">{{ t('avg-rating') }}:</div>
<ul class="chips-list">
<li>
<RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
<RouterLink :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
</li>
</ul>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Ingredient/IngredientDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ import UnitHandler from '../../UnitHandler.js'
<h3 class="page-subtitle">{{ $t('see-also') }}</h3>
<ul class="ingredient-chips-list">
<li v-for="variety in ingredient.varieties" :key="variety.slug">
<RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: variety.slug } }">{{ variety.name }}</RouterLink>
<RouterLink :to="{ name: 'ingredients.show', params: { id: variety.slug } }">{{ variety.name }}</RouterLink>
</li>
</ul>
</div>
<div v-if="ingredient.used_as_substitute_for && ingredient.used_as_substitute_for.length > 0">
<h3 class="page-subtitle">{{ $t('ingredient.used_as_substitute_for') }}</h3>
<ul class="ingredient-chips-list">
<li v-for="s in ingredient.used_as_substitute_for" :key="s.slug">
<RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
<RouterLink :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
</li>
<li>
<RouterLink :to="{name: 'cocktails', query: {'filter[ingredient_substitute_id]': ingredient.id}}">
Expand All @@ -47,7 +47,7 @@ import UnitHandler from '../../UnitHandler.js'
<h3 class="page-subtitle">{{ $t('ingredient.can_be_substituted_with') }}</h3>
<ul class="ingredient-chips-list">
<li v-for="s in ingredient.can_be_substituted_with" :key="s.slug">
<RouterLink class="chip" :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
<RouterLink :to="{ name: 'ingredients.show', params: { id: s.slug } }">{{ s.name }}</RouterLink>
</li>
</ul>
</div>
Expand Down Expand Up @@ -87,23 +87,23 @@ import UnitHandler from '../../UnitHandler.js'
<div class="item-details__chips__group__title">{{ $t('strength') }}:</div>
<ul v-if="ingredient.strength > 0" class="chips-list">
<li>
<span class="chip"><abbr :title="$t('ABV-definition')">{{ $t('ABV') }}</abbr>: {{ ingredient.strength + '%' }}</span>
<span><abbr :title="$t('ABV-definition')">{{ $t('ABV') }}</abbr>: {{ ingredient.strength + '%' }}</span>
</li>
<li>
<span class="chip">{{ $t('alcohol-proof') }}: {{ ingredient.strength * 2 }}</span>
<span>{{ $t('alcohol-proof') }}: {{ ingredient.strength * 2 }}</span>
</li>
</ul>
<ul v-else class="chips-list">
<li>
<span class="chip">{{ $t('non-alcoholic') }}</span>
<span>{{ $t('non-alcoholic') }}</span>
</li>
</ul>
</div>
<div v-if="ingredient.origin" class="item-details__chips__group">
<div class="item-details__chips__group__title">{{ $t('origin') }}:</div>
<ul class="chips-list">
<li>
<span class="chip">{{ ingredient.origin }}</span>
<span>{{ ingredient.origin }}</span>
</li>
</ul>
</div>
Expand Down

0 comments on commit c2c12c3

Please sign in to comment.