(home) fix borders in the two-column layout for locale selector

This commit is contained in:
Andrea Vos 2024-06-05 19:43:38 +02:00
parent dd942dafc0
commit a3dc1a26f5
2 changed files with 19 additions and 17 deletions

View File

@ -239,8 +239,8 @@ form[disabled] {
.list-group-item-hoverable {
&:hover {
color: $primary;
border-inline-start: 3px solid $primary;
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
border-inline-start: 3px solid $primary !important;
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px) !important;
}
}
.list-group-item-active {

View File

@ -1,19 +1,21 @@
<template>
<div class="list-group d-flex flex-wrap flex-row">
<template v-for="(options, locale) in locales">
<a
v-if="filter === '' || options.matches(filter)"
:key="locale"
:href="options.url"
class="list-group-item list-group-item-action list-group-item-hoverable w-md-50"
>
<div class="h3">
<LocaleIcon :locale="options" class="mx-2" />
{{ options.name }}
<small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
</div>
</a>
</template>
<div class="border rounded overflow-hidden">
<div class="list-group d-flex flex-wrap flex-row list-group-flush">
<template v-for="(options, locale) in locales">
<a
v-if="filter === '' || options.matches(filter)"
:key="locale"
:href="options.url"
class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
>
<div class="h3">
<LocaleIcon :locale="options" class="mx-2" />
{{ options.name }}
<small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
</div>
</a>
</template>
</div>
</div>
</template>