Make grids mobile-ish
This commit is contained in:
parent
6d5823eb06
commit
f7b0140eec
|
|
@ -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)
|
||||
}">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue