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

(style) improve appearance of <FilterBar>

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-11-07 13:57:49 +01:00
parent 29bf74c3f0
commit 008d5c7520
4 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/dark.scss
View File

@ -11,6 +11,8 @@ body[data-theme="dark"] {
background-color: $dark !important; background-color: $dark !important;
color: $light; color: $light;
--bs-border-color: rgba(66, 70, 73, 0.5);
a { color: $primary-dark; } a { color: $primary-dark; }
a:hover { color: lighten($primary-dark, 10%); } a:hover { color: lighten($primary-dark, 10%); }
.text-primary { color: $primary-dark !important; } .text-primary { color: $primary-dark !important; }
@ -147,14 +149,6 @@ body[data-theme="dark"] {
.bg-warning.text-dark, .bg-warning.text-dark,
.bg-info.text-dark { color: #212529 !important; } .bg-info.text-dark { color: #212529 !important; }
/* BORDERS */
.border,
.border-top,
.border-end,
.border-bottom,
.border-start { border-color: rgba(66, 70, 73, 0.5) !important; }
/* BREADCRUMB */ /* BREADCRUMB */
.breadcrumb.border { border-color: #333 !important; } .breadcrumb.border { border-color: #333 !important; }

8
assets/style.scss
View File

@ -181,8 +181,14 @@ form[inert] {
margin-left: calc(-50vw + 50% + 3rem); margin-left: calc(-50vw + 50% + 3rem);
margin-right: calc(-50vw + 50% + 3rem); margin-right: calc(-50vw + 50% + 3rem);
} }
}
@include media-breakpoint-up('lg', $grid-breakpoints) {
.body {
margin-top: $header-margin;
}
.sticky-top { .sticky-top {
top: 83px; top: $header-height + 3px;
} }
} }

22
components/FilterBar.vue
View File

@ -24,8 +24,8 @@ defineExpose({
</script> </script>
<template> <template>
<section class="sticky-top pt-md-2"> <section class="sticky-top bg-white rounded">
<div class="input-group bg-white"> <div class="input-group">
<span class="input-group-text"> <span class="input-group-text">
<Icon v="filter" /> <Icon v="filter" />
</span> </span>
@ -48,14 +48,17 @@ defineExpose({
<T>nouns.submit.action</T> <T>nouns.submit.action</T>
</button> </button>
</div> </div>
<div v-if="categories && categories.length > 0" class="btn-group d-flex flex-wrap flex-md-nowrap pt-1 bg-white"> <div
v-if="categories && categories.length > 0"
class="d-flex flex-wrap mt-1 border border-primary rounded overflow-hidden"
>
<button <button
v-for="category of [allCategory, ...categories]" v-for="category of [allCategory, ...categories]"
:key="category.text" :key="category.text"
:class="[ :class="[
'btn btn-sm', 'btn btn-sm btn-wrapped',
filterCategory === category.key ? 'btn-primary' : 'btn-outline-primary', filterCategory === category.key ? 'btn-primary' : 'btn-outline-primary',
'd-flex justify-content-center align-items-center gap-1', 'flex-grow-1 d-flex justify-content-center align-items-center gap-1 rounded-0',
]" ]"
@click="filterCategory = category.key" @click="filterCategory = category.key"
> >
@ -65,3 +68,12 @@ defineExpose({
</div> </div>
</section> </section>
</template> </template>
<style lang="scss" scoped>
.btn-wrapped {
margin-block-start: calc(-1 * var(--bs-btn-border-width));
margin-inline-start: calc(-1 * var(--bs-btn-border-width));
border-block-end: none;
border-inline-end: none;
}
</style>

9
layouts/default.vue
View File

@ -170,15 +170,6 @@ export default defineComponent({
@import "assets/variables"; @import "assets/variables";
@import "~avris-sorter/dist/Sorter.min.css"; @import "~avris-sorter/dist/Sorter.min.css";
@include media-breakpoint-up('lg', $grid-breakpoints) {
.body {
margin-top: $header-margin;
}
.sticky-top {
top: $header-height - 1px;
}
}
.vh { .vh {
min-height: calc(100vh - #{$header-height}); min-height: calc(100vh - #{$header-height});
} }