From 1e2501b9f76fd832d562fca5e644d8d9fdd7dd5a Mon Sep 17 00:00:00 2001
From: chain710 <chain710@gmail.com>
Date: Fri, 2 Dec 2022 15:39:15 +0800
Subject: [PATCH] Custom span size in each group

---
 docs/configuration.md | 2 ++
 src/App.vue           | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index e43a8b811..0af074d43 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -121,6 +121,8 @@ services:
     icon: "fas fa-code-branch"
     # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
     # logo: "path/to/logo"
+    # Use custom span size instead of 12/columns
+    # span: 6
     items:
       - name: "Awesome app"
         logo: "assets/tools/sample.png"
diff --git a/src/App.vue b/src/App.vue
index 25e943f7d..900f90c8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -92,7 +92,7 @@
                 :key="`service-${groupIndex}-${index}`"
                 :item="item"
                 :proxy="config.proxy"
-                :class="['column', `is-${12 / config.columns}`]"
+                :class="['column', `is-${getSpan(group)}`]"
               />
             </template>
           </div>
@@ -103,7 +103,7 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              :class="['column', `is-${12 / config.columns}`]"
+              :class="['column', `is-${getSpan(group)}`]"
               v-for="(group, groupIndex) in services"
               :key="groupIndex"
             >
@@ -312,6 +312,9 @@ export default {
       style.appendChild(document.createTextNode(css));
       document.head.appendChild(style);
     },
+    getSpan: function (item) {
+      return item.span || 12 / this.config.columns;
+    },
   },
 };
 </script>