forked from verdnatura/salix-front
refs #6082 v-if mobile icon search
This commit is contained in:
parent
bba6050c5f
commit
f127c1019b
|
@ -77,7 +77,14 @@ onMounted(() => stateStore.setMounted());
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
<PinnedModules />
|
<PinnedModules />
|
||||||
</QBtn>
|
</QBtn>
|
||||||
<QBtn class="user-button" rounded dense flat no-wrap id="user">
|
<QBtn
|
||||||
|
class="{quasar.platform.is.mobile: 'q-pa-sm q-ml-xs'}"
|
||||||
|
rounded
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
no-wrap
|
||||||
|
id="user"
|
||||||
|
>
|
||||||
<QAvatar size="lg">
|
<QAvatar size="lg">
|
||||||
<QImg
|
<QImg
|
||||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||||
|
@ -97,22 +104,10 @@ onMounted(() => stateStore.setMounted());
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.user-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px; /* Ajusta el valor de padding según tus necesidades */
|
|
||||||
|
|
||||||
/* Estilos específicos para dispositivos móviles */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
padding: 2px; /* Reduce el padding en dispositivos móviles */
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pinnedModules {
|
.pinnedModules {
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding: 2px; /* Reduce el padding en dispositivos móviles */
|
padding: 0px;
|
||||||
margin-left: 1px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
const quasar = useQuasar();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: {
|
dataKey: {
|
||||||
|
@ -93,7 +95,7 @@ async function search() {
|
||||||
autofocus
|
autofocus
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<QIcon name="search" />
|
<QIcon name="search" v-if="!quasar.platform.is.mobile" />
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<QIcon
|
<QIcon
|
||||||
|
|
Loading…
Reference in New Issue