clean up badges

This commit is contained in:
Mutasem 2021-07-01 17:42:01 +02:00
parent 60cd7c2a50
commit 003fbca951
2 changed files with 31 additions and 6 deletions

View file

@ -4,13 +4,14 @@
<div :class="$style.name">
Version {{version.name}}
</div>
<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag>
<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag>
<div :class="$style.released">
Released {{releaseDate}}
</div>
</div>
<div>
<div v-html="version.description" :class="$style.description">
</div>
<div v-html="version.description" :class="$style.description"></div>
<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
<NodeIcon
v-for="node in version.nodes"
@ -52,12 +53,17 @@ export default Vue.extend({
.header {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #DBDFE7;
padding-bottom: 15px;
padding-bottom: 10px;
> * {
margin-right: 5px;
margin-bottom: 5px;
}
}
.name {
flex-grow: 1;
font-weight: 600;
font-size: 16px;
line-height: 18px;
@ -72,13 +78,32 @@ export default Vue.extend({
}
.released {
flex-grow: 1;
font-size: 12px;
line-height: 18px;
color: #909399;
text-align: right;
}
.nodes {
display: flex;
margin-top: 20px;
}
.security-update {
line-height: 18px;
max-height: 18px;
}
.breaking-change {
background-color: rgba(255, 229, 100, 0.3);
color: #6B5900;
border: none;
font-size: 11px;
line-height: 18px;
max-height: 18px;
font-weight: 400;
display: flex;
align-items: center;
}
</style>

View file

@ -10,7 +10,7 @@
</template>
<template slot="content">
<section :class="$style['header-content']">
<p>Youre on {{ currentVersion.name }}, which is <strong>{{currentReleaseDate}}</strong> and {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>
<p>Youre on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>
<a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
<font-awesome-icon icon="info-circle"></font-awesome-icon>
@ -56,7 +56,7 @@ export default Vue.extend({
'currentVersion',
]),
currentReleaseDate() {
return format(this.currentVersion.createdAt).replace('ago', 'old');
return format(this.currentVersion.createdAt);
},
},
});