address comments

This commit is contained in:
Mutasem 2021-07-08 12:13:30 +02:00
parent e174c1ddfd
commit adda05de9a
3 changed files with 19 additions and 9 deletions

View file

@ -632,8 +632,8 @@ a.logo {
}
.notification {
height: 6px;
width: 6px;
height: 8px;
width: 8px;
border-radius: 50%;
color: $--sidebar-active-color;
position: absolute;
@ -643,11 +643,11 @@ a.logo {
display: flex;
align-items: center;
justify-content: center;
top: -1px;
top: -2.5px;
div {
height: 4px;
width: 4px;
height: 6px;
width: 6px;
background-color: $--color-primary;
border-radius: 50%;
}

View file

@ -65,7 +65,7 @@ export default Vue.extend({
margin-bottom: 30px;
p {
font-size: 14px;
font-size: 16px;
line-height: 22px;
color: $--updates-panel-description-text-color;
font-weight: 400;

View file

@ -18,7 +18,7 @@
</div>
<div>
<div v-html="version.description" :class="$style.description"></div>
<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
<div :class="`${$style.nodes} ${hasMoreThan2Rows ? $style.expanded: ''}`" v-if="version.nodes && version.nodes.length > 0">
<NodeIcon
v-for="node in version.nodes"
:key="node.name"
@ -33,6 +33,7 @@
import Vue from 'vue';
import { format } from 'timeago.js';
import NodeIcon from './NodeIcon.vue';
import { IVersion } from '@/Interface';
export default Vue.extend({
@ -43,6 +44,10 @@ export default Vue.extend({
releaseDate() {
return format(this.version.createdAt);
},
hasMoreThan2Rows(): boolean {
const version = this.version as IVersion;
return version.nodes && version.nodes.length > 20;
},
},
});
</script>
@ -53,7 +58,7 @@ export default Vue.extend({
border: $--version-card-border;
border-radius: 8px;
display: block;
padding: 15px;
padding: 16px;
text-decoration: none;
&:hover {
@ -99,6 +104,7 @@ export default Vue.extend({
.released {
font-size: 12px;
line-height: 18px;
font-weight: 400;
color: $--version-card-release-date-text-color;
}
@ -106,7 +112,11 @@ export default Vue.extend({
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-row-gap: 5px;
margin-block-start: 15px;
margin-block-start: 24px;
}
.expanded {
grid-row-gap: 8px;
}
.badge {