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

wip

Browse source
This commit is contained in:
Dave Lane 2024-09-23 09:34:14 +12:00
parent d2aab294bd
commit 0d9762206f
3 changed files with 71 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/CollapsibleSection.svelte
View file

@ -23,21 +23,25 @@
</div>
<style>
.collapsible { border-bottom: 1px solid var(--gray-light, #eee); }
.collapsible {
border-bottom: 1px solid var(--gray-light, #eee);
color: #eee !important;
background-color: #666 !important;
}
h3 { margin: 0; }
button {
background-color: var(--background, #fff);
color: var(--gray-darkest, #282828);
display: flex;
justify-content: space-between;
width: 100%;
/*width: 100%;*/
border: none;
margin: 0;
padding: 1em 0.5em;
}
button[aria-expanded="true"] { border-bottom: 1px solid var(--gray-light, #eee); }
button[aria-expanded="true"] { border-bottom: 1px solid var(--gray-light, #eee); }
button[aria-expanded="true"] .vert { display: none; }
button:focus svg { outline: 2px solid; }
button [aria-expanded="true"] rect { fill: currentColor; }
button[aria-expanded="true"] rect { fill: currentColor; }
svg { height: 0.7em; width: 0.7em; }
</style>

41
src/lib/components/Filterable.svelte
View file

@ -122,7 +122,7 @@
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
}
.filter {
font-size: 80%;
font-size: 80%;
width: 80px;
height: auto;
border: 1px #aaa solid;
@ -141,6 +141,43 @@
}
.active {
background-color: lightblue;
border-color: blue;
/*border-color: blue;*/
}
/* instance-specific styles */
.filter {
font-size: 80%;
margin-right: 0.5em;
line-height: 2.5;
padding: 6px 8px;
border-radius: 10px;
white-space: nowrap;
word-break: normal;
box-shadow: 3px 3px 3px #6a6d6a;
}
.filter:hover { box-shadow: 4px 4px 3px #727372;}
.filter.categories.active {
background-color: #9aa34d;
color: #fff;
}
.filter.analogues.active {
background-color: #a34b62;
color: #fff;
}
.filter.licenses.active {
background-color: #6498a3;
color: #fff;
}
.filter.statuses.active {
background-color: #a369a2;
color: #fff;
}
.filter.affiliates.active {
background-color: #fff;
color: #000;
}
.filter.hosts.active {
background-color: #fff;
color: #000;
}
</style>

96
src/routes/+page.svelte
View file

@ -10,7 +10,8 @@
import { setFilter, getFilter } from '$lib/components/filter.js';
import Filterable from '$lib/components/Filterable.svelte';
// collapsible sections
import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'
import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
import Tile from '$lib/components/Tile.svelte';
//console.log('colours: ', colours);
@ -350,45 +351,45 @@
<li>Total number of services: {results.total_instances}</li>
</ul>
</div>
<CollapsibleSection headerText={'Show or Hide Filters'}>
<CollapsibleSection headerText={'Filters'}>
<div class="filters">
<CollapsibleSection headerText={'Show or Hide Software Catergory Filter'}>
<div class="filter categories">
<div class="filter-group categories">
<Filterable filterValues={categoryFilter} context={'categories'}>
<h2 slot="h2">Categories</h2>
</Filterable>
</div>
</CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Software Analogue Filter'}>
<div class="filter analogues">
<CollapsibleSection headerText={'Software Analogue Filter'}>
<div class="filter-group analogues">
<Filterable filterValues={analogueFilter} context={'analogues'}>
<h2 slot="h2">Analogues</h2>
</Filterable>
</div>
</CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide License Filter'}>
<div class="filter licenses">
<CollapsibleSection headerText={'License Filter'}>
<div class="filter-group licenses">
<Filterable filterValues={licenseFilter} context={'licenses'}>
<h2 slot="h2">Open Source & Copyleft Licenses</h2>
</Filterable>
</div>
</CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Status Filter'}>
<div class="filter statuses">
<CollapsibleSection headerText={'Service Status Filter'}>
<div class="filter-group statuses">
<Filterable filterValues={statusFilter} context={'statuses'}>
<h2 slot="h2">Statuses</h2>
</Filterable>
</div>
</CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Affiliates Filter'}>
<div class="filter affilates">
<CollapsibleSection headerText={'Service Affiliates Filter'}>
<div class="filter-group affilates">
<Filterable filterValues={affiliateFilter} context={'affiliates'}>
<h2 slot="h2">Affiliates</h2>
</Filterable>
</div>
</CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Host filter'}>
<div class="filter hosts">
<CollapsibleSection headerText={'Service Host filter'}>
<div class="filter-group hosts">
<Filterable filterValues={hostFilter} context={'hosts'}>
<h2 slot="h2">Hosts</h2>
</Filterable>
@ -462,69 +463,16 @@
background-color: #ccc;
display: block;
}
.filters {
/*background-color: #f1ff94;
padding: 0.5em;
border: 3px solid #cbea77;
margin: 1em 0;*/
margin-bottom: 1em;
}
/* .filters { margin-bottom: 1em;}
.filters .tags {
/*padding: 0.5em;*/
margin: 1em 0;
display: block;
}*/
.collapsible {
color: #eee !important;
background-color: #666 !important;
}
.tag-list {
/* white-space: normal;
word-break: normal;
display: inline;*/
}
.tags {
/* white-space: normal;
word-break: normal;
display: inline;*/
}
.tag {
font-size: 80%;
margin-right: 0.5em;
line-height: 2.5;
padding: 6px 8px;
border-radius: 10px;
white-space: nowrap;
word-break: normal;
box-shadow: 3px 3px 3px #6a6d6a;
}
.tag:hover { box-shadow: 4px 4px 3px #727372;}
.tag.category {
background-color: #9aa34d;
color: #fff;
}
.tag.license {
background-color: #6498a3;
color: #fff;
}
.tag.status {
background-color: #a369a2;
color: #fff;
}
.tag.affiliate {
background-color: #fff;
color: #000;
}
.tag.host {
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;
@ -555,6 +503,10 @@
.tile:hover {
box-shadow: 10px 10px 6px #727372;
}
.tile p.description {
height: 200px;
overflow: scroll;
}
.tile .links h2 a {
color: #e6c4fc;
}