icon only on mobile

This commit is contained in:
hay-kot 2021-05-25 20:52:49 -07:00
commit dc863c56ef

View file

@ -1,24 +1,24 @@
<template> <template>
<div v-if="recipes"> <div v-if="recipes">
<v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar"> <v-app-bar color="transparent" flat class="mt-n1 flex-sm-wrap rounded " v-if="!disableToolbar">
<v-icon large left v-if="title"> <v-icon large left v-if="title">
{{ displayTitleIcon }} {{ displayTitleIcon }}
</v-icon> </v-icon>
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title> <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="navigateRandom"> <v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
<v-icon left> <v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-dice-multiple mdi-dice-multiple
</v-icon> </v-icon>
{{ $t("general.random") }} {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
</v-btn> </v-btn>
<v-menu offset-y left v-if="$listeners.sort"> <v-menu offset-y left v-if="$listeners.sort">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on" :loading="sortLoading"> <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
<v-icon left> <v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-sort mdi-sort
</v-icon> </v-icon>
{{ $t("general.sort") }} {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
</v-btn> </v-btn>
</template> </template>
<v-list> <v-list>