Merge pull request #1868 from nextcloud/artonge/backport/stable27/1867

[stable27] Make file list semantically correct
nextcloud · Jun 13, 2023 · d9f946e · d9f946e
2 parents 572944b + 2e1b510
commit d9f946e
Show file tree

Hide file tree

Showing 19 changed files with 42 additions and 36 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...ue-material-design-icons_AlertCircle_vue-node_modules_vue-material-design-icons-ea65fb.js b/...ue-material-design-icons_AlertCircle_vue-node_modules_vue-material-design-icons-ea65fb.js
diff --git a/...aterial-design-icons_AlertCircle_vue-node_modules_vue-material-design-icons-ea65fb.js.map b/...aterial-design-icons_AlertCircle_vue-node_modules_vue-material-design-icons-ea65fb.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-4e283b.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-4e283b.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-4e283b.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-4e283b.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-c67b29.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-c67b29.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-c67b29.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-c67b29.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_components_Collection_CollectionContent_vue.js b/js/photos-src_components_Collection_CollectionContent_vue.js
diff --git a/js/photos-src_components_Collection_CollectionContent_vue.js.map b/js/photos-src_components_Collection_CollectionContent_vue.js.map
diff --git a/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js b/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js
diff --git a/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map b/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map
diff --git a/js/photos-src_views_AlbumContent_vue.js b/js/photos-src_views_AlbumContent_vue.js
diff --git a/js/photos-src_views_AlbumContent_vue.js.map b/js/photos-src_views_AlbumContent_vue.js.map
diff --git a/js/photos-src_views_Timeline_vue.js b/js/photos-src_views_Timeline_vue.js
diff --git a/js/photos-src_views_Timeline_vue.js.map b/js/photos-src_views_Timeline_vue.js.map
diff --git a/src/components/FilesListViewer.vue b/src/components/FilesListViewer.vue
@@ -35,20 +35,21 @@
 				:scroll-to-key="scrollToSection"
 				@need-content="needContent">
 				<ul slot-scope="{renderedRows}">
-					<div v-for="row of renderedRows"
-						:key="row.key"
-						class="tiled-row"
-						:class="{'files-list-viewer__section-header': row.items[0].sectionHeader}"
-						:style="{height: `${row.height}px`}">
+					<template v-for="row of renderedRows">
+						<!--
+							We are subtracting 1 from flex-basis to compensate for rounding issues.
+							The flex algo will then compensate with flex-grow.
+						-->
 						<li v-for="item of row.items"
 							:key="item.id"
-							:style="{ width: item.ratio ? `${row.height * item.ratio}px` : '100%', height: `${row.height}px`}">
+							:class="{'files-list-viewer__section-header': item.sectionHeader}"
+							:style="{ 'flex-basis': item.ratio ? `${row.height * item.ratio - 1}px` : '100%', height: `${row.height}px`}">
 							<!-- Placeholder when initial loading -->
 							<div v-if="showPlaceholders" class="files-list-viewer__placeholder" />
 							<!-- Real file. -->
 							<slot v-else :file="item" :distance="row.distance" />
 						</li>
-					</div>
+					</template>
 				</ul>
 				<NcLoadingIcon v-if="loading && !showPlaceholders" slot="loader" class="files-list-viewer__loader" />
 			</VirtualScrolling>
@@ -279,9 +280,14 @@ export default {
 
 	.tiled-container {
 		flex-basis: 0;
+	}
+
+	ul {
+		display: flex;
+		flex-wrap: wrap;
 
-		.tiled-row {
-			display: flex;
+		li {
+			flex-grow: 1;
 		}
 	}