Improve UI

1 files changed, 54 insertions, 11 deletions

diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 427421af7d..ef90a348b4 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -16,8 +16,11 @@
 		@leave="leave"
 		@after-leave="afterLeave"
 	>
-		<div v-show="showBody">
+		<div v-show="showBody" class="content" :class="{ omitted }" ref="content">
 			<slot></slot>
+			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<span>{{ $ts.showMore }}</span>
+			</button>
 		</div>
 	</transition>
 </div>
@@ -54,10 +57,17 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		maxHeight: {
+			type: Number,
+			required: false,
+			default: null
+		},
 	},
 	data() {
 		return {
 			showBody: this.expanded,
+			omitted: null,
+			ignoreOmit: false,
 			faAngleUp, faAngleDown
 		};
 	},
@@ -73,6 +83,19 @@ export default defineComponent({
 		}, {
 			immediate: true
 		});
+
+		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+
+		const calcOmit = () => {
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			const height = this.$refs.content.offsetHeight;
+			this.omitted = height > this.maxHeight;
+		};
+
+		calcOmit();
+		new ResizeObserver((entries, observer) => {
+			calcOmit();
+		}).observe(this.$refs.content);
 	},
 	methods: {
 		toggleContent(show: boolean) {
@@ -127,7 +150,7 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
 
-		> div {
+		> .content {
 			overflow: auto;
 		}
 	}
@@ -169,12 +192,35 @@ export default defineComponent({
 		}
 	}
 
-	> div {
-		> ::v-deep(._content) {
-			padding: 24px;
+	> .content {
+		&.omitted {
+			position: relative;
+			max-height: var(--maxHeight);
+			overflow: hidden;
+
+			> .fade {
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 64px;
+				background: linear-gradient(0deg, var(--panel), var(--X15));
 
-			& + ._content {
-				border-top: solid 0.5px var(--divider);
+				> span {
+					display: inline-block;
+					background: var(--panel);
+					padding: 6px 10px;
+					font-size: 0.8em;
+					border-radius: 999px;
+					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+				}
+
+				&:hover {
+					> span {
+						background: var(--panelHighlight);
+					}
+				}
 			}
 		}
 	}
@@ -187,10 +233,7 @@ export default defineComponent({
 			}
 		}
 
-		> div {
-			> ::v-deep(._content) {
-				padding: 16px;
-			}
+		> .content {
 		}
 	}
 }