WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click
This commit is contained in:
Dave Lane
parent
b4e6e27d0a
commit
83b028f881
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue