feat(fe): dashborad style

web2/src/App.vue

@@ -376,6 +376,10 @@
   <v-app v-else></v-app>
 </template>
 <style lang="scss">
+.v-dialog > .v-card > .v-card__title {
+  flex-wrap: nowrap;
+}
+
 .v-data-table tbody tr.v-data-table__expanded__content {
   box-shadow: none !important;
 }

web2/src/views/project/History.vue

@@ -19,39 +19,44 @@
         class="mt-4"
     >
       <template v-slot:item.tpl_alias="{ item }">
-        <div style="display: flex; justify-content: left; align-items: center;">
+        <div class="d-flex">
           <v-icon class="mr-3" small>
             {{ TEMPLATE_TYPE_ICONS[item.tpl_type] }}
           </v-icon>
-          <a :href="
-          '/project/' + item.project_id +
-          '/templates/' + item.template_id"
-          >{{ item.tpl_alias }}</a>
-          <v-icon small class="ml-1 mr-1">mdi-arrow-right</v-icon>
+
           <TaskLink
               :task-id="item.id"
               :tooltip="item.message"
               :label="'#' + item.id"
           />
-          <TaskLink
-              :disabled="item.tpl_type === 'build'"
-              class="ml-2"
-              v-if="item.tpl_type !== ''"
-              :status="item.status"
 
-              :task-id="item.tpl_type === 'build'
+          <v-icon small class="ml-1 mr-1">mdi-arrow-left</v-icon>
+
+          <a :href="
+          '/project/' + item.project_id +
+          '/templates/' + item.template_id"
+          >{{ item.tpl_alias }}</a>
+        </div>
+      </template>
+      <template v-slot:item.version="{ item }">
+        <TaskLink
+            :disabled="item.tpl_type === 'build'"
+            class="ml-2"
+            v-if="item.tpl_type !== ''"
+            :status="item.status"
+
+            :task-id="item.tpl_type === 'build'
               ? item.id
               : item.build_task.id"
 
-              :label="item.tpl_type === 'build'
+            :label="item.tpl_type === 'build'
               ? item.version
               : item.build_task.version"
 
-              :tooltip="item.tpl_type === 'build'
+            :tooltip="item.tpl_type === 'build'
               ? item.message
               : item.build_task.message"
-          />
-        </div>
+        />
       </template>
 
       <template v-slot:item.status="{ item }">
@@ -123,10 +128,15 @@ export default {
     getHeaders() {
       return [
         {
-          text: 'Task',
+          text: 'Template',
           value: 'tpl_alias',
           sortable: false,
         },
+        {
+          text: 'Version',
+          value: 'version',
+          sortable: false,
+        },
         {
           text: 'Status',
           value: 'status',

web2/src/views/project/TemplateView.vue

@@ -91,7 +91,7 @@
       </v-btn>
     </v-toolbar>
 
-    <v-container class="pa-0">
+    <v-container>
 
       <v-alert
           text
@@ -103,7 +103,7 @@
 
       <v-row>
         <v-col>
-          <v-list two-line subheader>
+          <v-list subheader dense>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-book-play</v-icon>
@@ -117,7 +117,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list two-line subheader>
+          <v-list subheader dense>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>{{ TEMPLATE_TYPE_ICONS[item.type] }}</v-icon>
@@ -131,7 +131,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list two-line subheader>
+          <v-list subheader dense>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-monitor</v-icon>
@@ -147,7 +147,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list two-line subheader>
+          <v-list subheader dense>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-code-braces</v-icon>
@@ -162,7 +162,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list two-line subheader>
+          <v-list subheader dense>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-git</v-icon>

web2/src/views/project/Templates.vue

@@ -169,10 +169,18 @@
     />
   </div>
 </template>
-<style>
+<style lang="scss">
+@import '~vuetify/src/styles/settings/_variables';
+
 .templates-table .text-start:first-child {
   padding-right: 0 !important;
 }
+
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .templates-table .v-data-table__mobile-row:first-child {
+    display: none !important;
+  }
+}
 </style>
 <script>
 import ItemListPageBase from '@/components/ItemListPageBase';