From 0d9762206f7fedacc2bb047e1ea830dec579d58c Mon Sep 17 00:00:00 2001
From: Dave Lane <dave@oerfoundation.org>
Date: Mon, 23 Sep 2024 09:34:14 +1200
Subject: [PATCH] wip

---
 src/lib/components/CollapsibleSection.svelte | 12 ++-
 src/lib/components/Filterable.svelte         | 41 ++++++++-
 src/routes/+page.svelte                      | 96 +++++---------------
 3 files changed, 71 insertions(+), 78 deletions(-)

diff --git a/src/lib/components/CollapsibleSection.svelte b/src/lib/components/CollapsibleSection.svelte
index cb701e5..b6bfa66 100644
--- a/src/lib/components/CollapsibleSection.svelte
+++ b/src/lib/components/CollapsibleSection.svelte
@@ -23,21 +23,25 @@
 </div>
 
 <style>
-  .collapsible { border-bottom: 1px solid var(--gray-light, #eee); }
+  .collapsible {
+    border-bottom: 1px solid var(--gray-light, #eee);
+	color: #eee !important;
+	background-color: #666 !important;
+  }
   h3 { margin: 0; }
   button {
     background-color: var(--background, #fff);
     color: var(--gray-darkest, #282828);
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    /*width: 100%;*/
 	border: none;
 	margin: 0;
 	padding: 1em 0.5em;
   }
-  button[aria-expanded="true"] {  border-bottom: 1px solid var(--gray-light, #eee); }
+  button[aria-expanded="true"] { border-bottom: 1px solid var(--gray-light, #eee); }
   button[aria-expanded="true"] .vert { display: none; }
   button:focus svg { outline: 2px solid; }
-  button [aria-expanded="true"] rect { fill: currentColor; }
+  button[aria-expanded="true"] rect { fill: currentColor; }
   svg { height: 0.7em; width: 0.7em; }
 </style>
diff --git a/src/lib/components/Filterable.svelte b/src/lib/components/Filterable.svelte
index fd311f8..2e2d61a 100644
--- a/src/lib/components/Filterable.svelte
+++ b/src/lib/components/Filterable.svelte
@@ -122,7 +122,7 @@
 		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
 	}
 	.filter {
-        font-size: 80%;
+		font-size: 80%;
 		width: 80px;
 		height: auto;
 		border: 1px #aaa solid;
@@ -141,6 +141,43 @@
 	}
 	.active {
 		background-color: lightblue;
-		border-color: blue;
+		/*border-color: blue;*/
+	}
+
+	/* instance-specific styles */
+	.filter {
+		font-size: 80%;
+		margin-right: 0.5em;
+		line-height: 2.5;
+		padding: 6px 8px;
+		border-radius: 10px;
+		white-space: nowrap;
+		word-break: normal;
+		box-shadow: 3px 3px 3px #6a6d6a;
+	}
+	.filter:hover { box-shadow: 4px 4px 3px #727372;}
+	.filter.categories.active {
+		background-color: #9aa34d;
+		color: #fff;
+	}
+	.filter.analogues.active {
+		background-color: #a34b62;
+		color: #fff;
+	}
+	.filter.licenses.active {
+		background-color: #6498a3;
+		color: #fff;
+	}
+	.filter.statuses.active {
+		background-color: #a369a2;
+		color: #fff;
+	}
+	.filter.affiliates.active {
+		background-color: #fff;
+		color: #000;
+	}
+	.filter.hosts.active {
+		background-color: #fff;
+		color: #000;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 84fc96f..57d11e7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,7 +10,8 @@
 	import { setFilter, getFilter } from '$lib/components/filter.js';
 	import Filterable from '$lib/components/Filterable.svelte';
 	// collapsible sections
-	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'
+	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
+	import Tile from '$lib/components/Tile.svelte';
 
 	//console.log('colours: ', colours);
 
@@ -350,45 +351,45 @@
 			<li>Total number of services: {results.total_instances}</li>
 		</ul>
 	</div>
-	<CollapsibleSection  headerText={'Show or Hide Filters'}>
+	<CollapsibleSection  headerText={'Filters'}>
 		<div class="filters">
 			<CollapsibleSection  headerText={'Show or Hide Software Catergory Filter'}>
-				<div class="filter categories">
+				<div class="filter-group categories">
 					<Filterable filterValues={categoryFilter} context={'categories'}>
 						<h2 slot="h2">Categories</h2>
 					</Filterable>
 				</div>
 			</CollapsibleSection>
-			<CollapsibleSection  headerText={'Show or Hide Software Analogue Filter'}>
-				<div class="filter analogues">
+			<CollapsibleSection  headerText={'Software Analogue Filter'}>
+				<div class="filter-group analogues">
 					<Filterable filterValues={analogueFilter} context={'analogues'}>
 						<h2 slot="h2">Analogues</h2>
 					</Filterable>
 				</div>
 			</CollapsibleSection>
-			<CollapsibleSection  headerText={'Show or Hide License Filter'}>
-				<div class="filter licenses">
+			<CollapsibleSection  headerText={'License Filter'}>
+				<div class="filter-group licenses">
 					<Filterable filterValues={licenseFilter} context={'licenses'}>
 						<h2 slot="h2">Open Source & Copyleft Licenses</h2>
 					</Filterable>
 				</div>
 			</CollapsibleSection>
-			<CollapsibleSection  headerText={'Show or Hide Service Status Filter'}>
-				<div class="filter statuses">
+			<CollapsibleSection  headerText={'Service Status Filter'}>
+				<div class="filter-group statuses">
 					<Filterable filterValues={statusFilter} context={'statuses'}>
 						<h2 slot="h2">Statuses</h2>
 					</Filterable>
 				</div>
 			</CollapsibleSection>
-			<CollapsibleSection  headerText={'Show or Hide Service Affiliates Filter'}>
-				<div class="filter affilates">
+			<CollapsibleSection  headerText={'Service Affiliates Filter'}>
+				<div class="filter-group affilates">
 					<Filterable filterValues={affiliateFilter} context={'affiliates'}>
 						<h2 slot="h2">Affiliates</h2>
 					</Filterable>
 				</div>
 			</CollapsibleSection>
-			<CollapsibleSection  headerText={'Show or Hide Service Host filter'}>
-				<div class="filter hosts">
+			<CollapsibleSection  headerText={'Service Host filter'}>
+				<div class="filter-group hosts">
 					<Filterable filterValues={hostFilter} context={'hosts'}>
 						<h2 slot="h2">Hosts</h2>
 					</Filterable>
@@ -462,69 +463,16 @@
 	    background-color: #ccc;
 	    display: block;
 	}
-	.filters {
-		/*background-color: #f1ff94;
-        padding: 0.5em;
-        border: 3px solid #cbea77;
-        margin: 1em 0;*/
-		margin-bottom: 1em;
-	}
+/*	.filters { margin-bottom: 1em;}
 	.filters .tags {
-		/*padding: 0.5em;*/
 		margin: 1em 0;
 		display: block;
+	}*/
+	.collapsible {
+		color: #eee !important;
+		background-color: #666 !important;
 	}
-	.tag-list {
-/*		white-space: normal;
-		word-break: normal;
-		display: inline;*/
-	}
-	.tags {
-/*		white-space: normal;
-		word-break: normal;
-	    display: inline;*/
-	}
-	.tag {
-		font-size: 80%;
-		margin-right: 0.5em;
-		line-height: 2.5;
-		padding: 6px 8px;
-		border-radius: 10px;
-		white-space: nowrap;
-		word-break: normal;
-		box-shadow: 3px 3px 3px #6a6d6a;
-	}
-	.tag:hover { box-shadow: 4px 4px 3px #727372;}
-	.tag.category {
-		background-color: #9aa34d;
-		color: #fff;
-	}
-	.tag.license {
-		background-color: #6498a3;
-		color: #fff;
-	}
-	.tag.status {
-		background-color: #a369a2;
-		color: #fff;
-	}
-	.tag.affiliate {
-		background-color: #fff;
-		color: #000;
-	}
-	.tag.host {
-		background-color: #fff;
-		color: #000;
-	}
-	.tag.on {
-	    padding-right: 25px;
-	    background-image: url('/images/check-black-in-white-20px.png');
-	    background-position: right center;
-	    background-repeat: no-repeat;
-	}
-	.tag.off {
-	    color: #ccc;
-	    opacity: 0.5;
-	}
+
 	.tiles {
 		display: grid;
 		grid-gap: 15px;
@@ -555,6 +503,10 @@
 	.tile:hover {
 		box-shadow: 10px 10px 6px #727372;
 	}
+	.tile p.description {
+	    height: 200px;
+	    overflow: scroll;
+	}
 	.tile .links h2 a {
 		color: #e6c4fc;
 	}