Skip to content

Commit 16acd7f

Browse files
guerlerguerler
authored
Merge pull request #21026 from itisAliRH/fix-g-card-white-space
[25.1] Fix GCard Layout and White Spaces
2 parents 97d6cc1 + 678a883 commit 16acd7f

File tree

5 files changed

+65
-43
lines changed

5 files changed

+65
-43
lines changed

‎client/src/components/Common/GCard.vue‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ async function toggleBookmark() {
266266
bookmarkLoading.value = false;
267267
}
268268
269-
const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
269+
const { renderMarkdown } = useMarkdown({ noMargin: true, openLinksInNewPage: true });
270270
271271
/**
272272
* Helper functions for generating consistent element IDs
@@ -335,12 +335,13 @@ function onKeyDown(event: KeyboardEvent) {
335335
:id="getElementId(props.id, 'title')"
336336
bold
337337
inline
338-
class="align-items-baseline"
338+
class="d-block"
339339
:size="props.titleSize">
340340
<FontAwesomeIcon
341341
v-if="props.titleIcon?.icon"
342-
:icon="props.titleIcon.icon"
342+
class="mr-1"
343343
:class="props.titleIcon.class"
344+
:icon="props.titleIcon.icon"
344345
:title="props.titleIcon.title"
345346
:size="props.titleIcon.size"
346347
fixed-width />
@@ -516,7 +517,7 @@ function onKeyDown(event: KeyboardEvent) {
516517
<BButton
517518
v-if="(indicator.visible ?? true) && !indicator.disabled"
518519
:id="getIndicatorId(props.id, indicator.id)"
519-
:key="indicator.id"
520+
:key="`${indicator.id}-button`"
520521
v-b-tooltip.hover.noninteractive
521522
class="inline-icon-button"
522523
:title="localize(indicator.title)"
@@ -536,7 +537,7 @@ function onKeyDown(event: KeyboardEvent) {
536537
<FontAwesomeIcon
537538
v-else-if="(indicator.visible ?? true) && indicator.disabled"
538539
:id="getIndicatorId(props.id, indicator.id)"
539-
:key="indicator.id"
540+
:key="`${indicator.id}-icon`"
540541
v-b-tooltip.hover.noninteractive
541542
:title="localize(indicator.title)"
542543
:icon="indicator.icon"
@@ -549,16 +550,15 @@ function onKeyDown(event: KeyboardEvent) {
549550
</div>
550551
</div>
551552

552-
<div :id="getElementId(props.id, 'description')">
553+
<div :id="getElementId(props.id, 'description')" class="g-card-description">
553554
<slot name="description">
554-
<TextSummary
555-
v-if="props.description && !props.fullDescription"
556-
:id="getElementId(props.id, 'text-summary')"
557-
:description="props.description" />
558-
<div
559-
v-else-if="props.description && props.fullDescription"
560-
class="mb-2"
561-
v-html="renderMarkdown(props.description)" />
555+
<template v-if="props.description">
556+
<TextSummary
557+
v-if="!props.fullDescription"
558+
:id="getElementId(props.id, 'text-summary')"
559+
:description="props.description" />
560+
<div v-else v-html="renderMarkdown(props.description)" />
561+
</template>
562562
</slot>
563563
</div>
564564
</div>
@@ -598,9 +598,13 @@ function onKeyDown(event: KeyboardEvent) {
598598
</div>
599599
</slot>
600600

601-
<div class="align-items-center d-flex flex-gapx-1 justify-content-end ml-auto mt-1">
601+
<div class="align-items-center d-flex flex-gapx-1 justify-content-end ml-auto">
602602
<slot name="secondary-actions">
603-
<BButtonGroup :id="getElementId(props.id, 'secondary-actions')" size="sm">
603+
<BButtonGroup
604+
v-if="props.secondaryActions?.length"
605+
:id="getElementId(props.id, 'secondary-actions')"
606+
size="sm"
607+
class="mt-1">
604608
<template v-for="sa in props.secondaryActions">
605609
<BButton
606610
v-if="sa.visible ?? true"
@@ -630,30 +634,33 @@ function onKeyDown(event: KeyboardEvent) {
630634

631635
<div :id="getElementId(props.id, 'primary-actions')" class="d-flex flex-gapx-1">
632636
<slot name="primary-actions">
633-
<template v-for="pa in props.primaryActions">
634-
<BButton
635-
v-if="pa.visible ?? true"
636-
:id="getActionId(props.id, pa.id)"
637-
:key="pa.id"
638-
v-b-tooltip.hover.noninteractive
639-
:disabled="pa.disabled"
640-
:title="localize(pa.title)"
641-
:variant="pa.variant || 'primary'"
642-
:size="pa.size || 'sm'"
643-
:to="pa.to"
644-
:href="pa.href"
645-
:class="{
646-
'inline-icon-button': pa.inline,
647-
[String(pa.class)]: pa.class,
648-
}"
649-
@click.stop="pa.handler">
650-
<FontAwesomeIcon
651-
v-if="pa.icon"
652-
:icon="pa.icon"
653-
:size="pa.size || undefined"
654-
fixed-width />
655-
{{ localize(pa.label) }}
656-
</BButton>
637+
<template v-if="props.primaryActions?.length">
638+
<template v-for="pa in props.primaryActions">
639+
<BButton
640+
v-if="pa.visible ?? true"
641+
:id="getActionId(props.id, pa.id)"
642+
:key="pa.id"
643+
v-b-tooltip.hover.noninteractive
644+
class="mt-1"
645+
:disabled="pa.disabled"
646+
:title="localize(pa.title)"
647+
:variant="pa.variant || 'primary'"
648+
:size="pa.size || 'sm'"
649+
:to="pa.to"
650+
:href="pa.href"
651+
:class="{
652+
'inline-icon-button': pa.inline,
653+
[String(pa.class)]: pa.class,
654+
}"
655+
@click.stop="pa.handler">
656+
<FontAwesomeIcon
657+
v-if="pa.icon"
658+
:icon="pa.icon"
659+
:size="pa.size || undefined"
660+
fixed-width />
661+
{{ localize(pa.label) }}
662+
</BButton>
663+
</template>
657664
</template>
658665
</slot>
659666
</div>

‎client/src/components/Common/TextSummary.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface Props {
1313
oneLineSummary?: boolean;
1414
/** If `true`, doesn't show expand/collapse buttons */
1515
noExpand?: boolean;
16-
/** The component to use for the summary, default = `<p>` */
16+
/** The component to use for the summary, default = `<span>` */
1717
component?: string;
1818
/** If `true`, shows the full text */
1919
showExpandText?: boolean;

