Skip to content

Commit 8e8435c

Browse files
marcelveldtmarcelveldt
committed
fix a few glitches on mobile view
1 parent 5c79f03 commit 8e8435c

File tree

4 files changed

+108
-89
lines changed

4 files changed

+108
-89
lines changed

‎src/components/ItemsListing.vue‎

Lines changed: 105 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -13,94 +13,107 @@
1313
<v-card>
1414
<v-toolbar density="compact" variant="flat" color="transparent">
1515
<template #title>
16-
<span v-if="!$vuetify.display.mobile && title">
17-
{{ title }}
18-
</span>
16+
{{ title }}
1917
</template>
2018

21-
<v-spacer />
22-
23-
<!-- toggle select button -->
24-
<v-btn
25-
v-bind="props"
26-
:icon="showCheckboxes ? 'mdi-checkbox-multiple-outline' : 'mdi-checkbox-multiple-blank-outline'"
27-
variant="plain"
28-
@click="toggleCheckboxes"
29-
:title="$t('tooltip.select_items')"
30-
/>
31-
32-
<!-- favorites only filter -->
33-
<v-btn
34-
v-if="showFavoritesOnlyFilter !== false"
35-
v-bind="props"
36-
icon
37-
variant="plain"
38-
@click="toggleFavoriteFilter"
39-
:title="$t('tooltip.filter_favorites')"
40-
>
41-
<v-icon :icon="favoritesOnly ? 'mdi-heart' : 'mdi-heart-outline'" />
42-
</v-btn>
43-
44-
<!-- album artists only filter -->
45-
<v-btn
46-
v-if="showAlbumArtistsOnlyFilter"
47-
v-bind="props"
48-
icon
49-
variant="plain"
50-
@click="toggleAlbumArtistsFilter"
51-
:title="$t('tooltip.album_artist_filter')"
52-
>
53-
<v-icon :icon="albumArtistsOnlyFilter ? 'mdi-account-music' : 'mdi-account-music-outline'" />
54-
</v-btn>
55-
56-
<!-- refresh button-->
57-
<v-btn
58-
v-bind="props"
59-
icon
60-
variant="plain"
61-
@click="onRefreshClicked()"
62-
:title="updateAvailable ? $t('tooltip.refresh_new_content') : $t('tooltip.refresh')"
63-
>
64-
<v-badge :model-value="updateAvailable" color="error" dot>
65-
<v-icon icon="mdi-refresh" />
66-
</v-badge>
67-
</v-btn>
68-
69-
<!-- sort options -->
70-
<v-menu v-if="sortKeys.length > 1" v-model="showSortMenu" location="bottom end" :close-on-content-click="true">
71-
<template v-slot:activator="{ props }">
72-
<v-btn icon v-bind="props" variant="plain" :title="$t('tooltip.sort_options')">
73-
<v-icon v-bind="props" icon="mdi-sort" />
74-
</v-btn>
75-
</template>
76-
<v-card>
77-
<v-list>
78-
<div v-for="key of sortKeys" :key="key">
79-
<ListItem @click="changeSort(key)">
80-
<template #title>{{ $t('sort.' + key) }}</template>
81-
<template #append>
82-
<v-icon v-if="sortBy == key" icon="mdi-check" />
83-
</template>
84-
</ListItem>
85-
<v-divider />
86-
</div>
87-
</v-list>
88-
</v-card>
89-
</v-menu>
90-
91-
<!-- toggle search button -->
92-
<v-btn v-bind="props" icon variant="plain" @click="toggleSearch()" :title="$t('tooltip.search')">
93-
<v-icon icon="mdi-magnify" />
94-
</v-btn>
95-
96-
<!-- toggle view mode button -->
97-
<v-btn
98-
v-bind="props"
99-
:icon="viewMode == 'panel' ? 'mdi-view-list' : 'mdi-grid'"
100-
variant="plain"
101-
@click="toggleViewMode()"
102-
:title="$t('tooltip.toggle_view_mode')"
103-
/>
19+
<template #append>
20+
<!-- toggle select button -->
21+
<v-btn
22+
v-bind="props"
23+
:icon="showCheckboxes ? 'mdi-checkbox-multiple-outline' : 'mdi-checkbox-multiple-blank-outline'"
24+
variant="plain"
25+
v-if="showSelectButton != undefined ? showSelectButton : getBreakpointValue('bp1') || !title"
26+
@click="toggleCheckboxes"
27+
:title="$t('tooltip.select_items')"
28+
/>
29+
{{ showSelectButton }}
30+
31+
<!-- favorites only filter -->
32+
<v-btn
33+
v-if="showFavoritesOnlyFilter !== false"
34+
v-bind="props"
35+
icon
36+
variant="plain"
37+
@click="toggleFavoriteFilter"
38+
:title="$t('tooltip.filter_favorites')"
39+
>
40+
<v-icon :icon="favoritesOnly ? 'mdi-heart' : 'mdi-heart-outline'" />
41+
</v-btn>
42+
43+
<!-- album artists only filter -->
44+
<v-btn
45+
v-if="showAlbumArtistsOnlyFilter"
46+
v-bind="props"
47+
icon
48+
variant="plain"
49+
@click="toggleAlbumArtistsFilter"
50+
:title="$t('tooltip.album_artist_filter')"
51+
>
52+
<v-icon :icon="albumArtistsOnlyFilter ? 'mdi-account-music' : 'mdi-account-music-outline'" />
53+
</v-btn>
54+
55+
<!-- refresh button-->
56+
<v-btn
57+
v-bind="props"
58+
icon
59+
variant="plain"
60+
@click="onRefreshClicked()"
61+
v-if="showRefreshButton != undefined ? showRefreshButton : getBreakpointValue('bp1') || !title"
62+
:title="updateAvailable ? $t('tooltip.refresh_new_content') : $t('tooltip.refresh')"
63+
>
64+
<v-badge :model-value="updateAvailable" color="error" dot>
65+
<v-icon icon="mdi-refresh" />
66+
</v-badge>
67+
</v-btn>
68+
69+
<!-- sort options -->
70+
<v-menu
71+
v-if="sortKeys.length > 1"
72+
v-model="showSortMenu"
73+
location="bottom end"
74+
:close-on-content-click="true"
75+
>
76+
<template v-slot:activator="{ props }">
77+
<v-btn icon v-bind="props" variant="plain" :title="$t('tooltip.sort_options')">
78+
<v-icon v-bind="props" icon="mdi-sort" />
79+
</v-btn>
80+
</template>
81+
<v-card>
82+
<v-list>
83+
<div v-for="key of sortKeys" :key="key">
84+
<ListItem @click="changeSort(key)">
85+
<template #title>{{ $t('sort.' + key) }}</template>
86+
<template #append>
87+
<v-icon v-if="sortBy == key" icon="mdi-check" />
88+
</template>
89+
</ListItem>
90+
<v-divider />
91+
</div>
92+
</v-list>
93+
</v-card>
94+
</v-menu>
95+
96+
<!-- toggle search button -->
97+
<v-btn
98+
v-if="showSearchButton != undefined ? showSearchButton : getBreakpointValue('bp1') || !title"
99+
v-bind="props"
100+
icon
101+
variant="plain"
102+
@click="toggleSearch()"
103+
:title="$t('tooltip.search')"
104+
>
105+
<v-icon icon="mdi-magnify" />
106+
</v-btn>
107+
108+
<!-- toggle view mode button -->
109+
<v-btn
110+
v-bind="props"
111+
:icon="viewMode == 'panel' ? 'mdi-view-list' : 'mdi-grid'"
112+
variant="plain"
113+
@click="toggleViewMode()"
114+
:title="$t('tooltip.toggle_view_mode')"
115+
/>
116+
</template>
104117
</v-toolbar>
105118
<v-divider></v-divider>
106119

