From 83b028f88199f98a7c597af445d7b9a1bfb612ad Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Sun, 18 Aug 2024 16:07:34 +1200 Subject: [PATCH] WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click --- src/routes/+page.svelte | 160 +++++++++++++++++++++++++--------------- 1 file changed, 101 insertions(+), 59 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8d3d774..ff1481a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,8 @@ export let data; const { webservices } = data; + + function processData(webservices) { let instances = 0; let current = {}; @@ -63,12 +65,12 @@ } }); - /*console.log('categories: ', categories); - console.log('analogues: ', analogues); - console.log('licenses: ', licenses); - console.log('statuses: ', statuses); - console.log('affiliates: ', affiliates); - console.log('hosts: ', hosts); */ + //console.log('categories: ', categories); + //console.log('analogues: ', analogues); + //console.log('licenses: ', licenses); + //console.log('statuses: ', statuses); + //console.log('affiliates: ', affiliates); + //console.log('hosts: ', hosts); return { total_instances: instances, @@ -102,6 +104,14 @@ return keys; } + function toOxfordCommaString(arr) { + if (arr.length == 1) return arr; + else { + var last = arr.pop(); + return arr.join(', ') + ', and ' + last; + } + } + const results = processData(webservices); // console.log('results: ', results); /*console.log('stats = ' + results.total_instances); @@ -116,13 +126,13 @@ const statuses = results.instance_tags.statuses); const affiliates = results.instance_tags.affiliates); const hosts = results.instance_tags.hosts);*/ - const categories = getKeys(results.tech_tags.categories); + const categories = getKeys(results.tech_tags.categories).sort(); //const categories = results.tech_tags.categories); - const analogues = getKeys(results.tech_tags.analogues); - const licenses = getKeys(results.tech_tags.licenses); - const statuses = getKeys(results.instance_tags.statuses); - const affiliates = getKeys(results.instance_tags.affiliates); - const hosts = getKeys(results.instance_tags.hosts); + const analogues = getKeys(results.tech_tags.analogues).sort(); + const licenses = getKeys(results.tech_tags.licenses).sort(); + const statuses = getKeys(results.instance_tags.statuses).sort(); + const affiliates = getKeys(results.instance_tags.affiliates).sort(); + const hosts = getKeys(results.instance_tags.hosts).sort(); //console.log('categories array: ', results.tech_tags.categories); //console.log('categories keys: ', categories); @@ -139,58 +149,43 @@
-
- {#each categories as category}{category} {/each} -
-
- {#each analogues as analogue} - {analogue} - {/each} -
-
- {#each licenses as license} - {license} - {/each} -
+
{#each categories as category}{category} {/each}
+ +
{#each licenses as license}{license} {/each}
-
- {#each statuses as status} - {status} - {/each} -
-
- {#each affiliates as affiliate} - {affiliate} - {/each} -
-
- {#each hosts as host} - {host} - {/each} -
+
{#each statuses as status}{status} {/each}
{#each affiliates as affiliate}{affiliate} {/each}
+
{#each hosts as host}{host} {/each}
{#each technologies as technology}
-

{technology.name}

- - {#if hasInstances(technology)} -
-
    - {#each technology.instances as instance} -
  • {instance.domain} {instance.affiliation}
    • - {/each} -
+
+
+

{technology.name}

+ {#if (technology.license)}

License: {technology.license}

{/if} + {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if} +

{technology.description}

+
+
+ {#if hasInstances(technology)} +
+
    + {#each technology.instances as instance} +
  • {instance.domain} {instance.affiliation}
    • + {/each} +
+
+ {:else} +
+
    +
  • Nothing here yet...
    • +
+
+ {/if} +
- {:else} -
-
    -
  • Nothing here yet...
    • -
-
- {/if}
{/each}
@@ -240,15 +235,62 @@ grid-gap: 15px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } + /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */ .tile { - box-sizing: border-box; - box-shadow: 5px 5px 3px #71ba71; + height: 460px; min-width: 250px; max-width: 400px; - padding: 0.8em 1.2em; + /*padding: 0.8em 1.2em;*/ overflow: hidden; + perspective: 1000px; /* remove to remove 3D effect */ + } + .tile-inner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.8s; + transform-style: preserve-3d; + } + /* .tile:hover .tile-inner { + transform: rotateY(180deg); + } */ + .tile-front, .tile-back { + position: absolute; + top: 30px; + width: 100%; + height: 90%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; + box-sizing: border-box; + box-shadow: 5px 5px 3px #71ba71; border: solid 3px #1e6831; background-color: #fff; } + .tile-front { + background-color: #ddd; + text-overflow: ellipsis; + overflow: hidden; + } + .tile-back { + background-color: #3b559; + transform: rotateY(180deg); + } + .tile-front h2 { + background-color: #999; + text-align: center; + padding: 0.5em; + margin: 0; + } + .tile-front h2 a { color: #eee; } + .tile-front h2 a:visited { color: #ddd; } + .tile-front .description { + text-overflow: ellipsis; + overflow: hidden; + height: 100%; + } + .tile-front p { + padding: 0 1em 0.2em 1em; + } .webservices li { list-style-type: none; } + .value { font-weight: bold; }