From ba9fbfe3a7cf5901a9debab6e137559bd538108c Mon Sep 17 00:00:00 2001
From: Sebastian Stein <sebastian@codepassion.de>
Date: Thu, 17 Apr 2025 21:12:52 +0200
Subject: [PATCH] - created general css based layout - added first converted
 slot image

---
 webapp/components/Badges.vue                  | 97 +++++++++++++------
 webapp/pages/profile/_id/_slug.vue            | 14 ++-
 webapp/static/img/badges/badges-slot-gray.svg | 12 +++
 3 files changed, 90 insertions(+), 33 deletions(-)
 create mode 100644 webapp/static/img/badges/badges-slot-gray.svg

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index 936d13adb..20a614612 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -19,50 +19,83 @@ export default {
 
 <style lang="scss">
 .hc-badges {
-  text-align: center;
   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;
+
+  width: calc($main-badge-size + 4 * $badge-size + 4 * $gap-x);
+  height: calc(3 * $badge-size + 4 * $gap-y);
+  margin: auto;
+
   .hc-badge-container {
-    display: inline-block;
-    position: unset;
-    overflow: hidden;
-    vertical-align: middle;
+    position: absolute;
+    width: $badge-size;
+    height: $badge-size;
   }
 
   .hc-badge {
     display: block;
     width: 100%;
+    height: 100%;
   }
 
-  $size: 30px;
-  $offset: $size * -0.2;
-
-  &.hc-badges-dual {
-    padding-top: $size / 2 - 2;
+  .hc-badge-container:nth-child(1) {
+    width: $main-badge-size;
+    height: $main-badge-size;
+    top: $offset-y + calc($gap-y / 2);
+    left: 0;
   }
 
-  .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;
-    }
+  .hc-badge-container:nth-child(2) {
+    top: $offset-y + calc(-1 * $gap-y / 2);
+    left: calc($main-badge-size + $gap-x);
   }
+
+  .hc-badge-container:nth-child(3) {
+    top: $offset-y + calc($slot-y + $gap-y / 2);
+    left: calc($main-badge-size + $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);
+  }
+
+  .hc-badge-container:nth-child(5) {
+    top: $offset-y + calc($badge-size / 2);
+    left: calc($main-badge-size + $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);
+  }
+
+  .hc-badge-container:nth-child(7) {
+    top: $offset-y + calc(-1 * $gap-y / 2);
+    left: calc($main-badge-size + $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);
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
 }
 </style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index cef3a5d45..622610b09 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -261,7 +261,19 @@ export default {
       return this.$route.params.id === this.$store.getters['auth/user'].id
     },
     user() {
-      return this.User ? this.User[0] : {}
+      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]
+
+        lastBadge.icon = '/img/badges/badges-slot-gray.svg'
+      }
+      // ^^^
+
+      return user
     },
     userName() {
       const { name } = this.user || {}
diff --git a/webapp/static/img/badges/badges-slot-gray.svg b/webapp/static/img/badges/badges-slot-gray.svg
new file mode 100644
index 000000000..b203cdfc6
--- /dev/null
+++ b/webapp/static/img/badges/badges-slot-gray.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="400" height="346.67" version="1.1" viewBox="0 0 400 346.67" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="linearGradient4" x1="708.76" x2="493.17" y1="280.91" y2="65.326" gradientTransform="translate(-404.06 .215)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#c1c1c1" offset="0"/>
+   <stop stop-color="#fcfcfc" offset="1"/>
+  </linearGradient>
+ </defs>
+ <path d="m-0.21505 173.98 100.65-173.76h198.71l101.08 173.76-99.785 172.04-201.29 0.43011z" fill="#bebebe"/>
+ <path d="m22.482 173.91 89.236-154.07h176.18l89.617 154.07-88.473 152.54-178.47 0.38135z" fill="url(#linearGradient4)"/>
+</svg>