mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
- added badge definitions for test purposes
- added next layout stage
This commit is contained in:
Sebastian Stein
parent
ba9fbfe3a7
commit
1e97ec1143
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
|
||||
<div v-for="badge in badges" :key="badge.id" class="hc-badge-container">
|
||||
<img :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
|
||||
<div
|
||||
v-for="badge in badges"
|
||||
:key="badge.id"
|
||||
:class="['hc-badge-container', badge.type]"
|
||||
:title="badge.title"
|
||||
>
|
||||
<img v-if="badge.icon" :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,22 +26,34 @@ export default {
|
||||
.hc-badges {
|
||||
position: relative;
|
||||
|
||||
$badge-size: 30px;
|
||||
$main-badge-size: 60px;
|
||||
$gap-x: -2px;
|
||||
$gap-y: 2px;
|
||||
$slot-x: $badge-size + $gap-x;
|
||||
$slot-y: $badge-size + $gap-y;
|
||||
$offset-y: ($badge-size) / 2 - 2 * $gap-x;
|
||||
$badge-size-x: 30px;
|
||||
$badge-size-y: 26px;
|
||||
$main-badge-size-x: 60px;
|
||||
$main-badge-size-y: 52px;
|
||||
$gap-x: -6px;
|
||||
$gap-y: 1px;
|
||||
$slot-x: $badge-size-x + $gap-x;
|
||||
$slot-y: $badge-size-y + $gap-y;
|
||||
$offset-y: ($badge-size-y) / 2 - 2 * $gap-x;
|
||||
|
||||
width: calc($main-badge-size + 4 * $badge-size + 4 * $gap-x);
|
||||
height: calc(3 * $badge-size + 4 * $gap-y);
|
||||
width: calc($main-badge-size-x + 4 * $badge-size-x + 4 * $gap-x);
|
||||
height: calc(3 * $badge-size-y + 4 * $gap-y);
|
||||
margin: auto;
|
||||
|
||||
.hc-badge-container {
|
||||
position: absolute;
|
||||
width: $badge-size;
|
||||
height: $badge-size;
|
||||
width: $badge-size-x;
|
||||
height: $badge-size-y;
|
||||
background-image: url('/img/badges/slot-empty.svg');
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hc-badge {
|
||||
@ -46,56 +63,100 @@ export default {
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(1) {
|
||||
width: $main-badge-size;
|
||||
height: $main-badge-size;
|
||||
width: $main-badge-size-x;
|
||||
height: $main-badge-size-y;
|
||||
top: $offset-y + calc($gap-y / 2);
|
||||
left: 0;
|
||||
font-size: 20px; /* Doubled font size for first slot */
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(2) {
|
||||
top: $offset-y + calc(-1 * $gap-y / 2);
|
||||
left: calc($main-badge-size + $gap-x);
|
||||
left: calc($main-badge-size-x + $gap-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(3) {
|
||||
top: $offset-y + calc($slot-y + $gap-y / 2);
|
||||
left: calc($main-badge-size + $gap-x);
|
||||
left: calc($main-badge-size-x + $gap-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(4) {
|
||||
top: $offset-y + calc(-1 * $badge-size / 2 - 2 * $gap-y);
|
||||
left: calc($main-badge-size + $gap-x + $slot-x);
|
||||
top: $offset-y + calc(-1 * $badge-size-y / 2 - 2 * $gap-y);
|
||||
left: calc($main-badge-size-x + $gap-x + $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(5) {
|
||||
top: $offset-y + calc($badge-size / 2);
|
||||
left: calc($main-badge-size + $gap-x + $slot-x);
|
||||
top: $offset-y + calc($badge-size-y / 2);
|
||||
left: calc($main-badge-size-x + $gap-x + $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(6) {
|
||||
top: $offset-y + calc(1.5 * $badge-size + 2 * $gap-y);
|
||||
left: calc($main-badge-size + $gap-x + $slot-x);
|
||||
top: $offset-y + calc(1.5 * $badge-size-y + 2 * $gap-y);
|
||||
left: calc($main-badge-size-x + $gap-x + $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(7) {
|
||||
top: $offset-y + calc(-1 * $gap-y / 2);
|
||||
left: calc($main-badge-size + $gap-x + 2 * $slot-x);
|
||||
left: calc($main-badge-size-x + $gap-x + 2 * $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(8) {
|
||||
top: $offset-y + calc($slot-y + $gap-y / 2);
|
||||
left: calc($main-badge-size + $gap-x + 2 * $slot-x);
|
||||
left: calc($main-badge-size-x + $gap-x + 2 * $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(9) {
|
||||
top: $offset-y + calc($slot-y - ($badge-size / 2) - $gap-y);
|
||||
left: calc($main-badge-size + $gap-x + 3 * $slot-x);
|
||||
top: $offset-y + calc($slot-y - ($badge-size-y / 2) - $gap-y);
|
||||
left: calc($main-badge-size-x + $gap-x + 3 * $slot-x);
|
||||
}
|
||||
|
||||
.hc-badge-container:nth-child(10) {
|
||||
top: $offset-y + calc($badge-size * 1.5 + 2 * $gap-y);
|
||||
left: calc($main-badge-size + $gap-x + 3 * $slot-x);
|
||||
top: $offset-y + calc($badge-size-y * 1.5 + 2 * $gap-y);
|
||||
left: calc($main-badge-size-x + $gap-x + 3 * $slot-x);
|
||||
}
|
||||
|
||||
.nordrhein-westfalen::after {
|
||||
content: "NW";
|
||||
}
|
||||
|
||||
.test-express::after {
|
||||
content: "TE";
|
||||
}
|
||||
|
||||
.liberation-express::after {
|
||||
content: "LE";
|
||||
}
|
||||
|
||||
.nachweis-express::after {
|
||||
content: "NE";
|
||||
}
|
||||
|
||||
.maskenfrei-express::after {
|
||||
content: "ME";
|
||||
}
|
||||
|
||||
.beitragsblocker::after {
|
||||
content: "BB";
|
||||
}
|
||||
|
||||
.beitragsstopper::after {
|
||||
content: "BS";
|
||||
}
|
||||
|
||||
.masern-impfbloker::after {
|
||||
content: "MI";
|
||||
}
|
||||
|
||||
.rundfunk-alarm::after {
|
||||
content: "RA";
|
||||
}
|
||||
|
||||
.freunde-der-demokratie::after {
|
||||
content: "FD";
|
||||
}
|
||||
|
||||
.restart-democracy::after {
|
||||
content: "RD";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -263,15 +263,21 @@ export default {
|
||||
user() {
|
||||
const user = this.User ? this.User[0] : {}
|
||||
|
||||
// Only for test purposes!
|
||||
if (user.badges && user.badges.length > 0 && user.badges.length < 10) {
|
||||
const lastBadge = user.badges[user.badges.length - 1]
|
||||
const additionalBadges = Array(10 - user.badges.length).fill(lastBadge)
|
||||
user.badges = [...user.badges, ...additionalBadges]
|
||||
const badgeList = [
|
||||
{ key: 'NW', title: 'Nordrhein Westfalen', type: 'nordrhein-westfalen', icon: null },
|
||||
{ key: 'TE', title: 'Test-Express', type: 'test-express', icon: null },
|
||||
{ key: 'LE', title: 'Liberation-Express', type: 'liberation-express', icon: null },
|
||||
{ key: 'NE', title: 'Nachweis-Express', type: 'nachweis-express', icon: null },
|
||||
{ key: 'ME', title: 'Maskenfrei.Express', type: 'maskenfrei-express', icon: null },
|
||||
{ key: 'BB', title: 'Beitragsblocker', type: 'beitragsblocker', icon: null },
|
||||
{ key: 'BS', title: 'Beitragsstopper', type: 'beitragsstopper', icon: null },
|
||||
{ key: 'MI', title: 'Masern-Impfbloker', type: 'masern-impfbloker', icon: null },
|
||||
{ key: 'RA', title: 'Rundfunk-Alarm', type: 'rundfunk-alarm', icon: null },
|
||||
{ key: 'FD', title: 'Freunde der Demokratie', type: 'freunde-der-demokratie', icon: null },
|
||||
// { key: 'RD', title: 'Restart Democracy', type: 'restart-democracy', icon: null }
|
||||
]
|
||||
|
||||
lastBadge.icon = '/img/badges/badges-slot-gray.svg'
|
||||
}
|
||||
// ^^^
|
||||
user.badges = badgeList
|
||||
|
||||
return user
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user