Frontend: Fix layout of live photos in landscape orientation

This commit is contained in:
Michael Mayer 2020-12-16 15:52:44 +01:00
parent 2949202479
commit 5a801f442d
8 changed files with 19 additions and 12 deletions

View file

@ -26,7 +26,7 @@
:data-uid="photo.UID"
class="p-photo"
xs12 sm6 md4 lg3 xl2 d-flex
v-bind:class="{ 'is-selected': $clipboard.has(photo) }"
v-bind:class="{ 'is-selected': $clipboard.has(photo), portrait: photo.Portrait }"
>
<v-hover>
<v-card tile slot-scope="{ hover }"
@ -56,7 +56,7 @@
align-center
justify-center
ma-0
class="p-photo-live"
class="live-player"
style="overflow: hidden;"
v-if="photo.Type === 'live'"
v-show="hover"

View file

@ -24,7 +24,7 @@
v-for="(photo, index) in photos"
:key="index"
:data-uid="photo.UID"
v-bind:class="{ selected: $clipboard.has(photo) }"
v-bind:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
class="p-photo"
xs4 sm3 md2 lg1 d-flex
>
@ -55,7 +55,7 @@
align-center
justify-center
ma-0
class="p-photo-live"
class="live-player"
style="overflow: hidden;"
v-if="photo.Type === 'live'"
v-show="hover"

View file

@ -101,13 +101,18 @@
text-align: left;
}
#photoprism .p-photo video {
width: 100% !important;
height: auto !important;
#photoprism .live-player video {
width: auto;
height: 100%;
position: absolute;
overflow: hidden;
}
#photoprism .portrait .live-player video {
width: 100%;
height: auto;
}
#photoprism table.photo-files tbody tr td:first-child {
width: 30%;
padding: 0 16px 0 24px;

View file

@ -61,6 +61,7 @@ export class Photo extends RestModel {
Private: false,
Scan: false,
Panorama: false,
Portrait: false,
TakenAt: "",
TakenAtLocal: "",
TakenSrc: "",

View file

@ -22,7 +22,7 @@
:data-uid="photo.UID"
class="p-photo"
xs12 sm6 md4 lg3 d-flex
v-bind:class="{ 'is-selected': $clipboard.has(photo) }"
v-bind:class="{ 'is-selected': $clipboard.has(photo), portrait: photo.Portrait }"
>
<v-hover>
<v-card tile slot-scope="{ hover }"
@ -52,7 +52,7 @@
align-center
justify-center
ma-0
class="p-photo-live"
class="live-player"
style="overflow: hidden;"
v-if="photo.Type === 'live'"
v-show="hover"

View file

@ -20,7 +20,7 @@
v-for="(photo, index) in photos"
:key="index"
:data-uid="photo.UID"
v-bind:class="{ selected: $clipboard.has(photo) }"
v-bind:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
class="p-photo"
xs4 sm3 md2 lg1 d-flex
>
@ -51,7 +51,7 @@
align-center
justify-center
ma-0
class="p-photo-live"
class="live-player"
style="overflow: hidden;"
v-if="photo.Type === 'live'"
v-show="hover"

View file

@ -69,6 +69,7 @@ type PhotoResult struct {
FileHash string `json:"Hash"`
FileWidth int `json:"Width"`
FileHeight int `json:"Height"`
FilePortrait bool `json:"Portrait"`
FilePrimary bool `json:"-"`
FileMissing bool `json:"-"`
FileVideo bool `json:"-"`

View file

@ -30,7 +30,7 @@ func PhotoSearch(f form.PhotoSearch) (results PhotoResults, count int, err error
Select(`photos.*,
files.id AS file_id, files.file_uid, files.instance_id, files.file_primary, files.file_missing, files.file_name,
files.file_root, files.file_hash, files.file_codec, files.file_type, files.file_mime, files.file_width,
files.file_height, files.file_aspect_ratio, files.file_orientation, files.file_main_color,
files.file_height, files.file_portrait, files.file_aspect_ratio, files.file_orientation, files.file_main_color,
files.file_colors, files.file_luminance, files.file_chroma, files.file_projection,
files.file_diff, files.file_video, files.file_duration, files.file_size,
cameras.camera_make, cameras.camera_model,