Improve appearance of the list view footer

Author: BurntimeX

com.woltlab.wcf/templates/shared_listView.tpl

@@ -54,10 +54,10 @@
 		</div>
 	</div>
 
-	<div class="listView__footer">
+	<div class="listView__footer" id="{$view->getID()}_footer">
 		{if $view->hasBulkInteractions()}
 			<div id="{$view->getID()}_selectionBar" class="listView__selectionBar dropdown" hidden>
-				<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button listView__bulkInteractionButton dropdownToggle"></button>
+				<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button small listView__bulkInteractionButton dropdownToggle"></button>
 				<ul class="dropdownMenu">
 					<li class="disabled"><span>{lang}wcf.global.loading{/lang}</span></li>
 					<li class="dropdownDivider"></li>

ts/WoltLabSuite/Core/Component/ListView/Selection.ts

@@ -168,6 +168,8 @@ export class Selection extends EventTarget {
       return;
     }
 
+    this.dispatchEvent(new CustomEvent("list-view:update-selection"));
+
     if (selectedIds.length === 0) {
       this.#selectionBar.hidden = true;
       return;
@@ -284,6 +286,7 @@ export class Selection extends EventTarget {
 
 interface SelectionEventMap {
   "list-view:get-bulk-interactions": CustomEvent<{ objectIds: number[] }>;
+  "list-view:update-selection": CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/Core/Component/ListView/State.ts

@@ -24,6 +24,7 @@ export class State extends EventTarget {
   readonly #pagination: WoltlabCorePaginationElement;
   readonly #selection: Selection;
   readonly #sorting: Sorting;
+  readonly #listViewFooter: HTMLElement;
   #pageNo: number;
 
   constructor(
@@ -39,6 +40,8 @@ export class State extends EventTarget {
     this.#baseUrl = baseUrl;
     this.#pageNo = pageNo;
 
+    this.#listViewFooter = document.getElementById(`${viewId}_footer`) as HTMLElement;
+
     this.#pagination = document.getElementById(`${viewId}_pagination`) as WoltlabCorePaginationElement;
     this.#pagination.addEventListener("switchPage", (event: CustomEvent) => {
       void this.#switchPage(event.detail, StateChangeCause.Pagination);
@@ -60,12 +63,16 @@ export class State extends EventTarget {
         new CustomEvent("list-view:get-bulk-interactions", { detail: { objectIds: event.detail.objectIds } }),
       );
     });
+    this.#selection.addEventListener("list-view:update-selection", () => {
+      this.#updateListViewFooter();
+    });
 
     window.addEventListener("popstate", () => {
       this.#handlePopState();
     });
 
     this.#updatePaginationUrl();
+    this.#updateListViewFooter();
   }
 
   getPageNo(): number {
@@ -97,6 +104,8 @@ export class State extends EventTarget {
     if (cause === StateChangeCause.Change || cause === StateChangeCause.Pagination) {
       this.#updateQueryString();
     }
+
+    this.#updateListViewFooter();
   }
 
   #switchPage(pageNo: number, source: StateChangeCause): void {
@@ -176,6 +185,10 @@ export class State extends EventTarget {
     this.#switchPage(pageNo, StateChangeCause.History);
   }
 
+  #updateListViewFooter(): void {
+    this.#listViewFooter.hidden = this.#pagination.count === 0 && this.#selection.getSelectedIds().length === 0;
+  }
+
   setBulkInteractionContextMenuOptions(options: string): void {
     this.#selection.setBulkInteractionContextMenuOptions(options);
   }

wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Selection.js

@@ -36,17 +36,38 @@
 }
 
 .listView__footer {
+	align-items: center;
 	background-color: var(--wcfContentContainerBackground);
 	bottom: 0;
 	display: flex;
 	gap: 10px;
+	margin-top: 20px;
+	min-height: 54px;
+	padding-top: 10px;
+	padding-bottom: 10px;
 	position: sticky;
 	z-index: 2;
 }
 
+@include screen-sm-down {
+	.listView__footer {
+		margin-left: -10px;
+		margin-right: -10px;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+}
+
+@include screen-md-up {
+	.listView__footer {
+		margin-left: -20px;
+		margin-right: -20px;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+}
+
 .listView__pagination {
-	margin-top: 10px;
-	margin-bottom: 10px;
 	margin-inline-start: auto;
 }