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

wip commit

Browse source
This commit is contained in:
Dave Lane 2024-10-26 16:02:35 +13:00
parent 3068f5980d
commit 26869a837b
2 changed files with 31 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,46 +31,17 @@
tech.hasOwnProperty('instances') && tech.hasOwnProperty('instances') &&
tech.instances.constructor === Array && tech.instances.constructor === Array &&
tech.instances.length tech.instances.length
) return true; ) {
return true;
}
return false; 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> </script>
<!-- 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 -->
<div on:click={() => (showModal = !showModal)} onclick="handleClick()" role="button" tabindex=0 class="tile technology"> <button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology">
<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
@ -102,33 +73,40 @@
{:else} {:else}
<div class="instances">Nothing here yet...</div> <div class="instances">Nothing here yet...</div>
{/if} {/if}
</div> </button>
<Modal title="{technology.name}" bind:showModal> <Modal title="{technology.name}" bind:showModal>
<ModalBody> <ModalBody>
Modal stuff... Modal stuff...
</ModalBody> </ModalBody>
<ModalFooter>
Modal footer stuff...
</ModalFooter>
</Modal> </Modal>
<style> <style>
.tile { .tile {
display: inline-block; /*background: none;
height: 515px; border: none;
/*min-width: 240px; outline: none;
max-width: 300px;*/ box-shadow: none;
width: 290px; appearance: none !important; */
overflow: hidden; background-color: #eee;
box-sizing: border-box;
box-shadow: 5px 5px 3px #6a6d6a;
border: solid 3px #3a8ea5; border: solid 3px #3a8ea5;
border-radius: 15px; border-radius: 15px;
text-overflow: ellipsis; box-shadow: 5px 5px 3px #6a6d6a;
box-sizing: border-box;
display: inline-block;
height: 515px;
margin-bottom: 10px;
margin-right: 18px;
margin-top: 8px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: #eee; text-align: left;
margin-top: 8px; text-overflow: ellipsis;
margin-right: 18px; vertical-align: top;
margin-bottom: 10px; width: 290px;
} }
.tile .links { .tile .links {
position: absolute; position: absolute;
@ -138,7 +116,7 @@
font-size: 90%; font-size: 90%;
} }
.tile:hover { .tile:hover {
box-shadow: 10px 10px 6px #727372; box-shadow: 6px 6px 5px #727372;
} }
.tile:active { .tile:active {
box-shadow: 0 0 0; box-shadow: 0 0 0;
@ -196,9 +174,9 @@
.instances .marker { .instances .marker {
margin-right: 3px; margin-right: 3px;
} }
.webservices li { /*.webservices li {
list-style-type: none; list-style-type: none;
} }*/
.value { .value {
font-weight: bold; font-weight: bold;
color: #000; color: #000;
@ -217,10 +195,10 @@
.circle:hover { .circle:hover {
border: 1px solid #000; border: 1px solid #000;
} }
.square { /*.square {
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: #555; background-color: #555;
display: inline-block; display: inline-block;
} }*/
</style> </style>

2
src/routes/+page.svelte
View file

@ -724,7 +724,7 @@
min-width: 30em; min-width: 30em;
border: 2px #aaa solid; border: 2px #aaa solid;
margin: 0 15px 20px 6px; margin: 0 15px 20px 6px;
padding: 0 20px; padding: 10px 20px;
box-shadow: 6px 6px 20px #999; box-shadow: 6px 6px 20px #999;
} }
.summary .label { .summary .label {