TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-16 19:16:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/style.scss
View File

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

32
components/LocaleList.vue
View File

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