Make grids mobile-ish

This commit is contained in:
Christian Cueni 2022-09-06 10:55:24 +02:00
parent 6d5823eb06
commit f7b0140eec
3 changed files with 4 additions and 4 deletions

View File

@ -201,7 +201,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
v-for="item in field.items" :key="item.title">
<h2 class="mb-4">{{item.title}}</h2>
<ul :class="{
'grid gap-4 grid-cols-2': displayAsCard(item.type),
'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
'border-t': !displayAsCard(item.type),
'mb-6': hasMoreItemsForType(item.type, item.items)
}">

View File

@ -75,14 +75,14 @@ const dropdownSelected = ref(dropdownItems[0])
<template>
<div class="mx-auto max-w-5xl">
<div class="flex items-center justify-between mb-10">
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
<h1>Handlungsfelder</h1>
<ItDropdownSelect
v-model="dropdownSelected"
:items="dropdownItems"></ItDropdownSelect>
</div>
<div>
<ul class="grid gap-5 grid-cols-4">
<ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
<li
class="bg-white p-4 w-58"
v-for="field in fields"

View File

@ -25,7 +25,7 @@ const dropdownSelected = ref(dropdownItems[0])
<template>
<div class="mx-auto max-w-5xl">
<div class="flex items-center justify-between mb-10">
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
<h1>Mediathek</h1>
<ItDropdownSelect
v-model="dropdownSelected"