mirror of
https://github.com/LukeHagar/sveltesociety.dev.git
synced 2025-12-06 04:21:38 +00:00
merged staging, updated components from last pr typahead inputs. Added SearchLayout for the templates, components, and tooling routes. Looks feasible for now, but still needs an overhaul of the components used in those routes.
This commit is contained in:
brittneypostma
@@ -6,6 +6,7 @@
|
||||
"$layout": ["src/lib/components/layout"],
|
||||
"$layouts": ["src/lib/layouts"],
|
||||
"$lib": ["src/lib"],
|
||||
"$utils": ["src/lib/utils"],
|
||||
"$styles": ["src/lib/styles"],
|
||||
"$stores": ["src/lib/stores"]
|
||||
}
|
||||
|
||||
@@ -8,23 +8,23 @@
|
||||
div {
|
||||
font-size: 1rem;
|
||||
border: 2px solid var(--dark-gray);
|
||||
border-radius: 5px;
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
color: var(--dark-gray);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 15px;
|
||||
padding: var(--s-2);
|
||||
position: relative;
|
||||
}
|
||||
div.small {
|
||||
font-size: var(--font-100);
|
||||
padding: 3px 10px;
|
||||
}
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@@ -35,7 +35,7 @@
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
div:hover .arrow {
|
||||
background-color: var(--dark-gray);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.arrow.active {
|
||||
background-color: var(--dark-gray);
|
||||
@@ -52,7 +52,7 @@
|
||||
z-index: 100;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 2px solid var(--primary);
|
||||
border: 2px solid var(--secondary);
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@@ -17,14 +17,12 @@
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.themed {
|
||||
--inputFontSize: 0.875rem;
|
||||
--multiItemActiveBG: var(--color);
|
||||
--height: 1rem;
|
||||
--borderHoverColor: var(--color);
|
||||
--borderFocusColor: var(--color);
|
||||
--itemHoverBG: var(--color-shadow);
|
||||
--itemIsActiveBG: var(--color);
|
||||
--indicatorTop: calc(50% - 13px);
|
||||
/* --inputFontSize: 0.875rem; */
|
||||
--multiItemActiveBG: var(--secondary);
|
||||
--borderHoverColor: var(--secondary);
|
||||
--borderFocusColor: var(--secondary);
|
||||
--itemIsActiveBG: var(--secondary);
|
||||
/* --indicatorTop: calc(50% - 13px); */
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -35,7 +33,7 @@
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
padding: var(--s-2);
|
||||
gap: 10px;
|
||||
min-width: 150px;
|
||||
min-height: 3rem;
|
||||
@@ -44,12 +42,12 @@
|
||||
.themed :global(.multiSelectItem) {
|
||||
font-size: 0.875rem;
|
||||
align-items: center;
|
||||
--multiItemBorderRadius: var(--radius-100);
|
||||
--multiItemBorderRadius: var(--s-1);
|
||||
--multiItemHeight: 1.25rem;
|
||||
--multiItemMargin: 0;
|
||||
--multiItemPadding: 0.2rem 0.3rem;
|
||||
--multiClearBG: transparent;
|
||||
--multiClearFill: var(--color-text-secondary);
|
||||
--multiClearFill: var(--secondary);
|
||||
--multiClearHoverBG: transparent;
|
||||
--multiClearHoverFill: var(--color-bg);
|
||||
--multiLabelMargin: 1px 5px 0 0;
|
||||
@@ -65,7 +63,4 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.themed :global(.listItem) {
|
||||
--height: 1.4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
8
src/lib/layouts/SearchLayout.svelte
Normal file
8
src/lib/layouts/SearchLayout.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script>
|
||||
export let title;
|
||||
</script>
|
||||
|
||||
<h1>{title}</h1>
|
||||
<slot name="controls" />
|
||||
<hr />
|
||||
<slot name="items" />
|
||||
@@ -93,3 +93,107 @@ li {
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
/***********TEMPLATES & COMPONENTS STYLES***********/
|
||||
hr {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
.submit {
|
||||
position: absolute;
|
||||
top: calc(100% + 1rem);
|
||||
left: 0;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: Overpass;
|
||||
position: relative;
|
||||
}
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-gap: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.searchbar {
|
||||
align-self: flex-start;
|
||||
width: 35%;
|
||||
font-family: Overpass;
|
||||
border-width: 0;
|
||||
background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.searchbar:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--secondary);
|
||||
}
|
||||
.searchbar-count {
|
||||
position: absolute;
|
||||
top: calc(100% + 1rem);
|
||||
right: 0;
|
||||
}
|
||||
ul.popin {
|
||||
padding: 0.5ex;
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
ul.popin li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
ul.popin li:hover {
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
ul.popin li.tag-search {
|
||||
position: sticky;
|
||||
top: -0.5ex;
|
||||
margin: 0 -0.5ex;
|
||||
padding: 0.5ex;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
}
|
||||
ul.popin li.tag-search input {
|
||||
margin: 0;
|
||||
background: #f3f6f9;
|
||||
width: 100%;
|
||||
min-width: 15ch;
|
||||
}
|
||||
ul.popin li.tag-search:hover {
|
||||
background: white;
|
||||
}
|
||||
ul.popin.no-wrap li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
ul.popin li label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0.7rem;
|
||||
padding: 0.8ex;
|
||||
}
|
||||
ul.popin li input {
|
||||
flex: 0;
|
||||
margin: 0 1ex 0 0;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.controls {
|
||||
flex-flow: column-reverse;
|
||||
align-items: stretch;
|
||||
}
|
||||
.inputs {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.searchbar {
|
||||
align-self: flex-start;
|
||||
margin-bottom: 1ex;
|
||||
width: var(--s-full);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,10 +30,4 @@
|
||||
main {
|
||||
padding: var(--s-10) var(--s-5) var(--s-20);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
main {
|
||||
padding: var(--s-20) 0 var(--s-40);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,16 @@
|
||||
<script>
|
||||
import SearchLayout from '$layouts/SearchLayout.svelte';
|
||||
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
|
||||
import List from '$lib/components/ComponentIndex/CardList.svelte';
|
||||
import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
|
||||
import List from '$components/ComponentIndex/CardList.svelte';
|
||||
import Button from '$components/ComponentIndex/ArrowButton.svelte';
|
||||
import components from './components.json';
|
||||
import { compare, selectSortItems } from '$lib/utils/sort';
|
||||
import Select from '$components/Select.svelte';
|
||||
|
||||
let searchValue;
|
||||
|
||||
const tags = Array.from(new Set(components.map((item) => item.tags).flat()));
|
||||
const tagItems = tags.map((t) => ({ label: t, value: t }));
|
||||
let filterTag = [];
|
||||
let selectedTags = null;
|
||||
|
||||
const allCategories = Array.from(new Set(components.map((item) => item.category).flat()));
|
||||
const categoryItems = [
|
||||
{ label: 'All', value: null },
|
||||
@@ -20,22 +18,17 @@
|
||||
];
|
||||
let selectedCategory = null;
|
||||
let filterCategory = null;
|
||||
|
||||
let sorting = 'stars_desc';
|
||||
let selectedSorting = { value: 'stars_desc', label: 'Stars Desc' };
|
||||
$: sorting = selectedSorting?.value || 'stars_desc';
|
||||
|
||||
let packageManager = 'npm';
|
||||
|
||||
const intersection = (array1, array2) => {
|
||||
return array1.filter((item) => array2.includes(item));
|
||||
};
|
||||
|
||||
$: filterCategory = selectedCategory?.value || null;
|
||||
$: dataToDisplay = components
|
||||
.filter((component) => {
|
||||
if (!searchValue && filterTag.length === 0 && filterCategory === null) return true;
|
||||
|
||||
if (
|
||||
(searchValue &&
|
||||
!(
|
||||
@@ -47,11 +40,9 @@
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
.sort(compare(sorting));
|
||||
|
||||
$: categories = Array.from(new Set(dataToDisplay.map((item) => item.category)));
|
||||
$: filterTag = selectedTags?.map((obj) => obj.value) || [];
|
||||
</script>
|
||||
@@ -60,193 +51,58 @@
|
||||
<title>Components - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="wrapper">
|
||||
<h1>Components</h1>
|
||||
<div class="controls">
|
||||
<div class="inputs">
|
||||
<Button active={filterTag.length > 0}>
|
||||
Tags {#if filterTag.length > 0}<small>({filterTag.length})</small>{/if}
|
||||
<ul slot="menu" role="menu" class="popin">
|
||||
<li class="tag-search"><input placeholder="Search for tags..." bind:value={searchTag} /></li>
|
||||
{#each tagSearchResult as tag}
|
||||
<li><label><input type="checkbox" bind:group={filterTag} value={tag}> {tag}</label></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</Button>
|
||||
<Button active={filterCategory !== null}>
|
||||
Categories
|
||||
<ul slot="menu" role="menu" class="popin">
|
||||
<li><label><input type="radio" bind:group={filterCategory} value={null}> All</label></li>
|
||||
{#each allCategories as category}
|
||||
<li><label><input type="radio" bind:group={filterCategory} value={category}> {category||"Unclassified"}</label></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</Button>
|
||||
|
||||
<Button active={sorting !== ''}>
|
||||
Sort
|
||||
<ul slot="menu" role="menu" class="popin no-wrap">
|
||||
<li><label><input type="radio" bind:group={sorting} value="added_desc"> Last Added first</label></li>
|
||||
<li><label><input type="radio" bind:group={sorting} value="added_asc"> Oldest first</label></li>
|
||||
<li><label><input type="radio" bind:group={sorting} value="stars_desc"> Stars Desc</label></li>
|
||||
<li><label><input type="radio" bind:group={sorting} value="stars_asc"> Stars Asc</label></li>
|
||||
<li><label><input type="radio" bind:group={sorting} value="name_asc"> Name Asc</label></li>
|
||||
<li><label><input type="radio" bind:group={sorting} value="name_desc"> Name Desc</label></li>
|
||||
</ul>
|
||||
</Button>
|
||||
<Button small active={packageManager !== ''}>
|
||||
Package Manager
|
||||
<ul slot="menu" role="menu" class="popin no-wrap">
|
||||
<li><label><input type="radio" bind:group={packageManager} value="npm"> NPM</label></li>
|
||||
<li><label><input type="radio" bind:group={packageManager} value="pnpm"> PNPM</label></li>
|
||||
<li><label><input type="radio" bind:group={packageManager} value="yarn"> Yarn</label></li>
|
||||
</ul>
|
||||
</Button>
|
||||
<a href = "/help/components" class="submit">Submit a component</a>
|
||||
</div>
|
||||
<SearchLayout title="Components">
|
||||
<section class="controls" slot="controls">
|
||||
<div class="inputs">
|
||||
<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
|
||||
<Select
|
||||
label="Category"
|
||||
bind:value={selectedCategory}
|
||||
items={categoryItems}
|
||||
placeholder="Category"
|
||||
isClearable={false}
|
||||
showIndicator
|
||||
/>
|
||||
<Select
|
||||
items={selectSortItems}
|
||||
bind:value={selectedSorting}
|
||||
label="Sorting"
|
||||
showIndicator
|
||||
isClearable={false}
|
||||
/>
|
||||
|
||||
<input
|
||||
class="searchbar"
|
||||
type="text"
|
||||
placeholder="Search for components..."
|
||||
bind:value={searchValue} />
|
||||
<span class="searchbar-count">{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span>
|
||||
</div>
|
||||
<hr />
|
||||
{#each categories as category}
|
||||
<List title={category||"Unclassified"}>
|
||||
{#each dataToDisplay.filter(d => d.category === category) as data}
|
||||
<ComponentCard {...data} manager={packageManager} />
|
||||
{/each}
|
||||
</List>
|
||||
{/each}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
.submit {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: Overpass;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-gap: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
font-family: Overpass;
|
||||
border-width: 0;
|
||||
background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.searchbar-count {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul.popin {
|
||||
padding: 0.5ex;
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
ul.popin li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
ul.popin li:hover {
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
ul.popin li.tag-search {
|
||||
position: sticky;
|
||||
top: -0.5ex;
|
||||
margin: 0 -0.5ex;
|
||||
padding: 0.5ex;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
}
|
||||
ul.popin li.tag-search input {
|
||||
margin: 0;
|
||||
background: #f3f6f9;
|
||||
width: 100%;
|
||||
min-width: 15ch;
|
||||
}
|
||||
ul.popin li.tag-search:hover {
|
||||
background: white;
|
||||
}
|
||||
ul.popin.no-wrap li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.popin li label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0.7rem;
|
||||
padding: 0.8ex;
|
||||
}
|
||||
|
||||
ul.popin li input {
|
||||
flex: 0;
|
||||
margin: 0 1ex 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.controls {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.controls {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
width: auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
:global(.select-container) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<Button small active={packageManager !== ''}>
|
||||
Package Manager
|
||||
<ul slot="menu" role="menu" class="popin no-wrap">
|
||||
<li><label><input type="radio" bind:group={packageManager} value="npm" /> NPM</label></li>
|
||||
<li>
|
||||
<label><input type="radio" bind:group={packageManager} value="pnpm" /> PNPM</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="radio" bind:group={packageManager} value="yarn" /> Yarn</label>
|
||||
</li>
|
||||
</ul>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<a href="/help/components" class="submit">Submit a component</a>
|
||||
<input
|
||||
class="searchbar"
|
||||
type="text"
|
||||
placeholder="Search for components..."
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
<span class="searchbar-count"
|
||||
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
||||
>
|
||||
</section>
|
||||
<section slot="items">
|
||||
{#each categories as category}
|
||||
<List title={category || 'Unclassified'}>
|
||||
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
||||
<ComponentCard {...data} manager={packageManager} />
|
||||
{/each}
|
||||
</List>
|
||||
{/each}
|
||||
</section>
|
||||
</SearchLayout>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
|
||||
import List from '$lib/components/ComponentIndex/CardList.svelte';
|
||||
import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
|
||||
import components from './templates.json';
|
||||
import { compare, selectSortItems } from '$lib/utils/sort';
|
||||
import Select from '$lib/components/Select.svelte';
|
||||
import SearchLayout from '$lib/layouts/SearchLayout.svelte';
|
||||
|
||||
let searchValue;
|
||||
|
||||
@@ -57,9 +57,8 @@
|
||||
<title>Templates - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="wrapper">
|
||||
<h1>Templates</h1>
|
||||
<div class="controls">
|
||||
<SearchLayout title="Templates">
|
||||
<section class="controls" slot="controls">
|
||||
<div class="inputs">
|
||||
<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
|
||||
<Select
|
||||
@@ -78,20 +77,20 @@
|
||||
isClearable={false}
|
||||
/>
|
||||
|
||||
<Button on:click={() => (location.href = '/help/components')}>Submit a template</Button>
|
||||
</div>
|
||||
|
||||
<a href='/help/components' class="submit">Submit a template</a>
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="searchbar"
|
||||
type="text"
|
||||
placeholder="Search for templates..."
|
||||
bind:value={searchValue}
|
||||
class="searchbar"
|
||||
type="text"
|
||||
placeholder="Search for templates..."
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
<span class="searchbar-count"
|
||||
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
||||
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
||||
>
|
||||
</div>
|
||||
<hr />
|
||||
</section>
|
||||
<section slot="items">
|
||||
{#each categories as category}
|
||||
<List title={category || 'Unclassified'}>
|
||||
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
||||
@@ -99,81 +98,6 @@
|
||||
{/each}
|
||||
</List>
|
||||
{/each}
|
||||
</main>
|
||||
</section>
|
||||
</SearchLayout>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: Overpass;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-gap: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
font-family: Overpass;
|
||||
border-width: 0;
|
||||
background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.searchbar-count {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.controls {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
.inputs {
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.controls {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
width: auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
:global(.select-container) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
|
||||
import List from '$lib/components/ComponentIndex/CardList.svelte';
|
||||
import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
|
||||
import SearchLayout from '$layouts/SearchLayout.svelte';
|
||||
import tools from './tools.json';
|
||||
import Select from '$lib/components/Select.svelte';
|
||||
import { compare, selectSortItems } from '$lib/utils/sort';
|
||||
@@ -56,9 +56,8 @@
|
||||
<title>Tooling - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="wrapper">
|
||||
<h1>Tooling</h1>
|
||||
<div class="controls">
|
||||
<SearchLayout title="Tooling">
|
||||
<section slot="controls" class="controls">
|
||||
<div class="inputs">
|
||||
<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
|
||||
<Select
|
||||
@@ -76,7 +75,7 @@
|
||||
showIndicator
|
||||
isClearable={false}
|
||||
/>
|
||||
<Button on:click={() => (location.href = '/help/components')}>Submit a tool</Button>
|
||||
<a href="/help/components" class="submit">Submit a tool</a>
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -88,8 +87,8 @@
|
||||
<span class="searchbar-count"
|
||||
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
||||
>
|
||||
</div>
|
||||
<hr />
|
||||
</section>
|
||||
<section slot="items">
|
||||
{#each categories as category}
|
||||
<List title={category || 'Unclassified'}>
|
||||
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
||||
@@ -97,81 +96,6 @@
|
||||
{/each}
|
||||
</List>
|
||||
{/each}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: Overpass;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-gap: 0.5rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
font-family: Overpass;
|
||||
border-width: 0;
|
||||
background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.searchbar-count {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.controls {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.controls {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
width: auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
:global(.select-container) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
</SearchLayout>
|
||||
|
||||
@@ -34,6 +34,7 @@ const config = {
|
||||
$components: path.resolve('./src/lib/components'),
|
||||
$layout: path.resolve('./src/lib/components/layout'),
|
||||
$layouts: path.resolve('./src/lib/layouts'),
|
||||
$utils: path.resolve('./src/lib/utils'),
|
||||
$styles: path.resolve('./src/lib/styles'),
|
||||
$stores: path.resolve('./src/lib/stores')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user