beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UI: Improve theme styles and remove "Seaweed" #2916

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2022-11-21 12:27:26 +01:00
parent 72fffc92fc
commit e1405eba54
15 changed files with 75 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/package-lock.json generated
View file

@ -3450,9 +3450,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001431", "version": "1.0.30001434",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
"integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==", "integrity": "sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -7671,9 +7671,13 @@
} }
}, },
"node_modules/js-sdsl": { "node_modules/js-sdsl": {
"version": "4.1.5", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
"integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==" "integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/js-sdsl"
}
}, },
"node_modules/js-stringify": { "node_modules/js-stringify": {
"version": "1.0.2", "version": "1.0.2",

16
frontend/src/component/photo/cards.vue
View file

@ -35,9 +35,9 @@
> >
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex" <div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:data-uid="photo.UID" :data-uid="photo.UID"
class="accent lighten-3 result placeholder" class="card result placeholder"
> >
<div class="accent lighten-2 image"/> <div class="card darken-1 image"/>
<div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px"/> <div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px"/>
<div class="pa-3 card-details"> <div class="pa-3 card-details">
<div> <div>
@ -73,17 +73,15 @@
</div> </div>
</div> </div>
<div v-else <div v-else
tile
:data-id="photo.ID" :data-id="photo.ID"
:data-uid="photo.UID" :data-uid="photo.UID"
class="result accent lighten-3" class="result card"
:class="photo.classes()" :class="photo.classes()"
@contextmenu.stop="onContextMenu($event, index)"> @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<div :key="photo.Hash" <div :key="photo.Hash"
:alt="photo.Title"
:title="photo.Title" :title="photo.Title"
class="accent lighten-2 clickable image" class="card darken-1 clickable image"
:style="`background-image: url(${photo.thumbnailUrl('tile_500')})`" :style="`background-image: url(${photo.thumbnailUrl('tile_500')})`"
@touchstart.passive="input.touchStart($event, index)" @touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@ -161,7 +159,7 @@
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0"> <v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
<v-layout row wrap align-center> <v-layout row wrap align-center>
<v-flex xs6 class="text-xs-center pa-1"> <v-flex xs6 class="text-xs-center pa-1">
<v-btn color="accent lighten-2" <v-btn color="card darken-1"
small depressed dark block :round="false" small depressed dark block :round="false"
class="action-archive text-xs-center" class="action-archive text-xs-center"
:title="$gettext('Archive')" @click.stop="photo.archive()"> :title="$gettext('Archive')" @click.stop="photo.archive()">
@ -169,7 +167,7 @@
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-flex xs6 class="text-xs-center pa-1"> <v-flex xs6 class="text-xs-center pa-1">
<v-btn color="accent lighten-2" <v-btn color="card darken-1"
small depressed dark block :round="false" small depressed dark block :round="false"
class="action-approve text-xs-center" class="action-approve text-xs-center"
:title="$gettext('Approve')" @click.stop="photo.approve()"> :title="$gettext('Approve')" @click.stop="photo.approve()">

4
frontend/src/component/photo/list.vue
View file

@ -52,14 +52,14 @@
<div <div
v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex" v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:key="photo.Hash" :key="photo.Hash"
class="image accent lighten-2" class="image card darken-1"
/> />
<div <div
v-else v-else
:key="photo.Hash" :key="photo.Hash"
:alt="photo.Title" :alt="photo.Title"
:style="`background-image: url(${photo.thumbnailUrl('tile_50')})`" :style="`background-image: url(${photo.thumbnailUrl('tile_50')})`"
class="accent lighten-2 clickable image" class="card darken-1 clickable image"
@touchstart="onMouseDown($event, index)" @touchstart="onMouseDown($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@mousedown="onMouseDown($event, index)" @mousedown="onMouseDown($event, index)"

4
frontend/src/component/photo/mosaic.vue
View file

@ -40,7 +40,7 @@
<div class="image-container"> <div class="image-container">
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex" <div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:data-uid="photo.UID" :data-uid="photo.UID"
class="accent lighten-2 result image" class="card darken-1 result image"
/> />
<div v-else <div v-else
:key="photo.Hash" :key="photo.Hash"
@ -48,7 +48,7 @@
:data-id="photo.ID" :data-id="photo.ID"
:data-uid="photo.UID" :data-uid="photo.UID"
:style="`background-image: url(${photo.thumbnailUrl('tile_224')})`" :style="`background-image: url(${photo.thumbnailUrl('tile_224')})`"
:class="photo.classes().join(' ') + ' accent lighten-2 result clickable image'" :class="photo.classes().join(' ') + ' card darken-1 result clickable image'"
:alt="photo.Title" :alt="photo.Title"
:title="photo.Title" :title="photo.Title"
@contextmenu.stop="onContextMenu($event, index)" @contextmenu.stop="onContextMenu($event, index)"

12
frontend/src/css/themes.css
View file

@ -21,6 +21,18 @@ body.dark-theme #photoprism .v-tabs .v-badge__badge {
color: #000000; color: #000000;
} }
body.dark-theme #photoprism .theme--light.v-table thead th {
color: #ffffff;
}
.card {
background-color: #77787e;
}
body.dark-theme .card {
background-color: #4c4e52;
}
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: transparent; background: transparent;
} }

