lightweight/webservices-app
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

working modal but still munted styles

Browse source
This commit is contained in:
Dave Lane 2024-10-30 17:20:32 +13:00
parent 26869a837b
commit 0052c00f03
3 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -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;

2
src/lib/components/Filterable.svelte
View file

@ -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;

34
src/lib/components/TechnologyTile.svelte
View file

@ -2,9 +2,9 @@
// a 'technology' object
export let technology;
export let affiliate_colours;
import { Button, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
import { Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
let showModal = false;
let show = false;
const formatter = new Intl.ListFormat('en', {
style: 'long',
@ -41,7 +41,8 @@
<!-- 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">
<button on:click={() => (show = !show)} 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
@ -50,10 +51,11 @@
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
@ -61,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
@ -75,7 +78,7 @@
{/if}
</button>
<Modal title="{technology.name}" bind:showModal>
<Modal title="{technology.name}" bind:show dismissible>
<ModalBody>
Modal stuff...
</ModalBody>
@ -98,6 +101,7 @@
box-sizing: border-box;
display: inline-block;
height: 515px;
line-height: 1.2;
margin-bottom: 10px;
margin-right: 18px;
margin-top: 8px;
@ -105,13 +109,14 @@
position: relative;
text-align: left;
text-overflow: ellipsis;
vertical-align: top;
vertical-align: top !important;
width: 290px;
}
.tile .links {
position: absolute;
top: 0;
right: 0;
/*float: right;*/
padding: 2px 6px;
font-size: 90%;
}
@ -133,6 +138,10 @@
color: #fff !important;
}
.tile h2 {
position: absolute;
top: 0;
right: 0;
width: 100%;
background-color: #999;
text-align: center;
padding: 0.5em;
@ -149,9 +158,11 @@
}
.tile .description {
height: 200px;
line-height: 1.2em;
text-overflow: ellipsis;
overflow: hidden;
padding-top: 0.5em;
vertical-align: top;
}
.tile p {
padding: 0 0.7em 0.2em 0.7em;
@ -162,15 +173,22 @@
padding: 0.2em 0.7em;
margin: 0;
}
.tile .details {
vertical-align: bottom;
}
.instances {
background-color: #ddd;
position: absolute;
bottom: 0;
height: 2.5em;
width: 100%;
width: 100% !important;
vertical-align: middle;
}
.instances p {
width: 100%;
padding-top: 0.7em;
vertical-align: middle;
}
.instances p { padding-top: 0.7em; vertical-align: middle; }
.instances .marker {
margin-right: 3px;
}