@@ -241,6 +254,9 @@ export interface Props {
241254
showDuration?: boolean;
242255
parentItem?: MediaItemType;
243256
showAlbumArtistsOnlyFilter?: boolean;
257+
showSearchButton?: boolean;
258+
showRefreshButton?: boolean;
259+
showSelectButton?: boolean;
244260
updateAvailable?: boolean;
245261
title?: string;
246262
hideOnEmpty?: boolean;
@@ -265,6 +281,9 @@ const props = withDefaults(defineProps<Props>(), {
265281
parentItem: undefined,
266282
hideOnEmpty: false,
267283
checksum: undefined,
284+
showSearchButton: undefined,
285+
showRefreshButton: undefined,
286+
showSelectButton: undefined,
268287
});
269288
270289
const defaultLimit = 100;

‎src/components/ListviewItem.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,5 @@ const itemIsAvailable = function (item: MediaItem) {
265265
margin-top:5px;
266266
margin-right: 15px;
267267
margin-left: 15px;
268-
filter: invert(100%);
269268
}
270269
</style>

‎src/views/ArtistDetails.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
:key="providerMapping.provider_instance"
4949
@click="
5050
$router.push({
51-
name: 'album',
51+
name: 'artist',
5252
params: {
5353
itemId: providerMapping.item_id,
5454
provider: providerMapping.provider_instance,
@@ -91,7 +91,6 @@ import ProviderIcon from '@/components/ProviderIcon.vue';
9191
import { api } from '../plugins/api';
9292
import ListItem from '../components/mods/ListItem.vue';
9393
import Container from '../components/mods/Container.vue';
94-
import { getStreamingProviderMappings } from '../utils';
9594
9695
export interface Props {
9796
itemId: string;

‎src/views/TrackDetails.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
name="preview"
7171
title="preview"
7272
controls
73+
v-if="getBreakpointValue('bp1')"
7374
:src="getPreviewUrl(providerMapping.provider_domain, providerMapping.item_id)"
7475
/>
7576
<v-btn
@@ -99,6 +100,7 @@ import ListItem from '../components/mods/ListItem.vue';
99100
import Container from '../components/mods/Container.vue';
100101
import ProviderIcon from '@/components/ProviderIcon.vue';
101102
import { getStreamingProviderMappings } from '../utils';
103+
import { getBreakpointValue } from '@/plugins/breakpoint';
102104
103105
export interface Props {
104106
itemId: string;

0 commit comments

Comments
 (0)