fix build view ui

web_src/js/components/RepoBuildView.vue

@@ -103,10 +103,6 @@ const sfc = {
   },
 
   mounted() {
-    // TODO: the parent element's full height doesn't work well now
-    const elBodyDiv = document.querySelector('body > div.full.height');
-    elBodyDiv.style.height = '100%';
-
     // load job data and then auto-reload periodically
     this.loadJobData();
     setInterval(() => this.loadJobData(), 1000);
@@ -239,7 +235,7 @@ const sfc = {
       // prepare mock data for logs
       for (const reqCursor of reqData.stepLogCursors) {
         if (!reqCursor.expanded) continue; // backend can decide whether send logs for a step
-        // if (reqCursor.cursor > 100) continue;
+        if (reqCursor.cursor > 100) continue;
         let cursor = reqCursor.cursor; // use cursor to send remaining logs
         const lines = [];
         for (let i = 0; i < 110; i++) {
@@ -317,8 +313,8 @@ export function initRepositoryBuildView() {
   if (!el) return;
 
   const view = createApp(sfc, {
-    jobIndex: el.getAttribute("job-index"),
-    runIndex: el.getAttribute("run-index"),
+    jobIndex: el.getAttribute("data-job-index"),
+    runIndex: el.getAttribute("data-run-index"),
   });
   view.mount(el);
 }
@@ -329,7 +325,7 @@ export function initRepositoryBuildView() {
 
 .build-view-container {
   display: flex;
-  height: 100%;
+  height: calc(100vh - 286px); // fine tune this value to make the main view has full height
 }
 
 
@@ -416,6 +412,12 @@ export function initRepositoryBuildView() {
 
 <style lang="less">
 // some elements are not managed by vue, so we need to use global style
+
+// TODO: the parent element's full height doesn't work well now
+body > div.full.height {
+  padding-bottom: 0;
+}
+
 .job-status-rotate {
   animation: job-status-rotate-keyframes 1s linear infinite;
 }

web_src/less/_base.less

@@ -1755,7 +1755,7 @@ footer {
   .ui {
     &.left,
     &.right {
-      line-height: 40px;
+      line-height: 39px; // there  is a border-top on the footer, so make the line-height 1px less
     }
   }
 }

web_src/less/_repository_build.less

@@ -0,0 +1,14 @@
+.page-content.repository {
+  .build-view-header {
+    height: 60px;
+
+    h1 {
+      font-size: 20px;
+      font-weight: 300;
+    }
+
+    .index {
+      color: var(--color-text-light-2);
+    }
+  }
+}

web_src/less/index.less

@@ -28,6 +28,7 @@
 @import "_install";
 @import "_form";
 @import "_repository";
+@import "_repository_build";
 @import "_editor";
 @import "_organization";
 @import "_user";