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

130
src/routes/+page.svelte
View file

@ -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,43 +149,26 @@
</div>
<div class="filters">
<div class="tag-list tech">
<div class="tags tech categories">
{#each categories as category}<span class="tag category">{category}</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 class="tags tech categories">{#each categories as category}<span class="tag category">{category}</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 class="tag-list instance">
<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>
<div class="tags instance hosts">
{#each hosts as host}
<span class="tag host">{host}</span>
{/each}
</div>
<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>
<div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
</div>
</div>
<div class="tiles">
{#each technologies as technology}
<div class="tile technology">
<div class="tile-inner">
<div class="tile-front">
<h2><a href="{technology.website}">{technology.name}</a></h2>
<!--<p>{technology.description}</p>-->
{#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
{#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
<p class="description">{technology.description}</p>
</div>
<div class="tile-back">
{#if hasInstances(technology)}
<div class="instances">
<ul class="instances">
@ -192,6 +185,8 @@
</div>
{/if}
</div>
</div>
</div>
{/each}
</div>
</div>
@ -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; }
</style>