Customizable number of columns

diff --git a/README.md b/README.md
index c3a6f07590b23878bf70482cadb3ac8fa3cbd23d..8818e322423ee847b5770617bf21c49a60cb380f 100644 (file)
--- a/README.md
+++ b/README.md
@@ -98,6 +98,9 @@ logo: "assets/homer.png"
 header: true # Set to false to hide the header
 footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 
+columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
+connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
+
 # Optional theming
 theme: default # 'default' or one of the theme available in 'src/assets/themes'.
 

diff --git a/src/App.vue b/src/App.vue
index 62156d2ce9a87658a4145808d4bf355ea7cb75be..17c32143b44cc93d4740f2cd6fdb547e00f2e0f4 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -68,7 +68,7 @@
                 v-for="item in group.items"
                 :key="item.name"
                 v-bind:item="item"
-                class="column is-one-third-widescreen"
+                :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
           </div>
@@ -79,7 +79,7 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              class="column is-one-third-widescreen"
+              :class="['column', `is-${12 / config.columns}`]"
               v-for="group in services"
               :key="group.name"
             >

diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index b2960c9e626cbc66c6f0dd76d74603790b2e0ceb..99f5ed5b0477486fab221d7d0e4948e9890b3e13 100644 (file)
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -7,6 +7,7 @@ subtitle: "Homer"
 header: true
 footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 
+columns: 3
 connectivityCheck: true
 
 theme: default