move items, fix positions

This commit is contained in:
Mutasem 2022-03-29 11:23:08 +02:00
parent fe269797dd
commit 2051ee67f2

View file

@ -75,6 +75,12 @@
</div> </div>
</div> </div>
<div>
<n8n-text v-if="hasNodeRun && dataCount > 0">
{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'node.output.item' : 'node.output.items') }}
</n8n-text>
</div>
<div v-if="!hasNodeRun" :class="$style.center"> <div v-if="!hasNodeRun" :class="$style.center">
<div v-if="workflowRunning"> <div v-if="workflowRunning">
<div :class="$style.spinner"><n8n-spinner /></div> <div :class="$style.spinner"><n8n-spinner /></div>
@ -112,10 +118,6 @@
</div> </div>
<div v-else-if="hasNodeRun && displayMode === 'table' && tableData" :class="$style.dataDisplay"> <div v-else-if="hasNodeRun && displayMode === 'table' && tableData" :class="$style.dataDisplay">
<n8n-text tag="div">
{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'node.output.item' : 'node.output.items') }}
</n8n-text>
<table :class="$style.table"> <table :class="$style.table">
<tr> <tr>
<th v-for="column in (tableData.columns || [])" :key="column">{{column}}</th> <th v-for="column in (tableData.columns || [])" :key="column">{{column}}</th>
@ -126,7 +128,7 @@
</table> </table>
</div> </div>
<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.dataDisplay"> <div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.jsonDisplay">
<vue-json-pretty <vue-json-pretty
:data="jsonData" :data="jsonData"
:deep="10" :deep="10"
@ -703,6 +705,7 @@ export default mixins(
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--spacing-s);
> *:first-child { > *:first-child {
flex-grow: 1; flex-grow: 1;
@ -712,16 +715,19 @@ export default mixins(
.dataDisplay { .dataDisplay {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
top: 60px; top: 98px;
left: 16px; left: 0;
padding-left: var(--spacing-s);
right: 0; right: 0;
overflow-y: auto; overflow-y: auto;
line-height: 1.5; line-height: 1.5;
word-break: normal; word-break: normal;
}
> * { .jsonDisplay {
margin-bottom: var(--spacing-s); composes: dataDisplay;
} background-color: var(--color-background-base);
padding-top: var(--spacing-s);
} }
.table { .table {