style: update modal UI styles

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/card/AttachmentList.vue

@@ -269,7 +269,7 @@ export default {
 			padding-left: 44px;
 			background-position: 16px center;
 			flex-grow: 1;
-			height: 44px;
+			height: auto;
 			margin-bottom: 12px;
 			text-align: left;
 		}

src/components/card/AttachmentsTab.vue

@@ -7,7 +7,6 @@
 			@restore-attachment="restoreAttachment" />
 	</div>
 </template>
-
 <script>
 import AttachmentList from './AttachmentList'
 

src/components/card/CardModal.vue

@@ -53,7 +53,7 @@
 			</div>
 		</div>
 		<div class="content">
-			<div class="content-tabs">
+			<div :class="[currentCard.labels.length > 3 ? 'content-two-tabs' : 'content-three-tabs']">
 				<MembersTab
 					:card="currentCard"
 					:active-tabs="activeTabs"
@@ -91,15 +91,22 @@
 			<Description :key="currentCard.id" :card="currentCard" @change="descriptionChanged" />
 		</div>
 		<div class="activities">
-			<h2 class="activities-title">
+			<div class="activities-header">
-				<div class="icon-activity" /> {{ t('deck', 'Activity') }}
+				<div class="activities-title">
-			</h2>
+					<i class="icon-activity" /> {{ t('deck', 'Activity') }}
-			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
+				</div>
-			<ActivityList v-if="hasActivity"
+				<div class="show-details-btn" @click="showDetails = !showDetails">
-				filter="deck"
+					{{ showDetails ? t('deck', 'Hide details') : t('deck', 'Show details') }}
-				:object-id="currentBoard.id"
+				</div>
-				object-type="deck"
+			</div>
-				type="deck" />
+			<template v-if="showDetails">
+				<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
+				<ActivityList v-if="hasActivity"
+					filter="deck"
+					:object-id="currentBoard.id"
+					object-type="deck"
+					type="deck" />
+			</template>
 		</div>
 	</div>
 </template>
@@ -166,6 +173,7 @@ export default {
 			comment: '',
 			currentTab: null,
 			activeTabs: [],
+			showDetails: false,
 		}
 	},
 	computed: {
@@ -292,12 +300,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content-tabs {
+.show-details-btn {
+	cursor: pointer;
+	text-decoration: underline;
+	color: var(--color-text-maxcontrast);
+}
+
+.activities-header{
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-two-tabs, .content-three-tabs {
 	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
 	align-items: flex-start;
 }
 
+.content-two-tabs {
+	grid-template-columns: 1fr 2fr;
+}
+
+.content-three-tabs {
+	grid-template-columns: 1fr 2fr 1fr;
+}
+
 .icon-activity {
 	background-image: url(../../../img/flash-black.svg);
 	width: 15px;
@@ -324,7 +350,7 @@ export default {
 }
 
 .activities {
-	&-title {
+	&-title{
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -338,12 +364,12 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&-input {
+	&-input{
 		width: 100%;
 		margin-left: 10px;
 	}
 
-	.comment-form {
+	.comment-form{
 		width: 95%;
 	}
 }
@@ -366,10 +392,8 @@ export default {
 
 .tabs {
 	margin-top: 20px;
-	margin-bottom: 20px;
+	margin-bottom: 5px;
-	display: grid;
+	display: flex;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 30px;
 }
 
 .tab {
@@ -382,12 +406,11 @@ export default {
 	display: flex;
 	flex-direction: row;
 	overflow: hidden;
-	padding: 10px 10px;
+	padding: 10px 20px;
 	border-radius: 10px;
 	font-size: 85%;
 	margin-bottom: 3px;
-	margin-right: 5px;
+	margin-right: 15px;
-	width: 100px;
 }
 
 .action-btn {

src/components/card/CardSidebarTabComments.vue

@@ -26,8 +26,7 @@
 			</InfiniteLoading>
 		</ul>
 		<div v-else-if="isLoading" class="icon icon-loading" />
-		<div v-else class="emptycontent">
+		<div v-else>
-			<div :class="{ 'icon-comment': !error, 'icon-error': error }" />
 			<p>{{ error || t('deck', 'No comments yet. Begin the discussion!') }}</p>
 		</div>
 	</div>

src/components/card/DueDateTab.vue

@@ -166,12 +166,12 @@ export default {
 	},
 }
 </script>
-
 <style lang="scss" scoped>
 .section-details{
 	margin-right: 5px;
 	display: flex;
 	align-items: flex-start;
+	margin-top: 10px;
 }
 </style>
 

src/components/card/MembersTab.vue

@@ -192,6 +192,7 @@ export default {
 
 .section-details {
 	width: 100%;
+	margin-top: 10px;
 }
 
 .members {

src/components/card/ProjectTab.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="activeTabs.includes('project')" class="section-details">
-		<div class="section-wrapper">
+		<div class="section-wrapper project-tab">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"
@@ -8,10 +8,8 @@
 		</div>
 	</div>
 </template>
-
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
-
 export default {
 	components: { CollectionList },
 	props: {
@@ -26,7 +24,12 @@ export default {
 	},
 }
 </script>
-
+<style scoped>
+.section-details{
+	margin-top: 10px;
+	min-width: 500px;
+}
+</style>
 <style lang="scss">
 #collection-select-container p {
 	display: none;
@@ -35,4 +38,16 @@ export default {
 #collection-list li {
 	align-items: flex-end;
 }
+
+.project-tab .collection-list-item {
+	display: flex !important;
+	align-items: center !important;
+}
+
+.project-tab .linked-icons {
+	img {
+		height: 20px !important;
+	}
+}
+
 </style>

src/components/card/TagsTab.vue

@@ -144,7 +144,7 @@ export default {
 	align-items: center;
 
 	&-item {
-		border-radius: 5px;
+		border-radius: 15px;
 		margin-right: 5px;
 		min-width: 110px;
 		height: 32px;
@@ -156,12 +156,16 @@ export default {
 
 .select-tag {
 	height: 32px;
-  width: 34px;
+	width: 34px;
-  padding: 5px 8px;
+	padding: 5px 8px;
 }
 
 .tag{
 	padding: 0px 5px;
 	border-radius: 15px;
 }
+
+.section-details{
+	margin-top: 10px;
+}
 </style>