feat(fe): task log view on small screen

semaphoreui · Oct 24, 2021 · f04f1d8 · f04f1d8
1 parent 10b7d41
commit f04f1d8
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 41 deletions.
diff --git a/web2/src/App.vue b/web2/src/App.vue
@@ -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

diff --git a/web2/src/components/TaskLogView.vue b/web2/src/components/TaskLogView.vue
@@ -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;
-  }
 
-  .task-log-view__record {
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-  }
+@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%;
+}
 
-  .task-log-view__time {
-    width: 120px;
-    min-width: 120px;
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .task-log-records {
+    height: calc(100vh - 340px);
   }
 
-  .task-log-view__output {
-    width: 100%;
+  .task-log-view--with-message .task-log-records {
+    height: calc(100vh - 370px);
   }
+}
 </style>
 <script>
 import axios from 'axios';