Styled accordions, sorted coloured dots with filter tags

src/app.css

@@ -10,7 +10,7 @@ body {
 	min-height: 100%;
 	padding: 1em;
 	width: 100%;
-	font-size: 1.15em;
+	font-size: 1.2em;
 	border: double 3px #ddd;
 	border-top: none;
 	border-bottom: none;
@@ -37,23 +37,3 @@ a:visited {
 .yaccordion .y-accordians .y-accordion-header-button {
 	background-color: #eee;
 }
-/* modal styles */
-.y-modal .y-modal-container {
-	background-color: #eee;
-	border: solid 3px #3a8ea5;
-	border-radius: 15px;
-	box-shadow: 5px 5px 3px #6a6d6a;
-	width: 90%;
-	margin: auto auto;
-	max-width: none;
-	height: auto;
-}
-.y-modal .y-modal-container .y-modal-header {
-	text-align: center;
-	width: 100%;
-	background-color: #999;
-}
-.y-modal .y-modal-container .y-modal-header .y-modal-title {
-	font-size: 1.5em;
-	margin: auto;
-}

src/lib/components/Filterable.svelte

@@ -152,7 +152,7 @@
 
 	/* instance-specific styles */
 	.filter {
-		font-size: 0.8em;
+		font-size: 80%;
 		margin-right: 0.5em;
 		line-height: 2.5;
 		padding: 6px 8px;

src/lib/components/TechnologyTile.svelte

@@ -2,7 +2,7 @@
     // a 'technology' object
     export let technology;
     export let affiliate_colours;
-    import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Popover } from 'yesvelte';
+    import { Button, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
 
     let showModal = false;
 
@@ -31,31 +31,58 @@
 			tech.hasOwnProperty('instances') &&
 			tech.instances.constructor === Array &&
 			tech.instances.length
-		) {
+		) return true;
-			return true;
-		}
 		return false;
 	}
 
+	function handleClick() {
+		console.log('clicked!');
+	}
+
+	/*document.addEventListener('keydown', (event) => {
+		const { activeElement } = document;
+		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
+
+		if (hasButtonRole) {
+			// prevent default behaviour, including scrolling on spacebar
+			if (['Spacebar', ' ', 'Enter'].includes(event.key)) {
+				event.preventDefault();
+			}
+
+			if (event.key === 'Enter') {
+				activeElement.click();
+			}
+		}
+	});
+
+	document.addEventListener('keyup', (event) => {
+		const { activeElement } = document;
+		const hasButtonRole = activeElement?.getAttribute('role') === 'button';
+
+		if (hasButtonRole && ['Spacebar', ' '].includes(event.key)) {
+			event.preventDefault();
+			activeElement.click();
+		}
+	});*/
+
+	//onclick="handleClick()"
 </script>
 
 <!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->
 
