From 15b64c6abb0f83eab4e87695952b1355f270c02f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 19 Dec 2019 13:11:01 +0100
Subject: [PATCH] Fix action listing alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
apps/workflowengine/src/components/Operation.vue | 8 +++++---
apps/workflowengine/src/components/Workflow.vue | 2 +-
apps/workflowengine/src/styles/operation.scss | 6 +++++-
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 269dce69613..47a40eca950 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -4,9 +4,11 @@
<div class="actions__item__description">
<h3>{{ operation.name }}</h3>
<small>{{ operation.description }}</small>
- <button v-if="colored">
- {{ t('workflowengine', 'Add new flow') }}
- </button>
+ <div>
+ <button v-if="colored">
+ {{ t('workflowengine', 'Add new flow') }}
+ </button>
+ </div>
</div>
<div class="actions__item_options">
<slot />
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 8166a6abcef..d94d2bf90a5 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -108,7 +108,7 @@ export default {
.actions {
display: flex;
flex-wrap: wrap;
- max-width: 900px;
+ max-width: 1200px;
.actions__item {
max-width: 280px;
flex-basis: 250px;
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index ac3d304cd79..c3ca64465e0 100644
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -9,7 +9,7 @@
margin-right: 20px;
margin-bottom: 20px;
}
-.icon {
+.actions__item .icon {
display: block;
width: 100%;
height: 50px;
@@ -21,6 +21,9 @@
}
.actions__item__description {
text-align: center;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
}
.actions__item_options {
width: 100%;
@@ -38,6 +41,7 @@ h3 {
}
small {
font-size: 10pt;
+ flex-grow: 1;
}
.colored:not(.more) {
--
GitLab