Simplify structure and fix styling

Signed-off-by: Julius Härtl <jus@bitgrid.net>
nextcloud · Jul 31, 2020 · 7fccb03 · 7fccb03
1 parent ce0d2a0
commit 7fccb03
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 54 deletions.
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
@@ -30,55 +30,48 @@
 			style="display: none;"
 			multiple
 			@change="handleUploadFile">
-		<div class="attachment-list">
-			<ul>
-				<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
-					<a class="fileicon" :style="mimetypeForAttachment('none')" />
-					<div class="details">
-						<a>
-							<div class="filename">
-								<span class="basename">{{ attachment.name }}</span>
-							</div>
-							<progress :value="attachment.progress" max="100" />
-						</a>
-					</div>
-				</li>
-
-				<div class="attachment-list">
-					<ul>
-						<li v-for="attachment in attachments"
-							:key="attachment.id"
-							class="attachment">
-							<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
-							<div class="details">
-								<a :href="attachmentUrl(attachment)" target="_blank">
-									<div class="filename">
-										<span class="basename">{{ attachment.data }}</span>
-									</div>
-									<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
-									<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
-									<span class="filedate">{{ attachment.createdBy }}</span>
-								</a>
-							</div>
-							<Actions v-if="selectable">
-								<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
-									{{ t('deck', 'Add this attachment') }}
-								</ActionButton>
-							</Actions>
-							<Actions v-if="removable">
-								<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
-									{{ t('deck', 'Delete Attachment') }}
-								</ActionButton>
-
-								<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
-									{{ t('deck', 'Restore Attachment') }}
-								</ActionButton>
-							</Actions>
-						</li>
-					</ul>
+		<ul class="attachment-list">
+			<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
+				<a class="fileicon" :style="mimetypeForAttachment('none')" />
+				<div class="details">
+					<a>
+						<div class="filename">
+							<span class="basename">{{ attachment.name }}</span>
+						</div>
+						<progress :value="attachment.progress" max="100" />
+					</a>
 				</div>
-			</ul>
-		</div>
+			</li>
+			<li v-for="attachment in attachments"
+				:key="attachment.id"
+				class="attachment">
+				<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
+				<div class="details">
+					<a :href="attachmentUrl(attachment)" target="_blank">
+						<div class="filename">
+							<span class="basename">{{ attachment.data }}</span>
+						</div>
+						<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
+						<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
+						<span class="filedate">{{ attachment.createdBy }}</span>
+					</a>
+				</div>
+				<Actions v-if="selectable">
+					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
+						{{ t('deck', 'Add this attachment') }}
+					</ActionButton>
+				</Actions>
+				<Actions v-if="removable">
+					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
+						{{ t('deck', 'Delete Attachment') }}
+					</ActionButton>
+
+					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
+						{{ t('deck', 'Restore Attachment') }}
+					</ActionButton>
+				</Actions>
+			</li>
+		</ul>
 	</AttachmentDragAndDrop>
 </template>
 

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
@@ -633,13 +633,16 @@ export default {
 		width: 25vw;
 		min-width: 250px;
 		min-height: 120px;
-		margin: 20px 20px 60px 20px;
+		margin: 20px;
 		padding-bottom: 20px;
-	}
+		display: flex;
+		flex-direction: column;
 
-	.modal__content button {
-		float: right;
-		margin: 40px 3px 3px 0;
+		&::v-deep .attachment-list {
+			flex-shrink: 1;
+			overflow: scroll;
+			max-height: 50vh;
+		}
 	}
 
 </style>
diff --git a/webpack.js b/webpack.js
@@ -32,5 +32,5 @@ const config = {
 	}
 };
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(webpackConfig, config)