feat(files): responsive design for mobile and narrow screens

Signed-off-by: John Molakvoæ <[email protected]>

Author: skjnldsv

apps/files/src/components/FileEntry.vue

@@ -112,6 +112,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import isMobileMixin from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import Vue from 'vue'
 
 import { isCachedPreview } from '../services/PreviewService.ts'
@@ -141,6 +142,10 @@ export default Vue.extend({
 		NcLoadingIcon,
 	},
 
+	mixins: [
+		isMobileMixin,
+	],
+
 	props: {
 		active: {
 			type: Boolean,
@@ -285,13 +290,20 @@ export default Vue.extend({
 		},
 
 		enabledInlineActions() {
+			if (this.isMobile) {
+				return []
+			}
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
 		enabledMenuActions() {
+			if (this.isMobile) {
+				return this.enabledActions
+			}
+
 			return [
 				...this.enabledInlineActions,
-				...actions.filter(action => !action.inline),
+				...this.enabledActions.filter(action => !action.inline),
 			]
 		},
 

apps/files/src/components/FilesListVirtual.vue

@@ -225,6 +225,8 @@ export default Vue.extend({
 			// Show same padding as the checkbox right padding for visual balance
 			margin-right: var(--checkbox-padding);
 			color: var(--color-primary-element);
+			// No shrinking or growing allowed
+			flex: 0 0 var(--icon-preview-size);
 
 			& > span {
 				justify-content: flex-start;
@@ -284,7 +286,7 @@ export default Vue.extend({
 				margin: 0 var(--cell-margin);
 			}
 
-			& > button {
+			button {
 				.button-vue__text {
 					// Remove bold from default button styling
 					font-weight: normal;
@@ -315,7 +317,22 @@ export default Vue.extend({
 		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}
+
+		@media (max-width: 768px) {
+			// Hide any column after the size menu on mobile
+			.files-list__row-size ~ td,
+			.files-list__row-size ~ th {
+				display: none;
+			}
+		}
+
+		@media (max-width: 480px) {
+			// Hide any column after the actions menu on short mobile
+			.files-list__row-actions ~ td,
+			.files-list__row-actions ~ th {
+				display: none;
+			}
+		}
 	}
 }
-
 </style>