Skip to content

Commit

Permalink
fix: corrected small inconsistencies in headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tormak9970
Tormak9970 committed Sep 4, 2023
1 parent cf838a4 commit 9f00723
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 97 deletions.
3 changes: 1 addition & 2 deletions src/components/core/SectionTitle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@
}
.title {
margin: 7px 12px;
margin: 6px;
border-bottom: 1px solid var(--foreground);
/* border-bottom: 1px solid transparent; */
}
</style>
69 changes: 37 additions & 32 deletions src/components/core/filters/Options.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,50 +55,55 @@
</script>

<Pane minSize={15} size={20}>
<SectionTitle title="Options" />
<div class="inner">
<SectionTitle title="Options" />

<div class="content" style="height: 39px;">
<div style="margin-left: 6px; margin-top: 4px; display: flex; justify-content: space-between;">
<Toggle label="Dark Mode" value={$theme == 0} onChange={onDarkModeChange}/>
<div class="content" style="height: 39px;">
<div style="padding-left: 6px; margin-top: 4px; display: flex; justify-content: space-between;">
<Toggle label="Dark Mode" value={$theme == 0} onChange={onDarkModeChange}/>
</div>

<Divider />
<VerticalSpacer />
</div>

<Divider />
<VerticalSpacer />
</div>

