Remove frame rowHeight dep

src/App.vue

@@ -138,4 +138,11 @@ body {
 
     width: calc(100% - var(--body-container-margin)*1); // was *2
 }
+
+// Fill all available space
+.fill-block {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
 </style>

src/components/Timeline.vue

@@ -51,20 +51,18 @@
                     class="photo-row"
                     :style="{ height: rowHeight + 'px' }">
 
-                    <div class="photo" v-for="(photo, index) in item.photos" :key="index">
+                    <div class="photo" v-for="(photo, index) in item.photos" :key="index"
+                         :style="{ width: rowHeight + 'px' }">
                         <Folder v-if="photo.flag & c.FLAG_IS_FOLDER"
                                 :data="photo"
-                                :rowHeight="rowHeight"
                                 :key="photo.fileid" />
 
                         <Tag v-else-if="photo.flag & c.FLAG_IS_TAG"
                                 :data="photo"
-                                :rowHeight="rowHeight"
                                 :key="photo.fileid" />
 
                         <Photo v-else
                                 :data="photo"
-                                :rowHeight="rowHeight"
                                 :day="item.day"
                                 @select="selectionManager.selectPhoto"
                                 @delete="deleteFromViewWithAnimation"
@@ -841,6 +839,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     position: relative;
     cursor: pointer;
     vertical-align: top;
+    height: 100%;
 }
 
 .head-row {

src/components/frame/Folder.vue

@@ -1,28 +1,25 @@
 <template>
-    <div class="folder" v-bind:class="{
+    <div class="folder fill-block" :class="{
         hasPreview: previewFileInfos.length > 0,
         onePreview: previewFileInfos.length === 1,
         hasError: error,
     }"
-        @click="openFolder(data)"
-        v-bind:style="{
-            width: rowHeight + 'px',
-            height: rowHeight + 'px',
-        }">
-        <div class="big-icon">
+    @click="openFolder(data)">
+        <div class="big-icon fill-block">
             <FolderIcon class="memories__big-folder-icon" />
             <div class="name">{{ data.name }}</div>
         </div>
 
-        <div class="previews">
+        <div class="previews fill-block">
             <div class="img-outer" v-for="info of previewFileInfos" :key="info.fileid">
                 <img
-                    :key="'fpreview-' + info.fileid"
-                    :src="getPreviewUrl(info.fileid, info.etag)"
+                    class="fill-block"
                     :class="{
                         'p-loading': !(info.flag & c.FLAG_LOADED),
                         'p-load-fail': info.flag & c.FLAG_LOAD_FAIL,
                     }"
+                    :key="'fpreview-' + info.fileid"
+                    :src="getPreviewUrl(info.fileid, info.etag)"
                     @load="info.flag |= c.FLAG_LOADED"
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
             </div>
