feat!: ability to change the application grid (#49) (#91)

Author: Alexander

Diff for: docs/reference/configuration.md

@@ -98,6 +98,27 @@ tags:
 More details can be found in the [tags](../reference/tags.md) section.
 :::
 
+## Layout <in-version value="0.14.0" />
+
+A group of parameters responsible for the application layout.
+
+### Grid
+
+Allows you to set the number of columns at different screen resolutions.
+
+```yaml
+layout:
+  grid:
+    small: 2
+    medium: 2
+    large: 3
+    xlarge: 4
+```
+
+Values: range `1 - 12`
+
+You can only specify one value, the others will be set automatically.
+
 ## Services
 
 All services that are displayed on the home page are set in this parameter.

Diff for: docs/ru/reference/configuration.md

@@ -98,6 +98,27 @@ tags:
 Более подробно о тегах можно прочитать в [разделе](../reference/tags.md).
 :::
 
+## Макет <in-version value="0.14.0" />
+
+Группа параметров отвечающих за макет приложения.
+
+### Сетка
+
+Позволяет настроить количество колонок на разных разрешениях экрана.
+
+```yaml
+layout:
+  grid:
+    small: 2
+    medium: 2
+    large: 3
+    xlarge: 4
+```
+
+Поддерживаемые значения: диапазон `1 - 12`
+
+Вы можете указать только одно значение, остальные будут установлены автоматически.
+
 ## Сервисы
 
 Все сервисы, которые отображаются на главной странице задаются в данном параметре.

Diff for: src/components/Group.vue

@@ -3,7 +3,7 @@
     <h2 v-if="title" class="text-2xl font-light py-2 px-4">
       {{ title }}
     </h2>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1 lg:gap-2 lg:gap-y-4">
+    <div :class="gridClasses">
       <template v-for="item in items" :key="item.id">
         <Item v-bind="item" />
       </template>
@@ -12,12 +12,25 @@
 </template>
 
 <script setup lang="ts">
-import type { Service } from '~/types'
+import type { Layout, Service } from '~/types'
 
 export interface Props {
   title?: string
   items: Service[]
+  grid: Layout['grid']
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const gridClasses = computed(() => [
+  'grid',
+  'grid-cols-1',
+  `sm:grid-cols-${props.grid.small}`,
+  `md:grid-cols-${props.grid.medium}`,
+  `lg:grid-cols-${props.grid.large}`,
+  `xl:grid-cols-${props.grid.xlarge}`,
+  'gap-1',
+  'lg:gap-2',
+  'lg:gap-y-4',
+])
 </script>

Diff for: src/pages/index.vue

@@ -2,7 +2,7 @@
   <Group
     v-for="(group, key) in $services"
     :key="key"
-    v-bind="group"
+    v-bind="{ ...group, grid: $settings.layout.grid }"
   />
   <Update v-if="$settings.checkUpdates" />
 </template>

Diff for: src/server/utils/config.ts

@@ -36,6 +36,14 @@ export function getDefaultConfig(): CompleteConfig {
     lang: 'en',
     theme: 'system',
     checkUpdates: true,
+    layout: {
+      grid: {
+        small: 2,
+        medium: 2,
+        large: 3,
+        xlarge: 4,
+      },
+    },
     behaviour: {
       target: '_blank',
     },

Diff for: src/types/config.d.ts

@@ -14,10 +14,20 @@ export interface Behaviour {
   target?: '_blank' | '_self' | '_parent' | '_top'
 }
 
+export interface Layout {
+  grid: {
+    small: number
+    medium: number
+    large: number
+    xlarge: number
+  }
+}
+
 export interface Config {
   title?: string
   lang: 'en' | 'ru'
   theme?: 'system' | 'light' | 'dark' | 'deep' | 'sepia'
+  layout?: Layout
   behaviour?: Behaviour
   tags: Tag[]
   services: ServicesGroup[]

Diff for: tailwind.config.ts

@@ -7,6 +7,10 @@ export default <Partial<Config>>{
       pattern: /(bg|text)-./,
       variants: ['dark'],
     },
+    {
+      pattern: /grid-cols-./,
+      variants: ['sm', 'md', 'lg', 'xl'],
+    },
   ],
   theme: {
     extend: {