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> </div>
<style> <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; } h3 { margin: 0; }
button { button {
background-color: var(--background, #fff); background-color: var(--background, #fff);
color: var(--gray-darkest, #282828); color: var(--gray-darkest, #282828);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; /*width: 100%;*/
border: none; border: none;
margin: 0; margin: 0;
padding: 1em 0.5em; 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[aria-expanded="true"] .vert { display: none; }
button:focus svg { outline: 2px solid; } 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; } svg { height: 0.7em; width: 0.7em; }
</style> </style>

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

@ -122,7 +122,7 @@
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
} }
.filter { .filter {
font-size: 80%; font-size: 80%;
width: 80px; width: 80px;
height: auto; height: auto;
border: 1px #aaa solid; border: 1px #aaa solid;
@ -141,6 +141,43 @@
} }
.active { .active {
background-color: lightblue; 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> </style>

96
src/routes/+page.svelte
View file

@ -10,7 +10,8 @@
import { setFilter, getFilter } from '$lib/components/filter.js'; import { setFilter, getFilter } from '$lib/components/filter.js';
import Filterable from '$lib/components/Filterable.svelte'; import Filterable from '$lib/components/Filterable.svelte';
// collapsible sections // 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); //console.log('colours: ', colours);
@ -350,45 +351,45 @@
<li>Total number of services: {results.total_instances}</li> <li>Total number of services: {results.total_instances}</li>
</ul> </ul>
</div> </div>
<CollapsibleSection headerText={'Show or Hide Filters'}> <CollapsibleSection headerText={'Filters'}>
<div class="filters"> <div class="filters">
<CollapsibleSection headerText={'Show or Hide Software Catergory Filter'}> <CollapsibleSection headerText={'Show or Hide Software Catergory Filter'}>
<div class="filter categories"> <div class="filter-group categories">
<Filterable filterValues={categoryFilter} context={'categories'}> <Filterable filterValues={categoryFilter} context={'categories'}>
<h2 slot="h2">Categories</h2> <h2 slot="h2">Categories</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Software Analogue Filter'}> <CollapsibleSection headerText={'Software Analogue Filter'}>
<div class="filter analogues"> <div class="filter-group analogues">
<Filterable filterValues={analogueFilter} context={'analogues'}> <Filterable filterValues={analogueFilter} context={'analogues'}>
<h2 slot="h2">Analogues</h2> <h2 slot="h2">Analogues</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide License Filter'}> <CollapsibleSection headerText={'License Filter'}>
<div class="filter licenses"> <div class="filter-group licenses">
<Filterable filterValues={licenseFilter} context={'licenses'}> <Filterable filterValues={licenseFilter} context={'licenses'}>
<h2 slot="h2">Open Source & Copyleft Licenses</h2> <h2 slot="h2">Open Source & Copyleft Licenses</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Status Filter'}> <CollapsibleSection headerText={'Service Status Filter'}>
<div class="filter statuses"> <div class="filter-group statuses">
<Filterable filterValues={statusFilter} context={'statuses'}> <Filterable filterValues={statusFilter} context={'statuses'}>
<h2 slot="h2">Statuses</h2> <h2 slot="h2">Statuses</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Affiliates Filter'}> <CollapsibleSection headerText={'Service Affiliates Filter'}>
<div class="filter affilates"> <div class="filter-group affilates">
<Filterable filterValues={affiliateFilter} context={'affiliates'}> <Filterable filterValues={affiliateFilter} context={'affiliates'}>
<h2 slot="h2">Affiliates</h2> <h2 slot="h2">Affiliates</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Show or Hide Service Host filter'}> <CollapsibleSection headerText={'Service Host filter'}>
<div class="filter hosts"> <div class="filter-group hosts">
<Filterable filterValues={hostFilter} context={'hosts'}> <Filterable filterValues={hostFilter} context={'hosts'}>
<h2 slot="h2">Hosts</h2> <h2 slot="h2">Hosts</h2>
</Filterable> </Filterable>
@ -462,69 +463,16 @@
background-color: #ccc; background-color: #ccc;
display: block; display: block;
} }
.filters { /* .filters { margin-bottom: 1em;}
/*background-color: #f1ff94;
padding: 0.5em;
border: 3px solid #cbea77;
margin: 1em 0;*/
margin-bottom: 1em;
}
.filters .tags { .filters .tags {
/*padding: 0.5em;*/
margin: 1em 0; margin: 1em 0;
display: block; 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 { .tiles {
display: grid; display: grid;
grid-gap: 15px; grid-gap: 15px;
@ -555,6 +503,10 @@
.tile:hover { .tile:hover {
box-shadow: 10px 10px 6px #727372; box-shadow: 10px 10px 6px #727372;
} }
.tile p.description {
height: 200px;
overflow: scroll;
}
.tile .links h2 a { .tile .links h2 a {
color: #e6c4fc; color: #e6c4fc;
} }