wip
This commit is contained in:
parent
d2aab294bd
commit
0d9762206f
3 changed files with 71 additions and 78 deletions
|
@ -23,14 +23,18 @@
|
|||
</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;
|
||||
|
@ -38,6 +42,6 @@
|
|||
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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue