WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click
This commit is contained in:
parent
b4e6e27d0a
commit
83b028f881
1 changed files with 101 additions and 59 deletions
|
@ -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 @@
|
|||
</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">
|
||||
<h2><a href="{technology.website}">{technology.name}</a></h2>
|
||||
<!--<p>{technology.description}</p>-->
|
||||
{#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 class="tile-inner">
|
||||
<div class="tile-front">
|
||||
<h2><a href="{technology.website}">{technology.name}</a></h2>
|
||||
{#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">
|
||||
{#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>
|
||||
{:else}
|
||||
<div class="instances cell">
|
||||
<ul class="instances">
|
||||
<li>Nothing here yet...</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</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>
|
||||
|
|
Loading…
Reference in a new issue