-<button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology" col>
+<div on:click={() => (showModal = !showModal)} onclick="handleClick()" role="button" tabindex=0 class="tile technology">
-    <h2>{technology.name}</h2>
     <div class="links">
 		<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
         {#if technology.repository}<span class="repository"><a
-			href={technology.repository} title="The source code repository for {technology.name}">C</a></span>{/if}
+			href={technology.repository} title="The source code repository for {technology.name}">R</a></span>{/if}
         {#if technology.wikipedia}<span class="wikipedia"><a
 			href={technology.wikipedia}
 			title="Wikipedia Page for {technology.name}">W</a></span>{/if}
     </div>
-
+    <h2>{technology.name}</h2>
     <p class="description">{technology.description}{#if technology.extended_description}<span
         title={technology.extended_description}>i</span>{/if}
     </p>
-    <div class="details">
     {#if technology.categories}<p class="property categories">{pluraliser('Category',
 		'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
     {#if technology.analogues}<p class="property analogues">Alternative to <span
@@ -63,7 +90,6 @@
     {#if technology.license}<p class="property license"
         title="The libre license for this project is {technology.license}">License: <span
 		class="value">{technology.license}</span></p>{/if}
-	</div>
     {#if hasInstances(technology)}
         <div class="instances">
             <p>{#each technology.instances as instance}<a
@@ -76,161 +102,103 @@
     {:else}
         <div class="instances">Nothing here yet...</div>
     {/if}
-</button>
+</div>
 
-<Modal scrollable bind:show={showModal} autoClose dismissible>
+<Modal title="{technology.name}" bind:showModal>
-	<ModalHeader>
-		<ModalTitle>{technology.name}</ModalTitle>
-	</ModalHeader>
 	<ModalBody>
-		<p class="description">{technology.description}{#if technology.extended_description}{technology.extended_description}{/if}
+		Modal stuff...
-		</p>
-		<div class="links">
-			<p class="link"><span class="label">Project website</span>: <span class="website"><a href="{technology.website}" title="Project site for {technology.name}">{technology.website}</a></span></p>
-			{#if technology.repository}<p class="link"><span class="label">Source code repository</span>: <span class="repository"><a
-				href={technology.repository} title="The source code repository for {technology.name}">{technology.repository}</a></span></p>{/if}
-			{#if technology.wikipedia}<p class="link"><span class="label">Wikipedia entry</span>: <span class="wikipedia"><a
-				href={technology.wikipedia}
-				title="Wikipedia Page for {technology.name}">{technology.wikipedia}</a></span></p>{/if}
-		</div>
-		<div class="details">
-		{#if technology.categories}<p class="property categories">{pluraliser('Category',
-			'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
-		{#if technology.analogues}<p class="property analogues">Alternative to <span
-			class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
-		{#if technology.license}<p class="property license"
-			title="The libre license for this project is {technology.license}">License: <span
-			class="value">{technology.license}</span></p>{/if}
-		</div>
-		{#if hasInstances(technology)}
-			<div class="instances">
-				<p class="instances">Instances of {technology.name}:</p>
-			    <ol>
-			    {#each technology.instances as instance}
-			        <li>
-						<p class="instance"><a href="https://{instance.domain}">{instance.domain}</a>  hosted on '{instance.host}' <span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"/> by {instance.affiliation}".
-						</p>
-					</li>
-				{/each}
-				</ol>
-			</div>
-		{:else}
-			<div class="instances">Nothing here yet...</div>
-		{/if}
 	</ModalBody>
-	<ModalFooter>
-		Previous and Next buttons to go here.
-	</ModalFooter>
 </Modal>
 
 <style>
-	.tile.technology {
+	.tile {
-		/*background: none;
-		border: none;
-		outline: none;
-		box-shadow: none;
-		appearance: none !important; */
-		background-color: #eee;
-		border: solid 3px #3a8ea5;
-		border-radius: 15px;
-		box-shadow: 5px 5px 3px #6a6d6a;
-		box-sizing: border-box;
         display: inline-block;
 		height: 515px;
-		line-height: 1.2;
+		/*min-width: 240px;
-		margin-bottom: 10px;
+		max-width: 300px;*/
-		margin-right: 18px;
+		width: 290px;
-		margin-top: 8px;
+		overflow: hidden;
+		box-sizing: border-box;
+		box-shadow: 5px 5px 3px #6a6d6a;
+		border: solid 3px #3a8ea5;
+		border-radius: 15px;
+		text-overflow: ellipsis;
 		overflow: hidden;
 		position: relative;
-		text-align: left;
+		background-color: #eee;
-		text-overflow: ellipsis;
+		margin-top: 8px;
-		vertical-align: top !important;
+		margin-right: 18px;
-		width: 290px;
+		margin-bottom: 10px;
 	}
-	.tile.technology .links {
+	.tile .links {
 		position: absolute;
 		top: 0;
 		right: 0;
-		/*float: right;*/
 		padding: 2px 6px;
 		font-size: 90%;
 	}
-	.tile.technology:hover {
+	.tile:hover {
-		box-shadow: 6px 6px 5px #727372;
+		box-shadow: 10px 10px 6px #727372;
 	}
-	.tile.technology:active {
+	.tile:active {
 		box-shadow: 0 0 0;
 		border-color: #000;
 	}
-	.tile.technology .links h2 a {
+	.tile .links h2 a {
 		color: #e6c4fc;
 	}
-	.tile.technology .links a:visited {
+	.tile .links a:visited {
 		color: #ced0ff;
 	}
-	.tile.technology .links a:hover,
+	.tile .links a:hover,
-	.tile.technology:hover h2 a {
+	.tile:hover h2 a {
 		color: #fff !important;
 	}
-	.tile.technology h2 {
+	.tile h2 {
-		position: absolute;
-		top: 0;
-		right: 0;
-		width: 100%;
 		background-color: #999;
 		text-align: center;
 		padding: 0.5em;
 		margin: 0;
 	}
-	.tile.technology h2 a {
+	.tile h2 a {
 		color: #e6c4fc;
 	}
-	.tile.technology h2 a:visited {
+	.tile h2 a:visited {
 		color: #ced0ff;
 	}
-	.tile.technology h2 a:hover {
+	.tile h2 a:hover {
 		color: #fff;
 	}
-	.tile.technology .description {
+	.tile .description {
 		height: 200px;
-		line-height: 1.2em;
 		text-overflow: ellipsis;
 		overflow: hidden;
 		padding-top: 0.5em;
-		vertical-align: top;
 	}
-	.tile.technology p {
+	.tile p {
 		padding: 0 0.7em 0.2em 0.7em;
 		font-size: 80%;
 		color: #555;
 	}
-	.tile.technology p.property {
+	.tile p.property {
 		padding: 0.2em 0.7em;
 		margin: 0;
 	}
-	.tile.technology .details {
+	.instances {
-		vertical-align: bottom;
-	}
-	.tile.technology .instances {
 		background-color: #ddd;
 		position: absolute;
 		bottom: 0;
 		height: 2.5em;
-		width: 100% !important;
-		vertical-align: middle;
-	}
-	.tile.technology .instances p {
 		width: 100%;
-		padding-top: 0.7em;
 		vertical-align: middle;
 	}
-	.tile.technology .instances .marker {
+	.instances p { padding-top: 0.7em; vertical-align: middle; }
+	.instances .marker {
 		margin-right: 3px;
 	}
-	/*.webservices li {
+	.webservices li {
 		list-style-type: none;
-	}*/
+	}
 	.value {
 		font-weight: bold;
 		color: #000;
@@ -249,11 +217,10 @@
 	.circle:hover {
 		border: 1px solid #000;
 	}
-	/*.square {
+	.square {
 		height: 20px;
 		width: 20px;
 		background-color: #555;
 		display: inline-block;
-	}*/
+	}
-
 </style>

src/routes/+page.svelte

@@ -8,13 +8,11 @@
 
 	// the filters
 	import { setFilter, getFilter } from '$lib/components/filter.js';
-	import { Accordions, Accordion, AccordionBody, El } from 'yesvelte';
+	import { Accordions, Accordion, AccordionBody } from 'yesvelte';
 	import Filterable from '$lib/components/Filterable.svelte';
 	// collapsible sections
 	//import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
 	import TechnologyTile from '$lib/components/TechnologyTile.svelte';
-	// URL-related stuff
-	import { page } from '$app/stores';
 
 	let tabindex = 0; // a counter which facilitates keyboard navigation.
 
@@ -691,7 +689,6 @@
 		</Accordion>
 	</Accordions>
 	<p>Showing {filteredTechnologies.length} technology tiles.</p>
-	<p>Current URL: {$page.url}...</p>
 	<div class="tiles">
 		{#each filteredTechnologies as technology}
 			<TechnologyTile {technology} {affiliate_colours} />
@@ -727,7 +724,7 @@
 		min-width: 30em;
 		border: 2px #aaa solid;
 		margin: 0 15px 20px 6px;
-		padding: 10px 20px;
+		padding: 0 20px;
 		box-shadow: 6px 6px 20px #999;
 	}
 	.summary .label {