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

WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click

Browse source
This commit is contained in:
Dave Lane 2024-08-18 16:07:34 +12:00
parent b4e6e27d0a
commit 83b028f881
1 changed files with 101 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
src/routes/+page.svelte
View file

@ -2,6 +2,8 @@
export let data; export let data;
const { webservices } = data; const { webservices } = data;
function processData(webservices) { function processData(webservices) {
let instances = 0; let instances = 0;
let current = {}; let current = {};
@ -63,12 +65,12 @@
} }
}); });
/*console.log('categories: ', categories); //console.log('categories: ', categories);
console.log('analogues: ', analogues); //console.log('analogues: ', analogues);
console.log('licenses: ', licenses); //console.log('licenses: ', licenses);
console.log('statuses: ', statuses); //console.log('statuses: ', statuses);
console.log('affiliates: ', affiliates); //console.log('affiliates: ', affiliates);
console.log('hosts: ', hosts); */ //console.log('hosts: ', hosts);
return { return {
total_instances: instances, total_instances: instances,
@ -102,6 +104,14 @@
return keys; 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); const results = processData(webservices);
// console.log('results: ', results); // console.log('results: ', results);
/*console.log('stats = ' + results.total_instances); /*console.log('stats = ' + results.total_instances);
@ -116,13 +126,13 @@
const statuses = results.instance_tags.statuses); const statuses = results.instance_tags.statuses);
const affiliates = results.instance_tags.affiliates); const affiliates = results.instance_tags.affiliates);
const hosts = results.instance_tags.hosts);*/ 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 categories = results.tech_tags.categories);
const analogues = getKeys(results.tech_tags.analogues); const analogues = getKeys(results.tech_tags.analogues).sort();
const licenses = getKeys(results.tech_tags.licenses); const licenses = getKeys(results.tech_tags.licenses).sort();
const statuses = getKeys(results.instance_tags.statuses); const statuses = getKeys(results.instance_tags.statuses).sort();
const affiliates = getKeys(results.instance_tags.affiliates); const affiliates = getKeys(results.instance_tags.affiliates).sort();
const hosts = getKeys(results.instance_tags.hosts); const hosts = getKeys(results.instance_tags.hosts).sort();
//console.log('categories array: ', results.tech_tags.categories); //console.log('categories array: ', results.tech_tags.categories);
//console.log('categories keys: ', categories); //console.log('categories keys: ', categories);
@ -139,58 +149,43 @@
</div> </div>
<div class="filters"> <div class="filters">
<div class="tag-list tech"> <div class="tag-list tech">
<div class="tags tech categories"> <div class="tags tech categories">{#each categories as category}<span class="tag category">{category}</span> {/each}</div>
{#each categories as category}<span class="tag category">{category}</span> {/each} <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
</div> <div class="tags tech licenses">{#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
<div class="tags tech analogues">
{#each analogues as analogue}
<span class="tag analogue">{analogue}</span>
{/each}
</div>
<div class="tags tech licenses">
{#each licenses as license}
<span class="tag license">{license}</span>
{/each}
</div>
</div> </div>
<div class="tag-list instance"> <div class="tag-list instance">
<div class="tags instance statuses"> <div class="tags instance statuses">{#each statuses as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">{#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
{#each statuses as status} <div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
<span class="tag status">{status}</span>
{/each}
</div>
<div class="tags instance affiliates">
{#each affiliates as affiliate}
<span class="tag affilate">{affiliate}</span>
{/each}
</div>
<div class="tags instance hosts">
{#each hosts as host}
<span class="tag host">{host}</span>
{/each}
</div>
</div> </div>
</div> </div>
<div class="tiles"> <div class="tiles">
{#each technologies as technology} {#each technologies as technology}
<div class="tile technology"> <div class="tile technology">
<h2><a href="{technology.website}">{technology.name}</a></h2> <div class="tile-inner">
<!--<p>{technology.description}</p>--> <div class="tile-front">
{#if hasInstances(technology)} <h2><a href="{technology.website}">{technology.name}</a></h2>
<div class="instances"> {#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
<ul class="instances"> {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
{#each technology.instances as instance} <p class="description">{technology.description}</p>
<li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li> </div>
{/each} <div class="tile-back">
</ul> {#if hasInstances(technology)}
<div class="instances">
<ul class="instances">
{#each technology.instances as instance}
<li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
{/each}
</ul>
</div>
{:else}
<div class="instances cell">
<ul class="instances">
<li>Nothing here yet...</li>
</ul>
</div>
{/if}
</div>
</div> </div>
{:else}
<div class="instances cell">
<ul class="instances">
<li>Nothing here yet...</li>
</ul>
</div>
{/if}
</div> </div>
{/each} {/each}
</div> </div>
@ -240,15 +235,62 @@
grid-gap: 15px; grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
} }
/* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
.tile { .tile {
box-sizing: border-box; height: 460px;
box-shadow: 5px 5px 3px #71ba71;
min-width: 250px; min-width: 250px;
max-width: 400px; max-width: 400px;
padding: 0.8em 1.2em; /*padding: 0.8em 1.2em;*/
overflow: hidden; 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; border: solid 3px #1e6831;
background-color: #fff; 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; } .webservices li { list-style-type: none; }
.value { font-weight: bold; }
</style> </style>