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

updated styles for tiles, first commit with tags

Browse source
This commit is contained in:
Dave Lane 2024-08-18 13:01:02 +12:00
parent ee7c1002f1
commit 368340817c
1 changed files with 53 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/routes/+page.svelte
View file

@ -1,8 +1,6 @@
<script>
export let data;
const { webservices } = data;
//console.log(webservices);
function processData(webservices) {
let instances = 0;
@ -16,6 +14,7 @@
// properties of instances
let statuses = [];
let affiliates = [];
let hosts = [];
//
// just a trivial reassignment
@ -42,7 +41,7 @@
}
if (hasInstances(tech)) {
console.log(tech.name + ': ' + tech.instances.length + ' instances...');
//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
tech.instances.forEach(function(instance, i) {
instances++;
if (instance.hasOwnProperty('status')) {
@ -94,13 +93,39 @@
return false;
}
function getKeys(ob) {
let keys = [];
for (let key in ob) {
keys.push(key);
//console.log('pushing key ' + key);
};
return keys;
}
const results = processData(webservices);
console.log('stats = ' + results.total_instances);
// console.log('results: ', results);
/*console.log('stats = ' + results.total_instances);
console.log('tech_tags: ', results.tech_tags);
console.log('instance_tags: ', results.instance_tags);
console.log('instance_tags: ', results.instance_tags);*/
const technologies = webservices.technologies;
const hosts = webservices.hosts;
//const hosts = webservices.hosts;
/*const categories = results.tech_tags.categories);
const analogues = results.tech_tags.analogues);
const licenses = results.tech_tags.licenses);
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 = 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);
//console.log('categories array: ', results.tech_tags.categories);
console.log('categories keys: ', categories);
</script>
@ -113,27 +138,27 @@
</ul>
</div>
<div class="filters">
<div class="tags tech">
<div class="tags tech catergories">
{#each results.tech_tags.categories as category}
<span>{category}</span>
<div class="tag-list tech">
<div class="tags tech categories">
{#each categories as category}
<span class="tag">{category}</span>
{/each}
</div>
</div>
<div class="tags instance">
<div class="tag-list instance">
<div class="tags instance statuses">
{#each results.instance_tags.statuses as status}
<span>{status}</span>
{#each statuses as status}
<span class="tag">{status}</span>
{/each}
</div>
<div class="tags instance affiliates">
{#each results.instance_tags.affiliates as affiliate}
<span>{affiliate}</span>
{#each affiliates as affiliate}
<span class="tag">{affiliate}</span>
{/each}
</div>
<div class="tags instance hosts">
{#each results.instance_tags.hosts as host}
<span>{host}</span>
{#each hosts as host}
<span class="tag">{host}</span>
{/each}
</div>
</div>
@ -174,6 +199,17 @@
}
.filters {
}
.filters .tags {
background-color: #f1ff94;
padding: 0.5em;
border: 3px solid #cbea77;
margin: 1em 0;
}
.tag {
font-size: 80%;
color: #777;
margin-right: 1em;
}
.tiles {
display: grid;
grid-gap: 15px;
@ -189,28 +225,5 @@
border: solid 3px #1e6831;
background-color: #fff;
}
/* .technology {
background-color: #fff;
}
.instances {
background-color: #ddd;
} */
.webservices li { list-style-type: none; }
/*
* Breakpoints
*/
@media all and (max-width: 500px) {
.collapse { display: block; }
.collapse > .cell { width: 100% !important; }
}
/* .no-flexbox .webservices {
display: block;
.no-flexbox .webservices > cell { width: 100%; }
}
div {
h2 {
color: green;
}
}*/
</style>