Kiu/Semaphore
Kiu/Semaphore
1
0
Fork 0
mirror of https://github.com/semaphoreui/semaphore.git synced 2025-01-21 07:49:34 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(fe): task log view on small screen

Browse Source
This commit is contained in:
Denis Gukov 2021-10-24 17:51:22 +05:00
parent 10b7d41285
commit f04f1d8164
2 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web2/src/App.vue
View File

@ -46,13 +46,16 @@
@close="onTaskLogDialogClosed()"
>
<template v-slot:title={}>
<router-link
class="breadcrumbs__item breadcrumbs__item--link"
:to="`/project/${projectId}/templates/${template ? template.id : null}`"
@click="taskLogDialog = false"
>{{ template ? template.alias : null }}</router-link>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">Task #{{ task ? task.id : null }}</span>
<div class="text-truncate" style="max-width: calc(100% - 36px);">
<router-link
class="breadcrumbs__item breadcrumbs__item--link"
:to="`/project/${projectId}/templates/${template ? template.id : null}`"
@click="taskLogDialog = false"
>{{ template ? template.alias : null }}</router-link>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">Task #{{ task ? task.id : null }}</span>
</div>
<v-spacer></v-spacer>
<v-btn
icon

94
web2/src/components/TaskLogView.vue
View File

@ -1,10 +1,11 @@
<template>
<div>
<div class="task-log-view" :class="{'task-log-view--with-message': item.message}">
<v-alert
type="info"
text
v-if="item.message"
>{{ item.message }}</v-alert>
>{{ item.message }}
</v-alert>
<v-container class="pa-0 mb-2">
<v-row no-gutters>
@ -13,21 +14,21 @@
<v-list-item class="pa-0">
<v-list-item-content>
<div>
<TaskStatus :status="item.status" />
<TaskStatus :status="item.status"/>
</div>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list two-line subheader class="pa-0">
<v-list-item class="pa-0">
<v-list-item-content>
<v-list-item-title>Author</v-list-item-title>
<v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-list two-line subheader class="pa-0">
<v-list-item class="pa-0">
<v-list-item-content>
<v-list-item-title>Author</v-list-item-title>
<v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list two-line subheader class="pa-0">
@ -53,12 +54,12 @@
</v-col>
</v-row>
</v-container>
<div class="task-log-view" ref="output">
<div class="task-log-view__record" v-for="record in output" :key="record.id">
<div class="task-log-view__time">
<div class="task-log-records" ref="output">
<div class="task-log-records__record" v-for="record in output" :key="record.id">
<div class="task-log-records__time">
{{ record.time | formatTime }}
</div>
<div class="task-log-view__output">{{ record.output }}</div>
<div class="task-log-records__output">{{ record.output }}</div>
</div>
</div>
@ -72,31 +73,52 @@
</v-btn>
</div>
</template>
<style lang="scss">
.task-log-view {
background: black;
color: white;
height: calc(100vh - 300px);
overflow: auto;
font-family: monospace;
margin: 0 -24px;
padding: 5px 10px;
@import '~vuetify/src/styles/settings/_variables';
.task-log-view {
}
.task-log-records {
background: black;
color: white;
height: calc(100vh - 250px);
overflow: auto;
font-family: monospace;
margin: 0 -24px;
padding: 5px 10px;
}
.task-log-view--with-message .task-log-records {
height: calc(100vh - 300px);
}
.task-log-records__record {
display: flex;
flex-direction: row;
justify-content: left;
}
.task-log-records__time {
width: 120px;
min-width: 120px;
}
.task-log-records__output {
width: 100%;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
.task-log-records {
height: calc(100vh - 340px);
}
.task-log-view__record {
display: flex;
flex-direction: row;
justify-content: left;
}
.task-log-view__time {
width: 120px;
min-width: 120px;
}
.task-log-view__output {
width: 100%;
.task-log-view--with-message .task-log-records {
height: calc(100vh - 370px);
}
}
</style>
<script>
import axios from 'axios';