Working modals

This commit is contained in:
Dave Lane 2024-11-11 15:01:13 +13:00
parent b5cdfa0a09
commit 37cd4fd17a
4 changed files with 471 additions and 332 deletions

687
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -37,3 +37,23 @@ a:visited {
.yaccordion .y-accordians .y-accordion-header-button { .yaccordion .y-accordians .y-accordion-header-button {
background-color: #eee; 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;
}

View file

@ -2,9 +2,9 @@
// a 'technology' object // a 'technology' object
export let technology; export let technology;
export let affiliate_colours; export let affiliate_colours;
import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte'; import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Popover } from 'yesvelte';
let show = false; let showModal = false;
const formatter = new Intl.ListFormat('en', { const formatter = new Intl.ListFormat('en', {
style: 'long', style: 'long',
@ -41,12 +41,12 @@
<!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button --> <!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->
<El on:click={() => (show = !show)} tabindex=0 class="tile technology"> <button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology" col>
<h2>{technology.name}</h2> <h2>{technology.name}</h2>
<div class="links"> <div class="links">
<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span> <span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
{#if technology.repository}<span class="repository"><a {#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 {#if technology.wikipedia}<span class="wikipedia"><a
href={technology.wikipedia} href={technology.wikipedia}
title="Wikipedia Page for {technology.name}">W</a></span>{/if} title="Wikipedia Page for {technology.name}">W</a></span>{/if}
@ -76,19 +76,55 @@
{:else} {:else}
<div class="instances">Nothing here yet...</div> <div class="instances">Nothing here yet...</div>
{/if} {/if}
</El> </button>
<Modal title="{technology.name}" bind:show dismissible> <Modal scrollable bind:show={showModal} autoClose dismissible>
<ModalHeader>
<ModalTitle>{technology.name}</ModalTitle>
</ModalHeader>
<ModalBody> <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> </ModalBody>
<ModalFooter> <ModalFooter>
Modal footer stuff... Previous and Next buttons to go here.
</ModalFooter> </ModalFooter>
</Modal> </Modal>
<style> <style>
.tile { .tile.technology {
/*background: none; /*background: none;
border: none; border: none;
outline: none; outline: none;
@ -112,7 +148,7 @@
vertical-align: top !important; vertical-align: top !important;
width: 290px; width: 290px;
} }
.tile .links { .tile.technology .links {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -120,24 +156,24 @@
padding: 2px 6px; padding: 2px 6px;
font-size: 90%; font-size: 90%;
} }
.tile:hover { .tile.technology:hover {
box-shadow: 6px 6px 5px #727372; box-shadow: 6px 6px 5px #727372;
} }
.tile:active { .tile.technology:active {
box-shadow: 0 0 0; box-shadow: 0 0 0;
border-color: #000; border-color: #000;
} }
.tile .links h2 a { .tile.technology .links h2 a {
color: #e6c4fc; color: #e6c4fc;
} }
.tile .links a:visited { .tile.technology .links a:visited {
color: #ced0ff; color: #ced0ff;
} }
.tile .links a:hover, .tile.technology .links a:hover,
.tile:hover h2 a { .tile.technology:hover h2 a {
color: #fff !important; color: #fff !important;
} }
.tile h2 { .tile.technology h2 {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -147,16 +183,16 @@
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
} }
.tile h2 a { .tile.technology h2 a {
color: #e6c4fc; color: #e6c4fc;
} }
.tile h2 a:visited { .tile.technology h2 a:visited {
color: #ced0ff; color: #ced0ff;
} }
.tile h2 a:hover { .tile.technology h2 a:hover {
color: #fff; color: #fff;
} }
.tile .description { .tile.technology .description {
height: 200px; height: 200px;
line-height: 1.2em; line-height: 1.2em;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -164,19 +200,19 @@
padding-top: 0.5em; padding-top: 0.5em;
vertical-align: top; vertical-align: top;
} }
.tile p { .tile.technology p {
padding: 0 0.7em 0.2em 0.7em; padding: 0 0.7em 0.2em 0.7em;
font-size: 80%; font-size: 80%;
color: #555; color: #555;
} }
.tile p.property { .tile.technology p.property {
padding: 0.2em 0.7em; padding: 0.2em 0.7em;
margin: 0; margin: 0;
} }
.tile .details { .tile.technology .details {
vertical-align: bottom; vertical-align: bottom;
} }
.instances { .tile.technology .instances {
background-color: #ddd; background-color: #ddd;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -184,12 +220,12 @@
width: 100% !important; width: 100% !important;
vertical-align: middle; vertical-align: middle;
} }
.instances p { .tile.technology .instances p {
width: 100%; width: 100%;
padding-top: 0.7em; padding-top: 0.7em;
vertical-align: middle; vertical-align: middle;
} }
.instances .marker { .tile.technology .instances .marker {
margin-right: 3px; margin-right: 3px;
} }
/*.webservices li { /*.webservices li {
@ -219,4 +255,5 @@
background-color: #555; background-color: #555;
display: inline-block; display: inline-block;
}*/ }*/
</style> </style>

View file

@ -8,11 +8,13 @@
// the filters // the filters
import { setFilter, getFilter } from '$lib/components/filter.js'; 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'; import Filterable from '$lib/components/Filterable.svelte';
// collapsible sections // collapsible sections
//import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'; //import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
import TechnologyTile from '$lib/components/TechnologyTile.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. let tabindex = 0; // a counter which facilitates keyboard navigation.
@ -689,6 +691,7 @@
</Accordion> </Accordion>
</Accordions> </Accordions>
<p>Showing {filteredTechnologies.length} technology tiles.</p> <p>Showing {filteredTechnologies.length} technology tiles.</p>
<p>Current URL: {$page.url}...</p>
<div class="tiles"> <div class="tiles">
{#each filteredTechnologies as technology} {#each filteredTechnologies as technology}
<TechnologyTile {technology} {affiliate_colours} /> <TechnologyTile {technology} {affiliate_colours} />