mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
b8c5db48a6
Fix #820 Ok, so after I would have to use the same method in three different locations (`<ds-card>` expects an `image` attribute but cannot render entire components) I decided to implement the prefix of image urls with a filter rather than a component. The downside of this is that we have to add the filter on a lot of component tests. The benefit is less components and hopefully less complexity.
69 lines
1.2 KiB
Vue
69 lines
1.2 KiB
Vue
<template>
|
|
<div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
|
|
<div v-for="badge in badges" :key="badge.key" class="hc-badge-container">
|
|
<img :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
badges: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hc-badges {
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
.hc-badge-container {
|
|
display: inline-block;
|
|
position: unset;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.hc-badge {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
$size: 30px;
|
|
$offset: $size * -0.2;
|
|
|
|
&.hc-badges-dual {
|
|
padding-top: $size / 2 - 2;
|
|
}
|
|
|
|
.hc-badge-container {
|
|
width: $size;
|
|
height: 26px;
|
|
margin-left: -1px;
|
|
|
|
&:nth-child(3n - 1) {
|
|
margin-top: -$size - $offset - 3;
|
|
margin-left: -$size * 0.33 - $offset - 2;
|
|
}
|
|
&:nth-child(3n + 0) {
|
|
margin-top: $size + $offset + 3;
|
|
margin-left: -$size;
|
|
}
|
|
&:nth-child(3n + 1) {
|
|
margin-left: -6px;
|
|
}
|
|
&:first-child {
|
|
margin-left: -$size / 3;
|
|
}
|
|
&:last-child {
|
|
margin-right: -$size / 3;
|
|
}
|
|
}
|
|
}
|
|
</style>
|