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

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

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