Unverified Commit e739a494 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Improves list header sorting UI 

Adds missing BButtonGroup import from Bootstrap
Increases gap between filter elements for improved layout
parent d193ba59

client/src/components/Common/ListHeader.vue

+30 −28
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
import { library } from "@fortawesome/fontawesome-svg-core";

import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { BButton, BFormCheckbox } from "bootstrap-vue";

import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";

import { computed, ref } from "vue";



import { useUserStore } from "@/stores/userStore";
@@ -74,6 +74,7 @@ defineExpose({ 
        </div>



        <div class="list-header-filters">

            <div>

                Sort by:

                <BButtonGroup>

                    <BButton
@@ -100,6 +101,7 @@ defineExpose({ 
                        Update time

                    </BButton>

                </BButtonGroup>

            </div>



            <slot name="extra-filter" />

        </div>
@@ -141,7 +143,7 @@ defineExpose({ 


    .list-header-filters {

        display: flex;

        gap: 0.25rem;

        gap: 1rem;

        flex-wrap: wrap;

        align-items: center;

    }