Add compact prop to FederationMissingNotice

Author: christophfriedrich

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `FederationMissingNotice`: Prop `compact`
+
 ## [2.18.3] - 2025-01-15
 
 ### Fixed

README.md

@@ -252,6 +252,7 @@ Show a message that a response is incomplete due to missing data from an inacces
 - `missing` (array, required): The identifiers of the federated back-ends that are not providing data for the list of processes due to an issue.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `retry` (function): Displays a "retry" button which executes the given function. 
+- `compact` (boolean): Renders the notice more compact if set to `true`. Defaults to `false`.
 
 **Slots:**
 

components/FederationMissingNotice.vue

@@ -1,5 +1,5 @@
 <template>
-	<section v-if="services" class="vue-component message-block federation federation-backends">
+	<section v-if="services" class="vue-component message-block federation federation-backends" :class="{compact: compact}">
 		<AsyncButton v-if="retry" confirm class="retry" :fn="retry">Retry</AsyncButton>
 		<strong class="header">Incomplete</strong>
 		<p>
@@ -9,7 +9,7 @@
 			<li v-for="service in services">
 				<div class="fed-header">
 					<strong class="fed-title">{{ service }}</strong>
-					<ul class="badges small inline">
+					<ul v-if="!compact" class="badges small inline">
 						<li class="badge red">offline</li>
 					</ul>
 				</div>
@@ -39,6 +39,10 @@ export default {
 			type: Function,
 			default: null
 		},
+		compact: {
+			type: Boolean,
+			default: false
+		},
 		// Mixins don't work properly in web components,
 		// see https://github.com/vuejs/vue-web-component-wrapper/issues/30,
 		...FederationMixin.props
@@ -78,4 +82,25 @@ export default {
 		float: right;
 	}
 }
+
+.vue-component.federation-backends.compact {
+	margin: 0;
+	padding: 0.25em;
+
+	strong, p, ul, ul li, ul li div {
+		display: inline;
+	}
+	
+	strong.header, p {
+		margin-right: 5px;
+	}
+	
+	ul {
+		padding-left: 0;
+	}
+
+	li:not(:last-child)::after {
+		content: ", "
+	}
+}
 </style>