Unverified Commit 0e538565 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Improves card component layout and conditional rendering 

Restructures description template logic to use cleaner conditional blocks and adds proper CSS class for styling control.

Optimizes action button rendering by adding length checks to prevent unnecessary DOM elements when no actions are present.

Adjusts margin classes to improve visual spacing consistency across
different action button configurations.

Adds scoped CSS rule to remove bottom margins from paragraph elements within card descriptions for better typography control.
parent 470432ae

client/src/components/Common/GCard.vue

+47 −35
Original line number Diff line number Diff line
@@ -549,16 +549,15 @@ function onKeyDown(event: KeyboardEvent) { 
                        </div>

                    </div>



                    <div :id="getElementId(props.id, 'description')">

                    <div :id="getElementId(props.id, 'description')" class="g-card-description">

                        <slot name="description">

                            <template v-if="props.description">

                                <TextSummary

                                v-if="props.description && !props.fullDescription"

                                    v-if="!props.fullDescription"

                                    :id="getElementId(props.id, 'text-summary')"

                                    :description="props.description" />

                            <div

                                v-else-if="props.description && props.fullDescription"

                                class="mb-2"

                                v-html="renderMarkdown(props.description)" />

                                <div v-else v-html="renderMarkdown(props.description)" />

                            </template>

                        </slot>

                    </div>

                </div>
@@ -598,9 +597,13 @@ function onKeyDown(event: KeyboardEvent) { 
                            </div>

                        </slot>



                        <div class="align-items-center d-flex flex-gapx-1 justify-content-end ml-auto mt-1">

                        <div class="align-items-center d-flex flex-gapx-1 justify-content-end ml-auto">

                            <slot name="secondary-actions">

                                <BButtonGroup :id="getElementId(props.id, 'secondary-actions')" size="sm">

                                <BButtonGroup

                                    v-if="props.secondaryActions?.length"

                                    :id="getElementId(props.id, 'secondary-actions')"

                                    size="sm"

                                    class="mt-1">

                                    <template v-for="sa in props.secondaryActions">

                                        <BButton

                                            v-if="sa.visible ?? true"
@@ -630,12 +633,14 @@ function onKeyDown(event: KeyboardEvent) { 


                            <div :id="getElementId(props.id, 'primary-actions')" class="d-flex flex-gapx-1">

                                <slot name="primary-actions">

                                    <template v-if="props.primaryActions?.length">

                                        <template v-for="pa in props.primaryActions">

                                            <BButton

                                                v-if="pa.visible ?? true"

                                                :id="getActionId(props.id, pa.id)"

                                                :key="pa.id"

                                                v-b-tooltip.hover.noninteractive

                                                class="mt-1"

                                                :disabled="pa.disabled"

                                                :title="localize(pa.title)"

                                                :variant="pa.variant || 'primary'"
@@ -655,6 +660,7 @@ function onKeyDown(event: KeyboardEvent) { 
                                                {{ localize(pa.label) }}

                                            </BButton>

                                        </template>

                                    </template>

                                </slot>

                            </div>

                        </div>
@@ -741,6 +747,12 @@ function onKeyDown(event: KeyboardEvent) { 
            text-overflow: unset;

        }



        .g-card-description {

            :deep(p) {

                margin-bottom: 0;

            }

        }



        .g-card-secondary-action-label {

            @container g-card (max-width: #{$breakpoint-sm}) {

                display: none;