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"> <div :class="$style.name">
Version {{version.name}} Version {{version.name}}
</div> </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"> <div :class="$style.released">
Released {{releaseDate}} Released {{releaseDate}}
</div> </div>
</div> </div>
<div> <div>
<div v-html="version.description" :class="$style.description"> <div v-html="version.description" :class="$style.description"></div>
</div>
<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0"> <div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
<NodeIcon <NodeIcon
v-for="node in version.nodes" v-for="node in version.nodes"
@ -52,12 +53,17 @@ export default Vue.extend({
.header { .header {
display: flex; display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #DBDFE7; border-bottom: 1px solid #DBDFE7;
padding-bottom: 15px; padding-bottom: 10px;
> * {
margin-right: 5px;
margin-bottom: 5px;
}
} }
.name { .name {
flex-grow: 1;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
@ -72,13 +78,32 @@ export default Vue.extend({
} }
.released { .released {
flex-grow: 1;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
color: #909399; color: #909399;
text-align: right;
} }
.nodes { .nodes {
display: flex; display: flex;
margin-top: 20px; 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> </style>

View file

@ -10,7 +10,7 @@
</template> </template>
<template slot="content"> <template slot="content">
<section :class="$style['header-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"> <a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
<font-awesome-icon icon="info-circle"></font-awesome-icon> <font-awesome-icon icon="info-circle"></font-awesome-icon>
@ -56,7 +56,7 @@ export default Vue.extend({
'currentVersion', 'currentVersion',
]), ]),
currentReleaseDate() { currentReleaseDate() {
return format(this.currentVersion.createdAt).replace('ago', 'old'); return format(this.currentVersion.createdAt);
}, },
}, },
}); });