ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/views/Handlungsfeld.vue
View File

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

4
client/src/views/HandlungsfelderOverview.vue
View File

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

2
client/src/views/MediaMainView.vue
View File

@ -25,7 +25,7 @@ const dropdownSelected = ref(dropdownItems[0])
<template> <template>
<div class="mx-auto max-w-5xl"> <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> <h1>Mediathek</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="dropdownSelected" v-model="dropdownSelected"