Compare commits
5 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
37cd4fd17a | ||
|
|
b5cdfa0a09 | ||
|
|
0052c00f03 | ||
|
|
26869a837b | ||
|
|
3068f5980d |
5 changed files with 519 additions and 384 deletions
687
package-lock.json
generated
687
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
src/app.css
22
src/app.css
|
|
@ -10,7 +10,7 @@ body {
|
|||
min-height: 100%;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.15em;
|
||||
border: double 3px #ddd;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
|
|
@ -37,3 +37,23 @@ 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
|
||||
/* instance-specific styles */
|
||||
.filter {
|
||||
font-size: 80%;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em;
|
||||
line-height: 2.5;
|
||||
padding: 6px 8px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// a 'technology' object
|
||||
export let technology;
|
||||
export let affiliate_colours;
|
||||
import { Button, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
|
||||
import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Popover } from 'yesvelte';
|
||||
|
||||
let showModal = false;
|
||||
|
||||
|
|
@ -31,58 +31,31 @@
|
|||
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 -->
|
||||
|
||||
<div on:click={() => (showModal = !showModal)} onclick="handleClick()" role="button" tabindex=0 class="tile technology">
|
||||
<button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology" col>
|
||||
<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}">R</a></span>{/if}
|
||||
href={technology.repository} title="The source code repository for {technology.name}">C</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
|
||||
|
|
@ -90,6 +63,7 @@
|
|||
{#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
|
||||
|
|
@ -102,103 +76,161 @@
|
|||
{:else}
|
||||
<div class="instances">Nothing here yet...</div>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Modal title="{technology.name}" bind:showModal>
|
||||
<Modal scrollable bind:show={showModal} autoClose dismissible>
|
||||
<ModalHeader>
|
||||
<ModalTitle>{technology.name}</ModalTitle>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
Modal stuff...
|
||||
<p class="description">{technology.description}{#if technology.extended_description}{technology.extended_description}{/if}
|
||||
</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 {
|
||||
display: inline-block;
|
||||
height: 515px;
|
||||
/*min-width: 240px;
|
||||
max-width: 300px;*/
|
||||
width: 290px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 3px #6a6d6a;
|
||||
.tile.technology {
|
||||
/*background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
appearance: none !important; */
|
||||
background-color: #eee;
|
||||
border: solid 3px #3a8ea5;
|
||||
border-radius: 15px;
|
||||
text-overflow: ellipsis;
|
||||
box-shadow: 5px 5px 3px #6a6d6a;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 515px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 18px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #eee;
|
||||
margin-top: 8px;
|
||||
margin-right: 18px;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top !important;
|
||||
width: 290px;
|
||||
}
|
||||
.tile .links {
|
||||
.tile.technology .links {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/*float: right;*/
|
||||
padding: 2px 6px;
|
||||
font-size: 90%;
|
||||
}
|
||||
.tile:hover {
|
||||
box-shadow: 10px 10px 6px #727372;
|
||||
.tile.technology:hover {
|
||||
box-shadow: 6px 6px 5px #727372;
|
||||
}
|
||||
.tile:active {
|
||||
.tile.technology:active {
|
||||
box-shadow: 0 0 0;
|
||||
border-color: #000;
|
||||
}
|
||||
.tile .links h2 a {
|
||||
.tile.technology .links h2 a {
|
||||
color: #e6c4fc;
|
||||
}
|
||||
.tile .links a:visited {
|
||||
.tile.technology .links a:visited {
|
||||
color: #ced0ff;
|
||||
}
|
||||
.tile .links a:hover,
|
||||
.tile:hover h2 a {
|
||||
.tile.technology .links a:hover,
|
||||
.tile.technology:hover h2 a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.tile h2 {
|
||||
.tile.technology h2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: #999;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
.tile h2 a {
|
||||
.tile.technology h2 a {
|
||||
color: #e6c4fc;
|
||||
}
|
||||
.tile h2 a:visited {
|
||||
.tile.technology h2 a:visited {
|
||||
color: #ced0ff;
|
||||
}
|
||||
.tile h2 a:hover {
|
||||
.tile.technology h2 a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.tile .description {
|
||||
.tile.technology .description {
|
||||
height: 200px;
|
||||
line-height: 1.2em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-top: 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tile p {
|
||||
.tile.technology p {
|
||||
padding: 0 0.7em 0.2em 0.7em;
|
||||
font-size: 80%;
|
||||
color: #555;
|
||||
}
|
||||
.tile p.property {
|
||||
.tile.technology p.property {
|
||||
padding: 0.2em 0.7em;
|
||||
margin: 0;
|
||||
}
|
||||
.instances {
|
||||
.tile.technology .details {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.tile.technology .instances {
|
||||
background-color: #ddd;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.instances p { padding-top: 0.7em; vertical-align: middle; }
|
||||
.instances .marker {
|
||||
.tile.technology .instances p {
|
||||
width: 100%;
|
||||
padding-top: 0.7em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tile.technology .instances .marker {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.webservices li {
|
||||
/*.webservices li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}*/
|
||||
.value {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
|
|
@ -217,10 +249,11 @@
|
|||
.circle:hover {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.square {
|
||||
/*.square {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #555;
|
||||
display: inline-block;
|
||||
}
|
||||
}*/
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@
|
|||
|
||||
// the filters
|
||||
import { setFilter, getFilter } from '$lib/components/filter.js';
|
||||
import { Accordions, Accordion, AccordionBody } from 'yesvelte';
|
||||
import { Accordions, Accordion, AccordionBody, El } 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.
|
||||
|
||||
|
|
@ -689,6 +691,7 @@
|
|||
</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} />
|
||||
|
|
@ -724,7 +727,7 @@
|
|||
min-width: 30em;
|
||||
border: 2px #aaa solid;
|
||||
margin: 0 15px 20px 6px;
|
||||
padding: 0 20px;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 6px 6px 20px #999;
|
||||
}
|
||||
.summary .label {
|
||||
|
|
|
|||
Loading…
Reference in a new issue