wip commit

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

View file

@ -31,46 +31,17 @@
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">
<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
@ -102,33 +73,40 @@
{:else}
<div class="instances">Nothing here yet...</div>
{/if}
</div>
</button>
<Modal title="{technology.name}" bind:showModal>
<ModalBody>
Modal stuff...
</ModalBody>
<ModalFooter>
Modal footer stuff...
</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;
/*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;
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;
width: 290px;
}
.tile .links {
position: absolute;
@ -138,7 +116,7 @@
font-size: 90%;
}
.tile:hover {
box-shadow: 10px 10px 6px #727372;
box-shadow: 6px 6px 5px #727372;
}
.tile:active {
box-shadow: 0 0 0;
@ -196,9 +174,9 @@
.instances .marker {
margin-right: 3px;
}
.webservices li {
/*.webservices li {
list-style-type: none;
}
}*/
.value {
font-weight: bold;
color: #000;
@ -217,10 +195,10 @@
.circle:hover {
border: 1px solid #000;
}
.square {
/*.square {
height: 20px;
width: 20px;
background-color: #555;
display: inline-block;
}
}*/
</style>

View file

@ -724,7 +724,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 {