@@ -47,7 +44,6 @@ import FolderIcon from 'vue-material-design-icons/Folder.vue';
 })
 export default class Folder extends Mixins(GlobalMixin) {
     @Prop() data: IFolder;
-    @Prop() rowHeight: number;
 
     // Separate property because the one on data isn't reactive
     private previewFileInfos: IFileInfo[] = [];
@@ -127,7 +123,6 @@ export default class Folder extends Mixins(GlobalMixin) {
     z-index: 100;
     position: absolute;
     top: 0; left: 0;
-    width: 100%; height: 100%;
     transition: opacity 0.2s ease-in-out;
 
     > .name {
@@ -176,7 +171,6 @@ export default class Folder extends Mixins(GlobalMixin) {
     z-index: 3;
     line-height: 0;
     position: absolute;
-    height: 100%; width: 100%;
     padding: 2px;
     @media (max-width: 768px) { padding: 1px; }
 
@@ -194,8 +188,6 @@ export default class Folder extends Mixins(GlobalMixin) {
 
         > img {
             padding: 0;
-            width: 100%;
-            height: 100%;
             filter: brightness(50%);
             transition: filter 0.2s ease-in-out;
 

src/components/frame/Photo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-outer"
+    <div class="p-outer fill-block"
         :class="{
             'selected': (data.flag & c.FLAG_SELECTED),
             'p-loading': !(data.flag & c.FLAG_LOADED),
@@ -15,10 +15,7 @@
         <Video :size="20" v-if="data.flag & c.FLAG_IS_VIDEO" />
         <Star :size="20" v-if="data.flag & c.FLAG_IS_FAVORITE" />
 
-        <div class="img-outer" :style="{
-                width: rowHeight + 'px',
-                height: rowHeight + 'px',
-            }"
+        <div class="img-outer fill-block"
             @click="click"
             @contextmenu="contextmenu"
             @touchstart="touchstart"
@@ -26,6 +23,7 @@
             @touchend="touchend"
             @touchcancel="touchend" >
             <img
+                class="fill-block"
                 :src="src()"
                 :key="data.fileid"
 
@@ -61,7 +59,6 @@ export default class Photo extends Mixins(GlobalMixin) {
     private touchTimer = 0;
 
     @Prop() data: IPhoto;
-    @Prop() rowHeight: number;
     @Prop() day: IDay;
 
     @Emit('delete') emitDelete(remPhotos: IPhoto[]) {}
@@ -272,7 +269,6 @@ div.img-outer {
         background-clip: content-box;
         object-fit: cover;
         cursor: pointer;
-        width: 100%; height: 100%;
         transform: translateZ(0);
 
         -webkit-tap-highlight-color: transparent;

src/components/frame/Tag.vue

@@ -1,28 +1,25 @@
 <template>
-    <div class="tag" v-bind:class="{
+    <div class="tag fill-block" :class="{
         hasPreview: previews.length > 0,
         onePreview: previews.length === 1,
         hasError: error,
         isFace: isFace,
     }"
-        @click="openTag(data)"
-        v-bind:style="{
-            width: rowHeight + 'px',
-            height: rowHeight + 'px',
-        }">
+    @click="openTag(data)">
 
         <div class="bbl"> <NcCounterBubble> {{ data.count }} </NcCounterBubble> </div>
         <div class="name"> {{ data.name }} </div>
 
-        <div class="previews">
+        <div class="previews fill-block" ref="previews">
             <div class="img-outer" v-for="info of previews" :key="info.fileid">
                 <img
-                    :key="'fpreview-' + info.fileid"
-                    :src="getPreviewUrl(info.fileid, info.etag)"
+                    class="fill-block"
                     :class="{
                         'p-loading': !(info.flag & c.FLAG_LOADED),
                         'p-load-fail': info.flag & c.FLAG_LOAD_FAIL,
                     }"
+                    :key="'fpreview-' + info.fileid"
+                    :src="getPreviewUrl(info.fileid, info.etag)"
                     :style="getCoverStyle(info)"
                     @load="info.flag |= c.FLAG_LOADED"
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
@@ -56,7 +53,6 @@ interface IFaceDetection extends IPhoto {
 })
 export default class Tag extends Mixins(GlobalMixin) {
     @Prop() data: ITag;
-    @Prop() rowHeight: number;
     @Prop() noNavigate: boolean;
 
     // Separate property because the one on data isn't reactive
@@ -159,13 +155,19 @@ export default class Tag extends Mixins(GlobalMixin) {
         // if the face is larger than the image, we don't zoom out (reason for the Math.max)
         const zoom = Math.max(1, (1 / detection.width) * 0.4)
 
+        // Get center coordinate in percent
         const horizontalCenterOfFace = (detection.x + detection.width / 2) * 100
         const verticalCenterOfFace = (detection.y + detection.height / 2) * 100
 
+        // Get preview element dimensions
+        const elem = this.$refs.previews as HTMLElement;
+        const elemWidth = elem.clientWidth;
+        const elemHeight = elem.clientHeight;
+
         return {
             // we translate the image so that the center of the detected face is in the center
             // and add the zoom
-            transform: `translate(calc(${this.rowHeight}px/2 - ${horizontalCenterOfFace}% ), calc(${this.rowHeight}px/2 - ${verticalCenterOfFace}% )) scale(${zoom})`,
+            transform: `translate(calc(${elemWidth}px/2 - ${horizontalCenterOfFace}% ), calc(${elemHeight}px/2 - ${verticalCenterOfFace}% )) scale(${zoom})`,
             // this is necessary for the zoom to zoom toward the center of the face
             transformOrigin: `${horizontalCenterOfFace}% ${verticalCenterOfFace}%`,
         }
@@ -209,7 +211,6 @@ export default class Tag extends Mixins(GlobalMixin) {
     z-index: 3;
     line-height: 0;
     position: absolute;
-    height: 100%; width: 100%;
     padding: 2px;
     @media (max-width: 768px) { padding: 1px; }
 
@@ -229,7 +230,6 @@ export default class Tag extends Mixins(GlobalMixin) {
 
         > img {
             padding: 0;
-            width: 100%;
             filter: brightness(60%);
             cursor: pointer;
             transition: filter 0.2s ease-in-out;