From 2364fc84d78df931c5fc020f7fd052d980f8a7bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 2 Sep 2019 12:11:19 +0200
Subject: [PATCH] Make rule listing more compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
.../src/components/Operation.vue | 20 +++++++++++++++++--
apps/workflowengine/src/components/Rule.vue | 4 ++--
2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 346b28e6b9d..45b0f24223d 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -1,8 +1,10 @@
<template>
<div class="actions__item" :class="{'colored': colored}" :style="{ backgroundColor: colored ? operation.color : 'transparent' }">
<div class="icon" :class="operation.iconClass" :style="{ backgroundImage: operation.iconClass ? '' : `url(${operation.icon})` }" />
+ <div class="actions__item__description">
<h3>{{ operation.name }}</h3>
<small>{{ operation.description }}</small>
+ </div>
<slot />
</div>
</template>
@@ -32,7 +34,7 @@ export default {
padding: 10px;
border-radius: var(--border-radius-large);
margin-right: 20px;
- margin-bottom: 20px;
+ margin-bottom: 5px;
}
.icon {
display: block;
@@ -44,9 +46,11 @@ export default {
margin-bottom: 20px;
background-repeat: no-repeat;
}
+ .actions__item__description {
+ text-align: center;
+ }
h3, small {
padding: 6px;
- text-align: center;
display: block;
}
h3 {
@@ -66,7 +70,19 @@ export default {
}
.actions__item:not(.colored) {
+ flex-direction: row;
+
+ .actions__item__description {
+ padding-top: 5px;
+ text-align: left;
+ small {
+ padding: 0;
+ }
+ }
.icon {
+ width: 50px;
+ margin: 0;
+ margin-right: 10px;
filter: invert(1);
}
}
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 88129525eb3..d3cf7291af4 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -155,6 +155,7 @@ export default {
transition: 0.5s ease all;
display: block;
margin: auto;
+ margin-right: 0;
}
.status-button.primary {
padding-left: 32px;
@@ -194,7 +195,7 @@ export default {
}
}
.icon-confirm {
- background-position: right center;
+ background-position: right 27px;
padding-right: 20px;
margin-right: 20px;
}
@@ -202,7 +203,6 @@ export default {
.trigger p, .action p {
display: flex;
align-items: center;
- margin-bottom: 5px;
& > span {
min-width: 50px;
--
GitLab