12
frontend/src/css/themes/electra.css
View file

@ -1,7 +1,7 @@
/* Electra Theme */ /* Electra Theme */
body.dark-theme.theme-electra { body.dark-theme.theme-electra {
background: #161025 !important; background: #26243a !important;
} }
#photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{ #photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
@ -25,21 +25,21 @@ body.dark-theme.theme-electra {
.theme-electra .p-page, .theme-electra .p-page,
.theme-electra .form, .theme-electra .form,
.theme-electra .v-content { .theme-electra .v-content {
background: #161025 !important; background: #26243a !important;
} }
#photoprism.theme-electra .theme--light.v-small-dialog__content, #photoprism.theme-electra .theme--light.v-small-dialog__content,
#photoprism.theme-electra .theme--light.v-sheet, #photoprism.theme-electra .theme--light.v-sheet,
#photoprism.theme-electra .theme--light.v-card { #photoprism.theme-electra .theme--light.v-card {
background: #161025; background: #26243a;
} }
.theme-electra .application.theme--light { .theme-electra .application.theme--light {
background: #161025; background: #26243a;
} }
#photoprism.theme-electra .theme--light .v-table { #photoprism.theme-electra .theme--light .v-table {
background: #161025; background: #26243a;
} }
#photoprism. .theme--light.v-table thead th, #photoprism. .theme--light.v-table thead th,
@ -48,7 +48,7 @@ body.dark-theme.theme-electra {
} }
#photoprism.theme-electra .theme--light.v-table tbody tr:hover { #photoprism.theme-electra .theme--light.v-table tbody tr:hover {
background: #23164f; background: #403e54;
} }
#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon { #photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {

2
frontend/src/dialog/photo/edit/details.vue
View file

@ -15,7 +15,7 @@
<v-img v-touch="{left, right}" <v-img v-touch="{left, right}"
:src="model.thumbnailUrl('tile_500')" :src="model.thumbnailUrl('tile_500')"
aspect-ratio="1" aspect-ratio="1"
class="accent lighten-2 elevation-0 clickable" class="card darken-1 elevation-0 clickable"
@click.exact="openPhoto()" @click.exact="openPhoto()"
> >
</v-img> </v-img>

2
frontend/src/dialog/photo/edit/files.vue
View file

@ -30,7 +30,7 @@
aspect-ratio="1" aspect-ratio="1"
max-width="112" max-width="112"
max-height="112" max-height="112"
class="accent lighten-2 elevation-0 clickable my-1" class="card darken-1 elevation-0 clickable my-1"
@click.exact="openFile(file)" @click.exact="openFile(file)"
> >
</v-img> </v-img>

6
frontend/src/dialog/photo/edit/people.vue
View file

