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

laying groundwork for active filtering

Browse source
This commit is contained in:
Dave Lane 2024-09-05 11:07:29 +12:00
parent 525427c691
commit 9ac5b42454
6 changed files with 572 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/routes/+page.svelte
View file

@ -66,6 +66,7 @@
}
if (instance.hasOwnProperty('affiliation')) {
let tag = instance.affiliation;
if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
else affiliate_list[tag] = 1;
}
@ -320,22 +321,22 @@
<div class="filters">
<div class="tag-list tech">
<div class="tags tech categories">
Categories<br/> {#each category_list as category}<span class="tag category" style="white-space: nowrap; word-break: normal;">{category} xo</span><wbr/>{/each}
Categories<br/> {#each category_list as category}<span class="tag on category" style="white-space: nowrap; word-break: normal;">{category}</span><wbr/>{/each}
</div>
<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
<div class="tags tech licenses">
Licenses<br/> {#each license_list as license}<span class="tag license">{license} xo</span><wbr/>{/each}
Licenses<br/> {#each license_list as license}<span class="tag on license">{license}</span><wbr/>{/each}
</div>
</div>
<div class="tag-list instance">
<div class="tags instance statuses">
Statuses<br/> {#each status_list as status}<span class="tag status">{status} xo</span><wbr/>{/each}
Statuses<br/> {#each status_list as status}<span class="tag on status">{status}</span><wbr/>{/each}
</div>
<div class="tags instance affiliates">
Affiliates<br/> {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate} xo</span><wbr/>{/each}
Affiliates<br/> {#each affiliate_list as affiliate}<span class="tag on affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span><wbr/>{/each}
</div>
<div class="tags instance hosts">
Hosts<br/> {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host} xo</span><wbr/>{/each}
Hosts<br/> {#each host_list as host}<span class="tag on host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span><wbr/>{/each}
</div>
</div>
</div>
@ -432,12 +433,12 @@
margin-right: 0.5em;
line-height: 2.5;
padding: 6px 8px;
border-radius: 14px;
border-radius: 10px;
white-space: nowrap;
word-break: normal;
box-shadow: 3px 3px 3px #71ba71;
box-shadow: 3px 3px 3px #6a6d6a;
}
.tag:hover { box-shadow: 4px 4px 3px #71ba71;}
.tag:hover { box-shadow: 4px 4px 3px #727372;}
.tag.category {
background-color: #9aa34d;
color: #fff;
@ -458,6 +459,16 @@
background-color: #fff;
color: #000;
}
.tag.on {
padding-right: 25px;
background-image: url('images/check-black-in-white-20px.png');
background-position: right center;
background-repeat: no-repeat;
}
.tag.off {
color: #ccc;
opacity: 0.5;
}
.tiles {
display: grid;
grid-gap: 15px;