Various tweaks (#567)

* better button text alignment

* don’t wrap page title

* filter placeholders

* Update src/views/private/components/filter-drawer-detail/filter-input.vue

* Update src/lang/en-US/index.json

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

src/components/v-button/v-button.vue

@@ -311,6 +311,8 @@ body {
 
 		.content {
 			position: relative;
+			display: flex;
+			align-items: center;
 			line-height: normal;
 
 			&.invisible {

src/lang/en-US/index.json

@@ -203,6 +203,8 @@
 	"add_a_new_item": "Add a new item...",
 
 	"add_filter": "Add Filter",
+	"upper_limit": "Upper limit...",
+	"lower_limit": "Lower limit...",
 
 	"user_directory": "User Directory",
 	"help_and_docs": "Help & Docs",

src/layouts/cards/cards.vue

@@ -472,8 +472,9 @@ export default defineComponent({
 
 .item-count {
 	position: relative;
-	margin-right: 8px;
+	margin: 0 8px;
 	color: var(--foreground-subdued);
+	white-space: nowrap;
 }
 
 .fade-enter-active,

src/layouts/tabular/tabular.vue

@@ -600,8 +600,9 @@ export default defineComponent({
 
 .item-count {
 	position: relative;
-	margin-right: 8px;
+	margin: 0 8px;
 	color: var(--foreground-subdued);
+	white-space: nowrap;
 }
 
 .fade-enter-active,

src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue

@@ -187,10 +187,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-divider {
-	margin: 18px 0;
+	margin: 16px 0;
 }
 
 .field-filter {
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 }
 </style>

src/views/private/components/filter-drawer-detail/filter-input.vue

@@ -6,6 +6,7 @@
 				:value="csvValue[0]"
 				@input="setCSV(0, $event)"
 				:disabled="disabled"
+				:placeholder="$t('upper_limit')"
 			>
 				<template #append>
 					<v-icon name="vertical_align_top" />
@@ -16,6 +17,7 @@
 				:value="csvValue[1]"
 				@input="setCSV(1, $event)"
 				:disabled="disabled"
+				:placeholder="$t('lower_limit')"
 			>
 				<template #append>
 					<v-icon name="vertical_align_bottom" />
@@ -30,19 +32,26 @@
 				:type="type"
 				@input="setCSV(index, $event)"
 				:disabled="disabled"
+				:placeholder="$t('enter_a_value')"
 			>
 				<template #append>
 					<v-icon v-if="csvValue.length > 1" name="close" @click="removeCSV(val)" />
 				</template>
 			</v-input>
-			<v-button outlined dashed @click="addCSV" :disabled="disabled">
+			<v-button outlined full-width dashed @click="addCSV" :disabled="disabled">
 				<v-icon name="add" />
 				{{ $t('add_new') }}
 			</v-button>
 		</template>
 		<template v-else-if="['empty', 'nempty'].includes(operator) === false">
 			<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" :disabled="disabled" />
-			<v-input :disabled="disabled" v-else v-model="_value" :type="type" />
+			<v-input
+				:disabled="disabled"
+				v-else
+				v-model="_value"
+				:type="type"
+				:placeholder="$t('enter_a_value')"
+			/>
 		</template>
 	</div>
 </template>

src/views/private/components/header-bar/header-bar.vue

@@ -8,7 +8,7 @@
 			<slot name="title-outer:prepend" />
 		</div>
 
-		<div class="title-container">
+		<div class="title-container" :class="{ full: !$scopedSlots['title-outer:append'] }">
 			<div class="headline">
 				<slot name="headline" />
 			</div>
@@ -106,6 +106,26 @@ export default defineComponent({
 	.title-container {
 		position: relative;
 		margin-left: 12px;
+		overflow: hidden;
+
+		&.full {
+			margin-right: 20px;
+			padding-right: 20px;
+
+			&::after {
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				width: 20px;
+				background: linear-gradient(
+					90deg,
+					rgba(var(--background-page-rgb), 0) 0%,
+					rgba(var(--background-page-rgb), 1) 100%
+				);
+				content: '';
+			}
+		}
 
 		.headline {
 			position: absolute;
@@ -119,10 +139,11 @@ export default defineComponent({
 			position: relative;
 			display: flex;
 			align-items: center;
-		}
 
-		h1 {
-			flex-grow: 1;
+			h1 {
+				flex-grow: 1;
+				white-space: nowrap;
+			}
 		}
 	}