‎client/src/components/ScrollList/ScrollList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,13 +223,13 @@ watch(
223223
</slot>
224224
<component
225225
:is="props.gridView ? 'div' : BListGroup"
226+
class="pt-1"
226227
:class="{ 'card-list d-flex flex-wrap': props.gridView }">
227228
<!-- Use component wrapper with v-for to provide proper keying while avoiding layout interference -->
228229
<component
229230
:is="'div'"
230231
v-for="(item, index) in items"
231232
:key="itemKey(item)"
232-
class=""
233233
style="display: contents">
234234
<slot name="item" :item="item" :index="index" />
235235
</component>

‎client/src/components/Workflow/List/WorkflowCardList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>();
9292
</script>
9393

9494
<template>
95-
<div class="workflow-card-list d-flex flex-wrap overflow-auto">
95+
<div class="workflow-card-list d-flex flex-wrap overflow-auto pt-1">
9696
<WorkflowCard
9797
v-for="workflow in workflows"
9898
:ref="props.itemRefs[workflow.id]"

‎client/src/composables/markdown.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,16 @@ function addRuleHeadingIncreaseLevel(engine: MarkdownIt, increaseBy: number) {
6969
};
7070
}
7171

72+
function addRuleNoMargin(engine: MarkdownIt) {
73+
engine.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
74+
const token = tokens[idx];
75+
if (token) {
76+
token.attrPush(["style", "margin:0"]);
77+
}
78+
return self.renderToken(tokens, idx, options);
79+
};
80+
}
81+
7282
/**
7383
* Add a rule that removes newlines after list items.
7484
*/
@@ -138,6 +148,7 @@ interface UseMarkdownOptions {
138148
openLinksInNewPage?: boolean;
139149
increaseHeadingLevelBy?: number;
140150
removeNewlinesAfterList?: boolean;
151+
noMargin?: boolean;
141152
}
142153

143154
type RawMarkdown = string;
@@ -155,6 +166,10 @@ export function useMarkdown(options: UseMarkdownOptions = {}) {
155166
addRuleHeadingIncreaseLevel(mdEngine, options.increaseHeadingLevelBy);
156167
}
157168

169+
if (options.noMargin) {
170+
addRuleNoMargin(mdEngine);
171+
}
172+
158173
if (options.removeNewlinesAfterList) {
159174
addRuleRemoveNewlinesAfterList(mdEngine);
160175
}

0 commit comments

Comments
 (0)