<div class="content" style="height: calc(100% - 85px);">
<div class="overflow-shadow-container" bind:this={overflowContainer}>
<div class="scroll-container" use:scrollShadow={{ target: scrollTarget, container: overflowContainer, heightBump: 0 }}>
<div class="scroll-target" bind:this={scrollTarget}>
{#each Object.keys($dbFilters[$gridType]) as section, i}
<Accordion
label="{section == "oneoftag" ? "Tags" : toUpperCaseSplit(section)}"
open={true}
>
<VerticalSpacer />
{#each Object.keys($dbFilters[$gridType][section]) as filter}
<Toggle
label="{filter == "material" ? "Minimal" : toUpperCaseSplit(filter)}"
value={$dbFilters[$gridType][section][filter]}
onChange={updateFilters(section, filter)}
/>
<div class="content" style="height: calc(100% - 85px);">
<div class="overflow-shadow-container" bind:this={overflowContainer}>
<div class="scroll-container" use:scrollShadow={{ target: scrollTarget, container: overflowContainer, heightBump: 0 }}>
<div class="scroll-target" bind:this={scrollTarget}>
{#each Object.keys($dbFilters[$gridType]) as section, i}
<Accordion
label="{section == "oneoftag" ? "Tags" : toUpperCaseSplit(section)}"
open={true}
>
<VerticalSpacer />
{#each Object.keys($dbFilters[$gridType][section]) as filter}
<Toggle
label="{filter == "material" ? "Minimal" : toUpperCaseSplit(filter)}"
value={$dbFilters[$gridType][section][filter]}
onChange={updateFilters(section, filter)}
/>
<VerticalSpacer />
{/each}
</Accordion>
{#if i+1 !== Object.keys($dbFilters[$gridType]).length}
<VerticalSpacer />
{/each}
</Accordion>
{#if i+1 !== Object.keys($dbFilters[$gridType]).length}
<VerticalSpacer />
{/if}
{/each}
{/if}
{/each}
</div>
</div>
</div>
</div>
</div>
</Pane>

<style>
.inner {
margin-left: 1px;
height: 100%;
width: 100%;
}
.content {
/* margin: 0px 6px; */
margin-left: 6px;
padding: 0px 6px;
overflow: auto;
max-height: calc(100% - 65px)
Expand Down
132 changes: 69 additions & 63 deletions src/components/core/grids/Grids.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,96 +218,102 @@
</script>

<Pane minSize={20}>
<SectionTitle title="Grids" />
<div class="inner">
<SectionTitle title="Grids" />

<div class="content" style="position: relative; z-index: 2; overflow: initial;">
<div style="margin-left: 6px; display: flex; justify-content: space-between;">
<div style="display: flex;">
<DropDown label="Browsing" options={availableSteamGridGames} onChange={onSgdbGameChange} width={"130px"} bind:value={$selectedSteamGridGameId} />
<HorizontalSpacer />
<IconButton label="Customize Search" onClick={handleCustomNameInput} tooltipPosition={"top"} disabled={$selectedGameAppId == null} height="24px" width="24px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 14px; width: 14px;">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/>
</svg>
</IconButton>
</div>

<DropDown label="Type" options={steamGridTypes} onChange={() => {}} width={"130px"} showTooltip={false} bind:value={$gridType} />
<HorizontalSpacer />
<div class="content" style="position: relative; z-index: 2; overflow: initial;">
<div style="margin-left: 6px; display: flex; justify-content: space-between;">
<div style="display: flex;">
<DropDown label="Browsing" options={availableSteamGridGames} onChange={onSgdbGameChange} width={"130px"} bind:value={$selectedSteamGridGameId} />
<HorizontalSpacer />
<IconButton label="Customize Search" onClick={handleCustomNameInput} tooltipPosition={"top"} disabled={$selectedGameAppId == null} height="24px" width="24px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 14px; width: 14px;">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/>
</svg>
</IconButton>
</div>

<div class="buttons-cont">
<IconButton label="Set Logo Position" onClick={() => { $showLogoPositionModal = true; }} width="auto" disabled={$selectedGameAppId == null || !$appLibraryCache[$selectedGameAppId]?.Logo}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height: 14px; width: 14px;">
<!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/>
</svg>
</IconButton>
<DropDown label="Type" options={steamGridTypes} onChange={() => {}} width={"130px"} showTooltip={false} bind:value={$gridType} />
<HorizontalSpacer />

<IconButton label="Upload Your Own Art!" onClick={prompUserForArt} width="auto" disabled={$selectedGameAppId == null}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 12px; width: 12px;">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/>
</svg>
</IconButton>
<div class="buttons-cont">
<IconButton label="Set Logo Position" onClick={() => { $showLogoPositionModal = true; }} width="auto" disabled={$selectedGameAppId == null || !$appLibraryCache[$selectedGameAppId]?.Logo}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height: 14px; width: 14px;">
<!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/>
</svg>
</IconButton>
<HorizontalSpacer />

<IconButton label="Upload Your Own Art!" onClick={prompUserForArt} width="auto" disabled={$selectedGameAppId == null}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 12px; width: 12px;">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/>
</svg>
</IconButton>
</div>
</div>

<Divider marginTop={"7px"} />
<VerticalSpacer />
</div>

<Divider marginTop={"7px"} />
<VerticalSpacer />
</div>

<div class="content" style="height: calc(100% - 85px);position: relative; z-index: 1;">
{#if $isOnline}
{#if !$needsSGDBAPIKey}
{#if $selectedGameAppId != null}
<Pages numPages={numPages} height="calc(100% - 47px)" bind:selected={$selectedResultPage}>
<div class="overflow-shadow-container" bind:this={overflowContainer}>
<div class="grids-cont" use:scrollShadow={{ target: scrollTarget, container: overflowContainer, heightBump: 0 }}>
{#if isLoading}
<div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;" bind:this={scrollTarget}>
{#each new Array(100) as _}
<GridShinePlaceholder />
{/each}
</div>
{:else}
{#if grids.length > 0}
<div class="content" style="height: calc(100% - 85px);position: relative; z-index: 1;">
{#if $isOnline}
{#if !$needsSGDBAPIKey}
{#if $selectedGameAppId != null}
<Pages numPages={numPages} height="calc(100% - 47px)" bind:selected={$selectedResultPage}>
<div class="overflow-shadow-container" bind:this={overflowContainer}>
<div class="grids-cont" use:scrollShadow={{ target: scrollTarget, container: overflowContainer, heightBump: 0 }}>
{#if isLoading}
<div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;" bind:this={scrollTarget}>
{#each grids as grid (`${$selectedSteamGridGameId}|${grid.id}|${$gridType}`)}
<Grid grid={grid} />
{#each new Array(100) as _}
<GridShinePlaceholder />
{/each}
</div>
{:else}
<div class="message">
No results for {$gridType == GridTypes.HERO ? "Heroe" : $gridType}s for "{$selectedGameName}".
</div>
{#if grids.length > 0}
<div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;" bind:this={scrollTarget}>
{#each grids as grid (`${$selectedSteamGridGameId}|${grid.id}|${$gridType}`)}
<Grid grid={grid} />
{/each}
</div>
{:else}
<div class="message">
No results for {$gridType == GridTypes.HERO ? "Heroe" : $gridType}s for "{$selectedGameName}".
</div>
{/if}
{/if}
{/if}
</div>
</div>
</Pages>
{:else}
<div class="message">
Select a game to start managing your art!
</div>
</Pages>
{/if}
{:else}
<div class="message">
Select a game to start managing your art!
Please set your API key to use SteamGridDB.
</div>
{/if}
{:else}
<div class="message">
Please set your API key to use SteamGridDB.
You're currently offline. In order to go online and access SteamGridDB, try hitting the "Go Online" button below.
</div>
{/if}
{:else}
<div class="message">
You're currently offline. In order to go online and access SteamGridDB, try hitting the "Go Online" button below.
</div>
{/if}
</div>
</div>
</Pane>

<style>
.inner {
margin-right: 1px;
height: 100%;
}
.content {
margin-right: 6px;
padding: 0px 6px;
overflow: auto;
max-height: calc(100% - 65px);
Expand Down

0 comments on commit 9f00723

Please sign in to comment.