@ -23,12 +23,12 @@
:data-id="marker.UID" :data-id="marker.UID"
style="user-select: none;" style="user-select: none;"
:class="marker.classes()" :class="marker.classes()"
class="result accent lighten-3"> class="result card">
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<v-img :src="marker.thumbnailUrl('tile_320')" <v-img :src="marker.thumbnailUrl('tile_320')"
:transition="false" :transition="false"
aspect-ratio="1" aspect-ratio="1"
class="accent lighten-2"> class="card darken-1">
<v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject" <v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject"
icon flat small absolute :title="$gettext('Remove')" icon flat small absolute :title="$gettext('Remove')"
@click.stop.prevent="onReject(marker)"> @click.stop.prevent="onReject(marker)">

54
frontend/src/options/themes.js
View file

@ -10,6 +10,7 @@ let themes = {
colors: { colors: {
application: "#F5F5F5", application: "#F5F5F5",
form: "#eeeeee", form: "#eeeeee",
card: "#bdbdbd",
primary: "#FFCA28", primary: "#FFCA28",
"primary-button": "#212121", "primary-button": "#212121",
"secondary-dark": "#212121", "secondary-dark": "#212121",
@ -40,6 +41,7 @@ let themes = {
colors: { colors: {
application: "#525252", application: "#525252",
form: "#e5e4e2", form: "#e5e4e2",
card: "#444444",
primary: "#c8bdb1", primary: "#c8bdb1",
"primary-button": "#726e69", "primary-button": "#726e69",
"secondary-dark": "#c8bdb1", "secondary-dark": "#c8bdb1",
@ -70,6 +72,7 @@ let themes = {
colors: { colors: {
application: "#eceff1", application: "#eceff1",
form: "#eceff1", form: "#eceff1",
card: "#bdbdbd",
primary: "#80deea", primary: "#80deea",
"primary-button": "#757575", "primary-button": "#757575",
"secondary-dark": "#757575", "secondary-dark": "#757575",
@ -100,6 +103,7 @@ let themes = {
colors: { colors: {
application: "#FDEDF5", application: "#FDEDF5",
form: "#fafafa", form: "#fafafa",
card: "#bdbdbd",
primary: "#ffb3cc", primary: "#ffb3cc",
"primary-button": "#EA3495", "primary-button": "#EA3495",
"secondary-dark": "#EA3495", "secondary-dark": "#EA3495",
@ -123,36 +127,6 @@ let themes = {
"navigation-home": "#891A55", "navigation-home": "#891A55",
}, },
}, },
seaweed: {
name: "seaweed",
dark: false,
sponsor: false,
colors: {
application: "#fafafa",
form: "#fafafa",
primary: "#26a69a",
"primary-button": "#3b5e5b",
"secondary-dark": "#1c7d73",
secondary: "#b0bec5",
"secondary-light": "#c1ccd1",
accent: "#b0bec5",
error: "#e57373",
info: "#00acc1",
success: "#4db6ac",
warning: "#ffd740",
remove: "#e57373",
restore: "#64b5f6",
album: "#ffab00",
download: "#00bfa5",
private: "#00b8d4",
edit: "#00b8d4",
share: "#9575cd",
love: "#ef5350",
terminal: "#333333",
navigation: "#37474f",
"navigation-home": "#263238",
},
},
lavender: { lavender: {
name: "lavender", name: "lavender",
dark: false, dark: false,
@ -160,6 +134,7 @@ let themes = {
colors: { colors: {
application: "#fafafa", application: "#fafafa",
form: "#fafafa", form: "#fafafa",
card: "#bdbdbd",
primary: "#9ca2c9", primary: "#9ca2c9",
"primary-button": "#6c6f84", "primary-button": "#6c6f84",
"secondary-dark": "#475185", "secondary-dark": "#475185",
@ -190,6 +165,7 @@ let themes = {
colors: { colors: {
application: "#eeeeee", application: "#eeeeee",
form: "#eeeeee", form: "#eeeeee",
card: "#bdbdbd",
primary: "#a5b3c0", primary: "#a5b3c0",
"primary-button": "#212121", "primary-button": "#212121",
"secondary-dark": "#212121", "secondary-dark": "#212121",
@ -220,6 +196,7 @@ let themes = {
colors: { colors: {
application: "#e5e4e2", application: "#e5e4e2",
form: "#e5e4e2", form: "#e5e4e2",
card: "#bdbdbd",
primary: "#c8bdb1", primary: "#c8bdb1",
"primary-button": "#353839", "primary-button": "#353839",
"secondary-dark": "#353839", "secondary-dark": "#353839",
@ -250,6 +227,7 @@ let themes = {
colors: { colors: {
application: "#444", application: "#444",
form: "#eeeeee", form: "#eeeeee",
card: "#3c3f41",
primary: "#c4f1e5", primary: "#c4f1e5",
"primary-button": "#74817d", "primary-button": "#74817d",
"secondary-dark": "#c8e3e7", "secondary-dark": "#c8e3e7",
@ -280,6 +258,7 @@ let themes = {
colors: { colors: {
application: "#444", application: "#444",
form: "#eeeeee", form: "#eeeeee",
card: "#3c3f41",
primary: "#ffb700", primary: "#ffb700",
"primary-button": "#918c7d", "primary-button": "#918c7d",
"secondary-dark": "#ffb700", "secondary-dark": "#ffb700",
@ -310,6 +289,7 @@ let themes = {
colors: { colors: {
application: "#212121", application: "#212121",
form: "#AFB42B", form: "#AFB42B",
card: "#3c3f41",
primary: "#04acaf", primary: "#04acaf",
"primary-button": "#444444", "primary-button": "#444444",
"secondary-dark": "#04acaf", "secondary-dark": "#04acaf",
@ -340,6 +320,7 @@ let themes = {
colors: { colors: {
application: "#212121", application: "#212121",
form: "#AFB42B", form: "#AFB42B",
card: "#3c3f41",
primary: "#814fd9", primary: "#814fd9",
"primary-button": "#7e57c2", "primary-button": "#7e57c2",
"secondary-dark": "#814fd9", "secondary-dark": "#814fd9",
@ -370,6 +351,7 @@ let themes = {
colors: { colors: {
application: "#353535", application: "#353535",
form: "#eeeeee", form: "#eeeeee",
card: "#3c3f41",
primary: "#AFB4D4", primary: "#AFB4D4",
"primary-button": "#545465", "primary-button": "#545465",
"secondary-dark": "#9BA0C5", "secondary-dark": "#9BA0C5",
@ -399,12 +381,13 @@ let themes = {
title: "Electra", title: "Electra",
name: "electra", name: "electra",
colors: { colors: {
application: "#161025", application: "#26243a",
form: "#eeeeee", form: "#eeeeee",
card: "#3b394e",
primary: "#D3CBFF", primary: "#D3CBFF",
"primary-button": "#53478a", "primary-button": "#53478a",
"secondary-dark": "#9c8aef", "secondary-dark": "#9c8aef",
secondary: "#0f0723", secondary: "#0c0910",
"secondary-light": "#2f2b44", "secondary-light": "#2f2b44",
accent: "#262238", accent: "#262238",
error: "#e57373", error: "#e57373",
@ -420,7 +403,7 @@ let themes = {
share: "#9575cd", share: "#9575cd",
love: "#ef5350", love: "#ef5350",
terminal: "#070121", terminal: "#070121",
navigation: "#070121", navigation: "#0f0e1f",
"navigation-home": "#02000e", "navigation-home": "#02000e",
}, },
}, },
@ -484,11 +467,6 @@ let options = [
value: "raspberry", value: "raspberry",
disabled: false, disabled: false,
}, },
{
text: $gettext("Seaweed"),
value: "seaweed",
disabled: false,
},
{ {
text: $gettext("Shadow"), text: $gettext("Shadow"),
value: "shadow", value: "shadow",

6
frontend/src/page/albums.vue
View file

@ -85,19 +85,19 @@
<v-card tile <v-card tile
:data-uid="album.UID" :data-uid="album.UID"
style="user-select: none" style="user-select: none"
class="result accent lighten-3" class="result card"
:class="album.classes(selection.includes(album.UID))" :class="album.classes(selection.includes(album.UID))"
:to="album.route(view)" :to="album.route(view)"
@contextmenu.stop="onContextMenu($event, index)" @contextmenu.stop="onContextMenu($event, index)"
> >
<div class="card-background accent lighten-3" style="user-select: none"></div> <div class="card-background card" style="user-select: none"></div>
<v-img <v-img
:src="album.thumbnailUrl('tile_500')" :src="album.thumbnailUrl('tile_500')"
:alt="album.Title" :alt="album.Title"
:transition="false" :transition="false"
aspect-ratio="1" aspect-ratio="1"
style="user-select: none" style="user-select: none"
class="accent lighten-2 clickable" class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)" @touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)" @mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/labels.vue
View file

@ -63,19 +63,19 @@
<v-card tile <v-card tile
:data-uid="label.UID" :data-uid="label.UID"
style="user-select: none" style="user-select: none"
class="result accent lighten-3" class="result card"
:class="label.classes(selection.includes(label.UID))" :class="label.classes(selection.includes(label.UID))"
:to="label.route(view)" :to="label.route(view)"
@contextmenu.stop="onContextMenu($event, index)" @contextmenu.stop="onContextMenu($event, index)"
> >
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<v-img <v-img
:src="label.thumbnailUrl('tile_500')" :src="label.thumbnailUrl('tile_500')"
:alt="label.Name" :alt="label.Name"
:transition="false" :transition="false"
aspect-ratio="1" aspect-ratio="1"
style="user-select: none" style="user-select: none"
class="accent lighten-2 clickable" class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)" @touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)" @mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/library/browse.vue
View file

@ -51,18 +51,18 @@
> >
<v-card tile <v-card tile
:data-uid="model.UID" :data-uid="model.UID"
class="result accent lighten-3" class="result card"
:class="model.classes(selection.includes(model.UID))" :class="model.classes(selection.includes(model.UID))"
@contextmenu.stop="onContextMenu($event, index)" @contextmenu.stop="onContextMenu($event, index)"
> >
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<v-img <v-img
:src="model.thumbnailUrl('tile_500')" :src="model.thumbnailUrl('tile_500')"
:alt="model.Name" :alt="model.Name"
:transition="false" :transition="false"
loading="lazy" loading="lazy"
aspect-ratio="1" aspect-ratio="1"
class="accent lighten-2 clickable" class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)" @touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)" @mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/people/new.vue
View file

@ -46,12 +46,12 @@
<v-card :data-id="model.ID" <v-card :data-id="model.ID"
tile style="user-select: none;" tile style="user-select: none;"
:class="model.classes()" :class="model.classes()"
class="result accent lighten-3"> class="result card">
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<v-img :src="model.thumbnailUrl('tile_320')" <v-img :src="model.thumbnailUrl('tile_320')"
:transition="false" :transition="false"
aspect-ratio="1" aspect-ratio="1"
class="accent lighten-2 clickable" class="card darken-1 clickable"
@click.stop.prevent="onView(model)"> @click.stop.prevent="onView(model)">
<v-btn :ripple="false" :depressed="false" class="input-hidden" <v-btn :ripple="false" :depressed="false" class="input-hidden"
icon flat small absolute icon flat small absolute

6
frontend/src/page/people/recognized.vue
View file

@ -69,19 +69,19 @@
<v-card tile <v-card tile
:data-uid="model.UID" :data-uid="model.UID"
style="user-select: none" style="user-select: none"
class="result accent lighten-3" class="result card"
:class="model.classes(selection.includes(model.UID))" :class="model.classes(selection.includes(model.UID))"
:to="model.route(view)" :to="model.route(view)"
@contextmenu.stop="onContextMenu($event, index)" @contextmenu.stop="onContextMenu($event, index)"
> >
<div class="card-background accent lighten-3"></div> <div class="card-background card"></div>
<v-img <v-img
:src="model.thumbnailUrl('tile_320')" :src="model.thumbnailUrl('tile_320')"
:alt="model.Name" :alt="model.Name"
:transition="false" :transition="false"
aspect-ratio="1" aspect-ratio="1"
style="user-select: none" style="user-select: none"
class="accent lighten-2 clickable" class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)" @touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)" @touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)" @mousedown.stop.prevent="input.mouseDown($event, index)"