opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-24 02:04:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17721 from itisAliRH/fix-workflow-card-name-bleed

Browse Source 
[24.0] Fix Workflow Name Display in `WorkflowCard` to Prevent Bleeding Over Borders
This commit is contained in:
Martin Cech
2024-03-15 17:27:40 +01:00
committed by GitHub
parent ed069852b9 73d14be99b
commit 98564d7d4a
2 changed files with 55 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Workflow/WorkflowActions.vue
+1 -1
View File
@@ -242,7 +242,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
:data-workflow-actions-dropdown="workflow.id"
right
no-caret
class="workflow-actions-dropdown show-in-card"
class="workflow-actions-dropdown"
toggle-class="inline-icon-button"
title="Workflow actions"
variant="link">
client/src/components/Workflow/WorkflowCard.vue
+54 -72
View File
@@ -123,38 +123,34 @@ async function onTagClick(tag: string) {
:class="{
'workflow-shared': workflow.published,
}">
<div>
<div class="d-flex justify-content-between align-items-center mb-1">
<div>
<WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
<div class="workflow-card-header">
<WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
<span class="workflow-name font-weight-bold">
{{ workflow.name }}
<BButton
v-if="!shared && !workflow.deleted"
v-b-tooltip.hover.noninteractive
:data-workflow-rename="workflow.id"
class="inline-icon-button workflow-rename"
variant="link"
size="sm"
title="Rename"
@click="showRename = !showRename">
<FontAwesomeIcon :icon="faPen" fixed-width />
</BButton>
</span>
</div>
<div class="workflow-count-actions">
<WorkflowInvocationsCount v-if="!isAnonymous && !shared" class="mx-1" :workflow="workflow" />
<div class="workflow-count-actions">
<WorkflowInvocationsCount v-if="!isAnonymous && !shared" class="mx-1" :workflow="workflow" />
<WorkflowActions
:workflow="workflow"
:published="publishedView"
@refreshList="emit('refreshList', true)"
@toggleShowPreview="toggleShowPreview" />
</div>
<WorkflowActions
:workflow="workflow"
:published="publishedView"
@refreshList="emit('refreshList', true)"
@toggleShowPreview="toggleShowPreview" />
</div>
<span class="workflow-name font-weight-bold">
{{ workflow.name }}
<BButton
v-if="!shared && !workflow.deleted"
v-b-tooltip.hover.noninteractive
:data-workflow-rename="workflow.id"
class="inline-icon-button workflow-rename"
variant="link"
size="sm"
title="Rename"
@click="showRename = !showRename">
<FontAwesomeIcon :icon="faPen" fixed-width />
</BButton>
</span>
<TextSummary
v-if="description"
class="my-1"
@@ -272,47 +268,53 @@ async function onTagClick(tag: string) {
border-radius: 0.5rem;
padding: 0.5rem;
.workflow-count-actions {
display: flex;
align-self: baseline;
align-items: center;
flex-direction: row;
&.workflow-shared {
border-left: 0.25rem solid $brand-primary;
}
.text-summary {
height: inherit;
}
.workflow-card-header {
display: grid;
.workflow-name {
font-size: 1rem;
font-weight: bold;
}
.workflow-count-actions {
display: flex;
align-items: center;
flex-direction: row;
position: absolute;
right: 0.5rem;
}
.workflow-card-actions {
display: flex;
gap: 0.25rem;
margin-top: 0.25rem;
align-items: center;
justify-content: end;
.workflow-name {
font-size: 1rem;
font-weight: bold;
word-break: break-all;
}
}
.workflow-card-footer {
display: flex;
justify-content: space-between;
align-items: end;
}
.workflow-card-tags {
max-width: 60%;
.workflow-card-tags {
max-width: 60%;
}
.workflow-card-actions {
display: flex;
gap: 0.25rem;
margin-top: 0.25rem;
align-items: center;
justify-content: end;
}
}
@container workflow-card (max-width: #{$breakpoint-sm}) {
.workflow-card-footer {
display: inline-block;
}
.workflow-card-tags {
max-width: 100%;
.workflow-card-tags {
max-width: 100%;
}
}
}
@@ -329,19 +331,7 @@ async function onTagClick(tag: string) {
}
}
.workflow-shared {
border-left: 0.25rem solid $brand-primary;
}
@container workflow-card (max-width: #{$breakpoint-md}) {
.hide-in-card {
display: none !important;
}
.show-in-card {
display: inline-block !important;
}
.workflow-count-actions {
align-items: baseline;
justify-content: end;
@@ -353,14 +343,6 @@ async function onTagClick(tag: string) {
align-items: end;
flex-direction: column-reverse;
}
.hide-in-card {
display: inline-block !important;
}
.show-in-card {
display: none !important;
}
}
}
</style>