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

UX: Tweak breakpoints of album, label & photo grids

Browse source
This commit is contained in:
Michael Mayer 2021-01-08 14:21:26 +01:00
parent 6811a07e8a
commit 0ae5b7831d
10 changed files with 53 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app.js
View file

@ -64,10 +64,9 @@ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/
navigator.userAgent
);
// Initialize language and detect alignment
Vue.config.language = config.values.settings.ui.language;
Settings.defaultLocale = Vue.config.language.substring(0, 2);
// Detect if current language required RTL alignment
const languages = options.Languages();
const rtl = languages.some((lang) => lang.value === Vue.config.language && lang.rtl);

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

@ -25,7 +25,7 @@
:key="index"
:data-uid="photo.UID"
class="p-photo"
xs12 sm6 md4 lg2 d-flex
xs12 sm6 md4 lg3 xlg2 xxxl1 d-flex
:class="{ 'is-selected': clipboard.has(photo), portrait: photo.Portrait }"
>
<v-hover>

24
frontend/src/css/app.css
View file

@ -44,6 +44,30 @@ https://docs.photoprism.org/developer-guide/
@import url("files.css");
@import url("help.css");
@media (min-width: 1750px) {
.flex.xlg2 {
flex-basis: 16.666666666666664%;
flex-grow: 0;
max-width: 16.666666666666664%;
}
}
@media (min-width: 2400px) {
.flex.xxl1 {
flex-basis: 8.333333333333332%;
flex-grow: 0;
max-width: 8.333333333333332%;
}
}
@media (min-width: 2550px) {
.flex.xxxl1 {
flex-basis: 8.333333333333332%;
flex-grow: 0;
max-width: 8.333333333333332%;
}
}
html,
body {
overscroll-behavior-y: contain;

2
frontend/src/pages/albums.vue
View file

@ -83,7 +83,7 @@
:key="index"
:data-uid="album.UID"
class="p-album"
xs6 sm4 md3 lg2 d-flex
xs6 sm4 md3 lg2 xxl1 d-flex
>
<v-hover>
<v-card slot-scope="{ hover }" tile

2
frontend/src/pages/labels.vue
View file

@ -60,7 +60,7 @@
:key="index"
class="p-label"
:data-uid="label.UID"
xs6 sm4 md3 lg2 d-flex
xs6 sm4 md3 lg2 xxl1 d-flex
>
<v-hover>
<v-card slot-scope="{ hover }" tile

2
frontend/src/pages/library/files.vue
View file

@ -50,7 +50,7 @@
:key="index"
:data-uid="model.UID"
class="p-file"
xs6 sm4 md3 lg2 d-flex
xs6 sm4 md3 lg2 xxl1 d-flex
>
<v-hover>
<v-card slot-scope="{ hover }" tile

13
frontend/src/share.js
View file

@ -54,6 +54,7 @@ import VueInfiniteScroll from "vue-infinite-scroll";
import VueModal from "vue-js-modal";
import Hls from "hls.js";
import { $gettext, Mount } from "common/vm";
import * as options from "./options/options";
// Initialize helpers
const viewer = new Viewer();
@ -63,6 +64,12 @@ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/
navigator.userAgent
);
// Initialize language and detect alignment
Vue.config.language = config.values.settings.ui.language;
Settings.defaultLocale = Vue.config.language.substring(0, 2);
const languages = options.Languages();
const rtl = languages.some((lang) => lang.value === Vue.config.language && lang.rtl);
// HTTP Live Streaming (video support)
window.Hls = Hls;
@ -77,12 +84,10 @@ Vue.prototype.$socket = Socket;
Vue.prototype.$config = config;
Vue.prototype.$clipboard = clipboard;
Vue.prototype.$isMobile = isMobile;
Vue.prototype.$rtl = rtl;
// Register Vuetify
Vue.use(Vuetify, { theme: config.theme });
Vue.config.language = config.values.settings.ui.language;
Settings.defaultLocale = Vue.config.language.substring(0, 2);
Vue.use(Vuetify, { rtl, theme: config.theme });
// Register other VueJS plugins
Vue.use(GetTextPlugin, {

2
frontend/src/share/albums.vue
View file

@ -34,7 +34,7 @@
:key="index"
:data-uid="album.UID"
class="p-album"
xs6 sm4 md3 lg2 d-flex
xs6 sm4 md3 lg2 xxl1 d-flex
>
<v-hover>
<v-card slot-scope="{ hover }" tile

2
frontend/src/share/photo/cards.vue
View file

@ -21,7 +21,7 @@
:key="index"
:data-uid="photo.UID"
class="p-photo"
xs12 sm6 md4 lg2 d-flex
xs12 sm6 md4 lg3 xlg2 xxxl1 d-flex
:class="{ 'is-selected': $clipboard.has(photo), portrait: photo.Portrait }"
>
<v-hover>

26
frontend/src/share/photo/mosaic.vue
View file

@ -3,10 +3,10 @@
<v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
<v-card-title primary-title>
<div>
<h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
<h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
<translate>Couldn't find recently edited</translate>
</h3>
<h3 class="title ma-0 pa-0" v-else>
<h3 v-else class="title ma-0 pa-0">
<translate>Couldn't find anything</translate>
</h3>
<p class="mt-4 mb-0 pa-0">
@ -20,15 +20,15 @@
v-for="(photo, index) in photos"
:key="index"
:data-uid="photo.UID"
v-bind:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
class="p-photo"
xs4 sm3 md2 lg1 d-flex
>
<v-hover>
<v-card tile slot-scope="{ hover }"
@contextmenu="onContextMenu($event, index)"
<v-card slot-scope="{ hover }" tile
:class="$clipboard.has(photo) ? 'elevation-10 ma-0' : 'elevation-0 ma-1'"
:title="photo.Title">
:title="photo.Title"
@contextmenu="onContextMenu($event, index)">
<v-img :src="photo.thumbnailUrl('tile_224')"
aspect-ratio="1"
class="accent lighten-2 clickable"
@ -47,16 +47,16 @@
</v-layout>
<v-layout
v-if="photo.Type === 'live'"
v-show="hover"
fill-height
align-center
justify-center
ma-0
class="live-player"
style="overflow: hidden;"
v-if="photo.Type === 'live'"
v-show="hover"
>
<video width="224" height="224" autoplay loop muted playsinline :key="photo.videoUrl()">
<video :key="photo.videoUrl()" width="224" height="224" autoplay loop muted playsinline>
<source :src="photo.videoUrl()" type="video/mp4">
</video>
</v-layout>
@ -87,12 +87,12 @@
<template v-if="photo.isPlayable()">
<v-btn v-if="photo.Type === 'live'" color="white"
icon flat small absolute class="p-photo-live opacity-75" :depressed="false" :ripple="false"
@click.stop.prevent="openPhoto(index, true)" title="Live Photo">
title="Live Photo" @click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">adjust</v-icon>
</v-btn>
<v-btn v-else color="white"
outline fab absolute class="p-photo-play opacity-75" :depressed="false" :ripple="false"
@click.stop.prevent="openPhoto(index, true)" title="Play">
title="Play" @click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">play_arrow</v-icon>
</v-btn>
</template>
@ -108,7 +108,7 @@
</v-btn>
<v-btn v-else-if="photo.Type === 'raw'" :ripple="false"
icon flat small absolute class="p-photo-merged opacity-75"
@click.stop.prevent="openPhoto(index, true)" title="RAW">
title="RAW" @click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-burst">photo_camera</v-icon>
</v-btn>
</v-img>
@ -120,7 +120,7 @@
</template>
<script>
export default {
name: 'p-photo-mosaic',
name: 'PPhotoMosaic',
props: {
photos: Array,
selection: Array,