teavail/web-frontend
4
0
Fork 0
Code Issues Packages Activity Actions

Change padding on small screens

Browse source
This commit is contained in:
Moritz Ruth 2024-06-17 15:32:27 +02:00
parent 868ef0ed59
commit f1ea3791ba
Signed by: moritzruth
GPG key ID: C9BBAB79405EE56D
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/NavigationMenuWrapper.vue
View file

@ -1,29 +1,29 @@
<template> <template>
<nav class="w-full lg:w-70 fixed z-100 lg:top-0 left-0 bottom-0 lg:py-8 flex flex-col gap-3 <lg:border-t-solid lg:border-r-solid border-1 border-gray-300 bg-gray-100"> <nav class="w-full md:w-60 lg:w-70 fixed z-100 md:top-0 left-0 bottom-0 md:py-8 flex flex-col gap-3 <md:border-t-solid md:border-r-solid border-1 border-gray-300 bg-gray-100">
<div class="<lg:hidden font-serif font-400 text-4xl pl-7 pb-2"> <div class="<md:hidden font-serif font-400 text-4xl pl-7 pb-2">
Teavail Teavail
</div> </div>
<ul class="list-none m-0 p-0 flex lg:flex-col <lg:justify-evenly gap-2"> <ul class="list-none m-0 p-0 flex md:flex-col <md:justify-evenly gap-2">
<li v-for="item in items" :key="item.target"> <li v-for="item in items" :key="item.target">
<router-link <router-link
class="relative w-full <lg:px-3 py-2 lg:pl-8 flex <lg:flex-col items-center lg:gap-4 bg-orange-800 bg-opacity-0" class="relative w-full <md:px-3 py-2 md:pl-8 flex <md:flex-col items-center md:gap-4 bg-orange-800 bg-opacity-0"
:class="$style.item" :class="$style.item"
:to="item.target" :to="item.target"
:active-class="item.matchExact ? null : $style.active" :active-class="item.matchExact ? undefined : $style.active"
:exact-active-class="item.matchExact ? $style.active : null" :exact-active-class="item.matchExact ? $style.active : undefined"
> >
<div class="text-2xl lg:text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? undefined : `${item.icon.yOffset}px` }"> <div class="text-2xl md:text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? undefined : `${item.icon.yOffset}px` }">
<component class="absolute inset-0 opacity-0" :is="item.icon.normal"/> <component class="absolute inset-0 opacity-0" :is="item.icon.normal"/>
<component class="duration-200" :is="item.icon.duotone"/> <component class="duration-200" :is="item.icon.duotone"/>
</div> </div>
<div class="text-sm lg:text-lg text-center" :class="$style.label"> <div class="text-sm md:text-lg text-center" :class="$style.label">
{{ item.label }} {{ item.label }}
</div> </div>
</router-link> </router-link>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="lg:pl-80 pb-20"> <div class="md:pl-65 lg:pl-80 pb-20">
<slot/> <slot/>
</div> </div>
</template> </template>

2
src/components/specific/TypeOfTeaForm.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<form class="flex gap-4 w-full flex-col" @submit.prevent="onSubmit()"> <form class="flex gap-4 w-full flex-col" @submit.prevent="onSubmit()">
<div class="flex gap-4 w-full <lg:flex-col"> <div class="flex gap-4 w-full <md:flex-col">
<FieldWrapper class="flex-grow" label="Name" v-slot="{ inputId }"> <FieldWrapper class="flex-grow" label="Name" v-slot="{ inputId }">
<TextualInput v-model="data.name" type="normal" :id="inputId" :disabled="isLoading"/> <TextualInput v-model="data.name" type="normal" :id="inputId" :disabled="isLoading"/>
</FieldWrapper> </FieldWrapper>