Commit cdafef9b authored by Alfredo Sumaran's avatar Alfredo Sumaran

Update ItemBuildComponent html structure

parent c0c4b276
......@@ -20,14 +20,42 @@
build: Object,
},
template: `
<div>
<p>
<h5>
<a href="build.url">
{{ build.title }}
<div class="item-build-component">
<div class="item-details">
<h5 class="item-title">
<span class="icon-build-status">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<g fill="#31AF64" fill-rule="evenodd">
<path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/>
<path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/>
</g>
</svg>
</span>
<a :href="build.url" class="item-build-name">
{{ build.name }}
</a>
&middot;
<a href="#" class="pipeline-id">
#{{ build.id }}
</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
<span class="icon-branch">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/>
</svg>
</span>
<a :href="build.commit_url" class="short-sha monospace">da57eb39</a>
</h5>
</p>
<span>
<a :href="build.url" class="issue-date">
{{ build.date }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"></total-time>
</div>
</div>
`,
});
......
......@@ -23,7 +23,7 @@
<div class="item-details">
<img class="avatar" :src="issue.author.avatarUrl">
<h5 class="item-title">
<a :href="issue.url">
<a class="issue-title" :href="issue.url">
{{ issue.title }}
</a>
</h5>
......
......@@ -295,7 +295,7 @@
.item-title {
margin: 0 0 2px 0;
a {
.issue-title {
color: $gl-dark-link-color;
max-width: 100%;
display: block;
......@@ -343,6 +343,49 @@
}
}
// Custom Styles for stage items
.item-build-component {
.item-title {
.icon-build-status {
float: left;
margin-right: 5px;
}
.item-build-name {
color: $gl-title-color;
}
.pipeline-id {
color: $gl-title-color;
padding: 0 3px 0 0;
}
.branch-name {
color: $black;
display: inline-block;
max-width: 180px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 1.3;
vertical-align: top;
}
.short-sha {
color: $gl-link-color;
line-height: 1.3;
vertical-align: top;
font-weight: normal;
}
.fa {
color: $gl-text-color-light;
font-size: $code_font_size;
}
}
}
.empty-stage {
text-align: center;
width: 75%;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment