Cleanup for styling and indentation

src/module/compendium-browser.js

@@ -1614,12 +1614,12 @@ Hooks.on("renderDocumentDirectory", (app, html, options) => {
 		if (options.tabName == "items") {
 			compendiumButton = `
 			<div class="flexrow">
-        <button type="button" class="open-compendium-browser" data-tab="powers"><i class="fas fa-book"></i>${game.i18n.localize('CMPBrowser.Tab.SpellBrowser')}</button>
-        <button type="button" class="open-compendium-browser" data-tab="items"><i class="fas fa-book"></i>${game.i18n.localize('CMPBrowser.Tab.ItemBrowser')}</button>
+				<button type="button" class="open-compendium-browser" data-tab="powers"><i class="fas fa-atlas"></i>${game.i18n.localize('CMPBrowser.Tab.SpellBrowser')}</button>
+				<button type="button" class="open-compendium-browser" data-tab="items"><i class="fas fa-suitcase"></i>${game.i18n.localize('CMPBrowser.Tab.ItemBrowser')}</button>
 			</div>`;
 		}
 		else {
-			compendiumButton = `<button type="button" class="open-compendium-browser" data-tab="creatures"><i class="fas fa-book"></i>${game.i18n.localize('CMPBrowser.Tab.NPCBrowser')}</button>`;
+			compendiumButton = `<button type="button" class="open-compendium-browser" data-tab="creatures"><i class="fas fa-user"></i>${game.i18n.localize('CMPBrowser.Tab.NPCBrowser')}</button>`;
 		}
 		// Append button. Click handler added in 'ready' hook.
 		htmlElement.querySelector(".directory-footer").insertAdjacentHTML("beforeend", compendiumButton);

src/vue/CompendiumBrowser.vue

@@ -1,9 +1,7 @@
 <template>
 	<div class="compendium-browser-vue parent flexcol">
 		<!-- Tabs. -->
-    <!-- <section class="container container--top"> -->
 		<Tabs group="primary" :tabs="tabs.primary"/>
-    <!-- </section> -->
 
 		<!-- Filters + Content. -->
 		<section class="content">
@@ -14,7 +12,6 @@
 				have been opened at least once.
 			-->
 			<Tab group="primary" :tab="tabs.primary.creatures" classes="container container--bottom flexrow">
-        <!-- <Stub>Creatures</Stub> -->
 				<CompendiumBrowserCreatures v-if="tabs.primary.creatures.active || tabs.primary.creatures.opened" :tab="tabs.primary.creatures"/>
 			</Tab>
 
@@ -36,11 +33,13 @@
 // Import component dependencies.
 import Tabs from '@/components/parts/Tabs.vue';
 import Tab from '@/components/parts/Tab.vue';
-import Stub from '@/components/dialogs/compendium-browser/stub.vue';
 import CompendiumBrowserCreatures from '@/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue';
 // import CompendiumBrowserPowers from '@/components/dialogs/compendium-browser/CompendiumBrowserPowers.vue';
 // import CompendiumBrowserItems from '@/components/dialogs/compendium-browser/CompendiumBrowserItems.vue';
 
+// Stub is an example component and should be removed once the others are all working.
+import Stub from '@/components/dialogs/compendium-browser/Stub.vue';
+
 export default {
 	name: 'ArchmageCompendiumBrowser',
 	props: [`context`],
@@ -63,7 +62,8 @@ export default {
 			// The only variable we actually need to track is the active tab.
 			tabs: {
 				primary: {
-          // Default tab is assigned in the flags() computed property.
+					// Default tab is assigned based on the context prop passed in
+					// from the Application class.
 					creatures: {
 						key: 'creatures',
 						label: game.i18n.localize('CMPBrowser.Tab.NPCBrowser'),
@@ -93,14 +93,91 @@ export default {
 		console.log("Creating compendium browser...");
 	},
 	async mounted() {
-    // const defaultTab = this?.context?.defaultTab ?? 'creatures';
-    // if (this.tabs.primary?.[defaultTab]) {
-    //   this.tabs.primary[defaultTab].active = true;
-    // }
-    // else {
-    //   this.tabs.primary.creatures.active = true;
-    // }
 		console.log("Compendium browser mounted.");
 	}
 }
 </script>
+
+<style lang="less">
+// Import our style dependencies used in subcomponents.
+@import "@vueform/slider/themes/default.css";
+@import "@vueform/multiselect/themes/default.css";
+
+:root {
+	--slider-bg: #00000025;
+	--slider-connect-bg: cornflowerblue;
+	--slider-handle-ring-color: cornflowerblue;
+	--color-blue: cornflowerblue;
+	--font-roboto: Roboto, sans-serif;
+}
+
+.compendium-browser-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 24px;
+	text-align: center;
+
+	i {
+		margin-right: 10px;
+		color: var(--color-blue);
+	}
+}
+
+// Override ranger slider styles.
+.slider-wrapper {
+	width: 227px;
+	padding: 0 10px 0 20px;
+}
+
+.level-range {
+	align-items: center;
+}
+
+.level-label {
+	flex: 0 auto;
+	font-family: var(--font-roboto);
+	line-height: 1;
+}
+
+// Override multiselect styles.
+.multiselect-tag {
+	background-color: var(--color-blue);
+}
+
+.multiselect {
+	&.is-active {
+		box-shadow: none;
+	}
+}
+
+// Override compendium browser base styles.
+.compendium-browser {
+	.control-area {
+		.filtercontainer {
+			label {
+				font-weight: bold;
+			}
+
+			.slider-wrapper div {
+				margin: 0;
+			}
+
+			.multiselect,
+			.multiselect div {
+				margin: auto;
+			}
+
+			.multiselect .multiselect-tags {
+				margin: 5px 0 0 5px;
+				padding: 0;
+
+				.multiselect-tag {
+					margin: 0 5px 5px 0;
+				}
+			}
+		}
+	}
+}
+
+</style>

src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue

@@ -26,18 +26,17 @@
 				<h3>{{ game.i18n.localize('General') }}</h3>
 				<!-- Level range slider. -->
 				<div class="filter">
-          <dt class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</dt>
+					<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
 					<div class="level-range flexrow">
 						<div class="level-label"><span>{{ crRange[0] }}</span><span v-if="crRange[0] !== crRange[1]"> - {{ crRange[1] }}</span></div>
 						<div class="level-input slider-wrapper flexrow">
-              <Slider v-model="crRange" :min="1" :max="30" :tooltips="false"/>
+							<Slider v-model="crRange" :min="0" :max="30" :tooltips="false"/>
 						</div>
 					</div>
 				</div>
 				<!-- Size filter. -->
 				<div class="filter">
-          <dt class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</dt>
-          <dd>
+					<label class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</label>
 					<Multiselect
 						v-model="size"
 						mode="tags"
@@ -45,7 +44,6 @@
 						:create-option="false"
 						:options="getOptions(CONFIG.DND5E.actorSizes)"
 					/>
-          </dd>
 				</div>
 			</div>
 
@@ -69,9 +67,9 @@
 						</div>
 						<!-- Second row is supplemental info. -->
 						<div class="npc-tags">
-              <span class="cr" :data-tooltip="game.i18n.localize('Challenge rating')">{{ entry.system.details.cr }}</span>
-              <span class="size">{{ entry.system.traits.size }}</span>
-              <span class="type">{{ entry.system.details.type.value }}</span>
+							<span class="cr" :data-tooltip="game.i18n.localize('Challenge rating')">{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}</span>
+							<span class="size">{{ CONFIG.DND5E.actorSizes?.[entry.system.traits.size].label ?? entry.system.traits.size }}</span>
+							<span class="type">{{ CONFIG.DND5E.creatureTypes?.[entry.system.details.type.value]?.label ?? entry.system.details.type.value }}</span>
 						</div>
 					</div>
 				</li>
@@ -110,7 +108,8 @@ export default {
 			getActorModuleArt,
 			openDocument,
 			startDrag,
-      // Foundry base props and methods.
+			// Foundry base props and methods. These need to be included here if you
+			// want to access them in the template section above.
 			CONFIG,
 			game,
 		}
@@ -137,8 +136,9 @@ export default {
 			packIndex: [],
 			// Filters.
 			name: '',
-      // @todo partial CRs like 1/4.
-      crRange: [1, 30],
+			// Mixed decimals and ints aren't supported by the slider, so
+			// just use 0 for all CRs below 1.
+			crRange: [0, 30],
 			size: [],
 		}
 	},
@@ -172,7 +172,7 @@ export default {
 		 resetFilters() {
 			this.sortBy = 'name';
 			this.name = '';
-      this.crRange = [1, 30];
+			this.crRange = [0, 30];
 			this.size = [];
 		},
 		/**
@@ -227,12 +227,14 @@ export default {
 
 			// Sort.
 			result = result.sort((a, b) => {
+				// Add sorts here.
 				switch (this.sortBy) {
 					case 'name':
 						return a.name.localeCompare(b.name);
 					case 'size':
 						return a.system.traits.size.localeCompare(b.system.traits.size);
 				}
+				// If no sorts match, sort by CR.
 				return a.system.details.cr - b.system.details.cr;
 			});
 
@@ -252,18 +254,19 @@ export default {
 			'dnd5e.monsters',
 			// insert additional packs as needed.
 		], [
-      'img',
 			'system.details.cr',
 			'system.details.type',
 			'system.traits.size'
 			// insert additional properties as needed.
 		]).then(packIndex => {
-      // Restore the pack art.
+			// Loading a new index blows away the module art that was loaded by the system.
+			// Step through the records and reassign their pack art.
 			if (!game.dnd5e?.moduleArt?.suppressArt && game.dnd5e?.moduleArt?.map?.size > 0) {
 				for (let record of packIndex) {
 					record.img = getActorModuleArt(record);
 				}
 			}
+			// Store our pack index for filtering, and remove the loading indicator.
 			this.packIndex = packIndex;
 			this.loaded = true;
 		});
@@ -298,7 +301,5 @@ export default {
 }
 </script>
 
-<style>
-  @import "@vueform/slider/themes/default.css";
-  @import "@vueform/multiselect/themes/default.css";
+<style lang="less">
 </style>

src/vue/components/dialogs/compendium-browser/Stub.vue

@@ -0,0 +1,21 @@
+<template>
+  <h1>
+    <!-- Use <slot> to pass in content wrapped by this component's tag. -->
+    <slot></slot>
+  </h1>
+</template>
+
+<script>
+  export default {
+    name: 'Stub',
+    props: ['context']
+  }
+</script>
+
+<style lang="less" scoped>
+  // Scoped styles have special identifiers that prevent them
+  // from affecting anything outside of this component.
+  h1 {
+    color: red;
+  }
+</style>

src/vue/components/dialogs/compendium-browser/stub.vue

@@ -1,16 +0,0 @@
-<template>
-  <h1><slot></slot></h1>
-</template>
-
-<script>
-  export default {
-    name: 'Stub',
-    props: ['context']
-  }
-</script>
-
-<style lang="less" scoped>
-  h1 {
-    color: red;
-  }
-</style>