Added breakpoints
This commit is contained in:
parent
fec00e6c1f
commit
2840025e9a
21
web/src/components/UserChip.vue
Normal file
21
web/src/components/UserChip.vue
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<v-chip color="primary">
|
||||||
|
<v-avatar
|
||||||
|
v-if="appStore.me?.thumbnailPhoto"
|
||||||
|
:image="appStore.me?.thumbnailPhoto"
|
||||||
|
:start="smAndUp"
|
||||||
|
/>
|
||||||
|
<span v-if="smAndUp">
|
||||||
|
{{ appStore.me?.displayName }}
|
||||||
|
</span>
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useAppStore } from '@/store/appStore'
|
||||||
|
import { useDisplay } from 'vuetify'
|
||||||
|
|
||||||
|
const { smAndUp } = useDisplay()
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
</script>
|
|
@ -22,6 +22,7 @@
|
||||||
rounded
|
rounded
|
||||||
/>
|
/>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
v-if="smAndUp"
|
||||||
class="ml-2"
|
class="ml-2"
|
||||||
density="compact"
|
density="compact"
|
||||||
style="max-width: 200px"
|
style="max-width: 200px"
|
||||||
|
@ -43,14 +44,7 @@
|
||||||
/>
|
/>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
|
||||||
<v-chip color="primary">
|
<user-chip />
|
||||||
<v-avatar
|
|
||||||
v-if="appStore.me?.thumbnailPhoto"
|
|
||||||
:image="appStore.me?.thumbnailPhoto"
|
|
||||||
start
|
|
||||||
/>
|
|
||||||
{{ appStore.me?.displayName }}
|
|
||||||
</v-chip>
|
|
||||||
<v-btn class="mx-2" @click="logout" icon size="small">
|
<v-btn class="mx-2" @click="logout" icon size="small">
|
||||||
<v-icon icon="mdi-logout"></v-icon>
|
<v-icon icon="mdi-logout"></v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
@ -63,7 +57,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import UserChip from '@/components/UserChip.vue'
|
||||||
import { useAppStore } from '@/store/appStore'
|
import { useAppStore } from '@/store/appStore'
|
||||||
|
import { useDisplay } from 'vuetify'
|
||||||
|
|
||||||
import { removeJwtToken } from '@/auth'
|
import { removeJwtToken } from '@/auth'
|
||||||
|
|
||||||
|
@ -73,6 +69,8 @@ const appStore = useAppStore()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const { smAndUp } = useDisplay()
|
||||||
|
|
||||||
const campiSelectItems = [
|
const campiSelectItems = [
|
||||||
{
|
{
|
||||||
title: 'Todos',
|
title: 'Todos',
|
||||||
|
|
|
@ -17,14 +17,8 @@
|
||||||
/>
|
/>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
|
||||||
<v-chip color="primary">
|
<user-chip />
|
||||||
<v-avatar
|
|
||||||
v-if="appStore.me?.thumbnailPhoto"
|
|
||||||
:image="appStore.me?.thumbnailPhoto"
|
|
||||||
start
|
|
||||||
/>
|
|
||||||
{{ appStore.me?.displayName }}
|
|
||||||
</v-chip>
|
|
||||||
<v-btn class="mx-2" @click="logout" icon size="small">
|
<v-btn class="mx-2" @click="logout" icon size="small">
|
||||||
<v-icon icon="mdi-logout"></v-icon>
|
<v-icon icon="mdi-logout"></v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
@ -37,6 +31,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import UserChip from '@/components/UserChip.vue'
|
||||||
|
|
||||||
import { useAppStore } from '@/store/appStore'
|
import { useAppStore } from '@/store/appStore'
|
||||||
import { removeJwtToken } from '@/auth'
|
import { removeJwtToken } from '@/auth'
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user