sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 11:32:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor layout and styling for improved responsiveness and accessibility; add Footer component

Browse Source
This commit is contained in:
sHa
2025-05-15 15:49:56 +03:00
parent d30e2f9e0b
commit 9509ef0688
9 changed files with 342 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/global.css
View File

@@ -66,9 +66,9 @@ body {
} }
.container { .container {
max-width: 1200px; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 0;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
} }
@@ -398,24 +398,7 @@ div.logo-image img {
color: var(--color-text); color: var(--color-text);
} }
.preview-container {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-card);
color: var(--color-text);
margin-bottom: 1rem;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.preview-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.logo-details { .logo-details {
margin-top: 1rem; margin-top: 1rem;

78
src/App.svelte
View File

@@ -1,15 +1,10 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import Router from 'svelte-spa-router'; // Import Router component directly with explicit path
import Router from 'svelte-spa-router/Router.svelte';
// Import pages for routing // Import routes from centralized router.js file
import Home from './pages/Home.svelte'; import { routes } from './router.js';
import PreviewPage from './pages/Preview.svelte';
const routes = {
'/': Home,
'/preview/:id': PreviewPage,
};
let viewMode = "grid"; // 'grid' or 'list' let viewMode = "grid"; // 'grid' or 'list'
let searchQuery = ""; let searchQuery = "";
@@ -510,56 +505,19 @@
} }
</script> </script>
<main class="container app-flex"> <div class="container app-flex">
<Router {routes} /> <Router {routes} />
</div>
<style> <style>
.app-flex { .app-flex {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.main-content { .app-flex {
flex: 1 0 auto; min-height: 100vh;
} display: flex;
footer { flex-direction: column;
flex: 0 0 auto; }
} </style>
.footer-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1em;
}
.footer-left {
flex: 1;
text-align: left;
}
.footer-center {
flex: 2;
text-align: left;
}
.footer-github {
flex: 0;
margin-left: 1em;
display: inline-flex;
align-items: center;
}
@media (max-width: 700px) {
.footer-flex {
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
}
.footer-left, .footer-center {
text-align: left;
width: 100%;
}
.footer-github {
margin-left: 0;
margin-top: 0.5em;
}
}
</style>
</main>

77
src/components/Footer.svelte Normal file
View File

@@ -0,0 +1,77 @@
<script>
// No props needed for this simple footer
</script>
<footer>
<div class="footer-flex">
<span class="footer-left">shadoll Logo Gallery</span>
<span class="footer-center">All logos are property of their respective owners.</span>
<a
href="https://github.com/shadoll/sLogos"
target="_blank"
rel="noopener noreferrer"
class="footer-github"
>
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="#ccc"
style="margin-right:0.3em;"
><path
d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
/></svg>
</a>
</div>
</footer>
<style> footer {
padding: 1.5rem;
background: var(--color-background);
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
font-size: 0.9rem;
margin-top: auto;
}
.footer-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1em;
}
.footer-left {
flex: 1;
text-align: left;
}
.footer-center {
flex: 2;
text-align: left;
}
.footer-github {
flex: 0;
margin-left: 1em;
display: inline-flex;
align-items: center;
}
@media (max-width: 700px) {
.footer-flex {
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
}
.footer-left, .footer-center {
text-align: left;
width: 100%;
}
.footer-github {
margin-left: 0;
margin-top: 0.5em;
}
}
</style>

8
src/components/Header.svelte
View File

@@ -298,6 +298,14 @@
</header> </header>
<style> <style>
.main-header {
padding: 0.5rem 1rem;
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
border-radius: 0; /* Ensure no rounded corners */
margin-bottom: 1rem;
}
.header-title { .header-title {
display: flex; display: flex;
align-items: center; align-items: center;

1
src/components/InlineSvg.svelte
View File

@@ -92,6 +92,7 @@
} }
$: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg(); $: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg();
</script> </script>
<div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}> <div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}>

275
src/components/Preview.svelte
View File

@@ -1,8 +1,8 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from "svelte";
import InlineSvg from './InlineSvg.svelte'; import InlineSvg from "./InlineSvg.svelte";
import Actions from './Actions.svelte'; import Actions from "./Actions.svelte";
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js'; import { getDefaultLogoColor, getThemeColor } from "../utils/colorTheme.js";
import { generateColorSetCircle } from "../utils/colorCircles.js"; import { generateColorSetCircle } from "../utils/colorCircles.js";
import { fetchSvgSource } from "../utils/svgSource.js"; import { fetchSvgSource } from "../utils/svgSource.js";
@@ -11,7 +11,7 @@
export let theme; export let theme;
export const openLogoByAnchor = () => {}; export const openLogoByAnchor = () => {};
export let onDownload = (path, name) => { export let onDownload = (path, name) => {
const a = document.createElement('a'); const a = document.createElement("a");
a.href = path; a.href = path;
a.download = name; a.download = name;
document.body.appendChild(a); document.body.appendChild(a);
@@ -20,32 +20,35 @@
}; };
// For SVG source code display // For SVG source code display
let svgSource = ''; let svgSource = "";
let isFetchingSvgSource = false; let isFetchingSvgSource = false;
// No event dispatching, parent is fully responsible for controlling the component // No event dispatching, parent is fully responsible for controlling the component
function isSvgLogo(logo) { function isSvgLogo(logo) {
return logo && logo.format && logo.format.toLowerCase() === 'svg'; return logo && logo.format && logo.format.toLowerCase() === "svg";
} // Function to copy SVG source from textarea } // Function to copy SVG source from textarea
function copySvgSourceFromTextarea() { function copySvgSourceFromTextarea() {
if (svgSource) { if (svgSource) {
try { try {
navigator.clipboard.writeText(svgSource); navigator.clipboard.writeText(svgSource);
return true; return true;
} catch (err) { } catch (err) {
console.error('Error copying from textarea:', err); console.error("Error copying from textarea:", err);
// Show content in prompt as fallback // Show content in prompt as fallback
window.prompt('Copy the SVG source code:', svgSource); window.prompt("Copy the SVG source code:", svgSource);
return false; return false;
} }
} }
return false; return false;
} }
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
$: validColorConfig = logo && typeof logo.colorConfig === 'object' && logo.colorConfig.selector ? logo.colorConfig : undefined; $: validColorConfig =
logo && typeof logo.colorConfig === "object" && logo.colorConfig.selector
? logo.colorConfig
: undefined;
// No URL manipulation in the component anymore // No URL manipulation in the component anymore
// Parent components should handle all URL and navigation concerns // Parent components should handle all URL and navigation concerns
@@ -53,18 +56,21 @@
// Only fetch SVG source when displayed // Only fetch SVG source when displayed
$: if (show && logo) { $: if (show && logo) {
// Fetch SVG source when logo is displayed and is an SVG // Fetch SVG source when logo is displayed and is an SVG
if (logo.format === 'SVG' && !svgSource) { if (logo.format === "SVG" && !svgSource) {
isFetchingSvgSource = true; isFetchingSvgSource = true;
fetchSvgSource(logo.path) fetchSvgSource(logo.path)
.then(source => { .then((source) => {
svgSource = source; svgSource = source;
isFetchingSvgSource = false; isFetchingSvgSource = false;
}) })
.catch(err => { .catch((err) => {
console.error('Error fetching SVG source:', err); console.error("Error fetching SVG source:", err);
isFetchingSvgSource = false; isFetchingSvgSource = false;
}); });
} }
// Ensure the page scrolls to the top when preview is shown
window.scrollTo(0, 0);
} }
// Component doesn't handle any window events or URL changes // Component doesn't handle any window events or URL changes
@@ -73,12 +79,12 @@
// Svelte action to remove width/height from SVGs for responsive scaling // Svelte action to remove width/height from SVGs for responsive scaling
function removeSvgSize(node) { function removeSvgSize(node) {
function cleanSvg() { function cleanSvg() {
const svgs = node.querySelectorAll('svg'); const svgs = node.querySelectorAll("svg");
svgs.forEach(svg => { svgs.forEach((svg) => {
svg.removeAttribute('width'); svg.removeAttribute("width");
svg.removeAttribute('height'); svg.removeAttribute("height");
svg.style.width = '100%'; svg.style.width = "100%";
svg.style.height = '100%'; svg.style.height = "100%";
}); });
} }
cleanSvg(); cleanSvg();
@@ -88,49 +94,52 @@
return { return {
destroy() { destroy() {
observer.disconnect(); observer.disconnect();
} },
}; };
} }
</script> </script>
<div class="modal-backdrop fullscreen" <div
class="preview-wrapper"
style="display: {show === true ? 'flex' : 'none'}" style="display: {show === true ? 'flex' : 'none'}"
role="dialog" role="region"
aria-modal="true" aria-label="Logo preview"
> >
{#if logo} {#if logo}
<div class="modal-content fullscreen-modal"> <div class="modal-header">
<div class="modal-header"> <div class="header-spacer"></div>
<div class="header-spacer"></div> <h2>{logo.name}</h2>
<h2>{logo.name}</h2> <div class="header-spacer"></div>
<div class="header-spacer"></div> </div>
</div> <div class="preview-body">
<div class="modal-body fullscreen-body"> <div
<div class="preview-container fullscreen-preview" class="preview-container fullscreen-preview"
role="img" role="img"
aria-label={logo.name} aria-label={logo.name}
> >
<div class="preview-media-wrapper" use:removeSvgSize> <div class="preview-media-wrapper" use:removeSvgSize>
{#if isSvgLogo(logo)} {#if isSvgLogo(logo)}
<InlineSvg <InlineSvg
path={logo.path} path={logo.path}
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined} color={logo.colors
colorConfig={validColorConfig} ? logo._activeColor || getLogoThemeColor(logo)
targets={logo.targets} : undefined}
sets={logo.sets} colorConfig={validColorConfig}
colors={logo.colors} targets={logo.targets}
activeSet={logo._activeSet} sets={logo.sets}
alt={logo.name} colors={logo.colors}
/> activeSet={logo._activeSet}
{:else} alt={logo.name}
<img src={logo.path} alt={logo.name} /> />
{/if} {:else}
</div> <img src={logo.path} alt={logo.name} />
{/if}
</div> </div>
<div class="right-column"> </div>
<div class="logo-details fullscreen-details"> <div class="right-column">
{#if isSvgLogo(logo) && logo.colors} <div class="logo-details fullscreen-details">
<div class="color-switcher-preview"> {#if isSvgLogo(logo) && logo.colors}
<div class="color-switcher-preview">
<span <span
class="color-circle color-reset" class="color-circle color-reset"
title="Reset to theme color" title="Reset to theme color"
@@ -138,10 +147,21 @@
role="button" role="button"
aria-label="Reset to theme color" aria-label="Reset to theme color"
style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;" style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
on:click|stopPropagation={() => logo._activeColor = undefined} on:click|stopPropagation={() => (logo._activeColor = undefined)}
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} on:keydown|stopPropagation={(e) =>
(e.key === "Enter" || e.key === " ") &&
(logo._activeColor = undefined)}
> >
<svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg> <svg
width="100%"
height="100%"
viewBox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg"
><path
d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
fill="#33363f"
/></svg
>
</span> </span>
{#if logo.sets} {#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i} {#each Object.entries(logo.sets) as [setName, setConfig], i}
@@ -151,12 +171,16 @@
tabindex="0" tabindex="0"
role="button" role="button"
on:click|stopPropagation={() => { on:click|stopPropagation={() => {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length]; logo._activeColor = Object.values(logo.colors)[
i % Object.keys(logo.colors).length
];
logo._activeSet = setName; logo._activeSet = setName;
}} }}
on:keydown|stopPropagation={(e) => { on:keydown|stopPropagation={(e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === "Enter" || e.key === " ") {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length]; logo._activeColor = Object.values(logo.colors)[
i % Object.keys(logo.colors).length
];
logo._activeSet = setName; logo._activeSet = setName;
} }
}} }}
@@ -169,12 +193,15 @@
{#each Object.entries(logo.colors) as [colorName, colorValue]} {#each Object.entries(logo.colors) as [colorName, colorValue]}
<span <span
class="color-circle" class="color-circle"
title={colorName.replace('_', ' ')} title={colorName.replace("_", " ")}
style={`background:${colorValue}`} style={`background:${colorValue}`}
tabindex="0" tabindex="0"
role="button" role="button"
on:click|stopPropagation={() => logo._activeColor = colorValue} on:click|stopPropagation={() =>
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)} (logo._activeColor = colorValue)}
on:keydown|stopPropagation={(e) =>
(e.key === "Enter" || e.key === " ") &&
(logo._activeColor = colorValue)}
></span> ></span>
{/each} {/each}
{/if} {/if}
@@ -188,7 +215,11 @@
{#if logo.tags && logo.tags.length} {#if logo.tags && logo.tags.length}
<div class="logo-tags"> <div class="logo-tags">
{#each logo.tags as tagObj} {#each logo.tags as tagObj}
<span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span> <span
class="logo-tag"
style={tagObj.color ? `background:${tagObj.color}` : ""}
>{tagObj.text || tagObj}</span
>
{/each} {/each}
</div> </div>
{/if} {/if}
@@ -197,8 +228,8 @@
<div class="preview-actions-container"> <div class="preview-actions-container">
<div class="actions-wrapper"> <div class="actions-wrapper">
<Actions <Actions
logo={logo} {logo}
onDownload={onDownload} {onDownload}
onCopySource={copySvgSourceFromTextarea} onCopySource={copySvgSourceFromTextarea}
inPreview={true} inPreview={true}
/> />
@@ -214,20 +245,18 @@
</div> </div>
{/if} {/if}
</div> </div>
</div>
</div> </div>
{/if} {/if}
</div> </div>
<style> <style>
.preview-actions-container { .preview-actions-container {
width: 100%; width: 100%;
background: var(--color-card); background: var(--color-card);
color: var(--color-text); color: var(--color-text);
border-radius: 12px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18); box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
@@ -253,33 +282,32 @@
background: #444; background: #444;
color: #eee; color: #eee;
} }
.preview-container {
.modal-backdrop.fullscreen {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.7); /* match .modal-backdrop in global.css */
z-index: 2000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem;
background-color: var(--color-card);
color: var(--color-text);
border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.modal-content.fullscreen-modal {
width: 100vw; .preview-container img {
height: 100vh; max-width: 100%;
max-width: 100vw; max-height: 100%;
max-height: 100vh; object-fit: contain;
border-radius: 0; }
box-shadow: none; .preview-wrapper {
background: var(--color-card); position: relative;
color: var(--color-text); width: 100%;
height: 100%;
background: var(--color-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
border: none; border: none;
overflow: hidden; overflow: visible;
} }
.modal-header { .modal-header {
display: flex; display: flex;
@@ -297,24 +325,23 @@
margin: 0; margin: 0;
} }
.header-spacer { .header-spacer {
/* This empty div helps maintain the centered title with the back button on the left */
width: 70px; width: 70px;
} }
.modal-body.fullscreen-body { .preview-body {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: stretch;
justify-content: center; justify-content: space-between;
width: 100vw; width: 100%;
height: 100%; height: 100%;
background: var(--color-card); background: var(--color-card);
padding: 0 2rem 2rem 2rem;
gap: 2.5rem; gap: 2.5rem;
overflow: hidden; overflow: visible;
padding: 1rem;
} }
.preview-container.fullscreen-preview { .preview-container.fullscreen-preview {
flex: 2 1 0; flex: 3;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -323,7 +350,7 @@
background: var(--color-card); background: var(--color-card);
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: visible;
} }
.preview-media-wrapper { .preview-media-wrapper {
width: 100%; width: 100%;
@@ -331,7 +358,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: visible;
} }
.preview-media-wrapper img { .preview-media-wrapper img {
width: 100%; width: 100%;
@@ -350,7 +377,7 @@
color: var(--color-text); color: var(--color-text);
border-radius: 12px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18); box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;
} }
@@ -385,14 +412,14 @@
/* These styles are no longer needed as we're using the Actions component */ /* These styles are no longer needed as we're using the Actions component */
@media (max-width: 900px) { @media (max-width: 900px) {
.modal-body.fullscreen-body { .preview-body {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: 1.5rem; gap: 1.5rem;
padding: 0 0.5rem 0.5rem 0.5rem; padding: 0 0.5rem 0.5rem 0.5rem;
overflow-y: auto; /* Enable scrolling on smaller screens */
} }
.logo-details.fullscreen-details { .logo-details.fullscreen-details {
margin: 0 auto 1.5rem auto;
max-width: 100vw; max-width: 100vw;
min-width: 0; min-width: 0;
width: 100%; width: 100%;
@@ -403,19 +430,46 @@
} }
.right-column { .right-column {
max-width: 100%; max-width: 100%;
width: 100%; width: 100% !important; /* Force 100% width in mobile view */
flex-basis: 100%;
} }
.preview-actions-container { .preview-actions-container {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
/* Mobile-specific styles for the preview container */
.preview-container.fullscreen-preview {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* Create a square container */
min-height: 50vh; /* Ensure minimum height */
position: relative;
}
/* For browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
.preview-container.fullscreen-preview {
height: 0;
padding-bottom: 100%;
position: relative;
}
.preview-media-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
} }
.right-column { .right-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column; /* Keep it as column for proper vertical stacking */
gap: 2rem; gap: 2rem;
width: 300px; flex: 1;
} }
.source-code-container { .source-code-container {
@@ -424,16 +478,9 @@
color: var(--color-text); color: var(--color-text);
border-radius: 12px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18); box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
z-index: 1; z-index: 1;
position: relative; position: relative;
margin-top: 2rem;
}
.source-code-container h3 {
font-size: 1rem;
margin: 0 0 1rem 0;
color: var(--color-text);
} }
.source-code-wrapper { .source-code-wrapper {

164
src/pages/Home.svelte
View File

@@ -3,6 +3,7 @@
import Grid from "../components/Grid.svelte"; import Grid from "../components/Grid.svelte";
import List from "../components/List.svelte"; import List from "../components/List.svelte";
import Header from "../components/Header.svelte"; import Header from "../components/Header.svelte";
import Footer from "../components/Footer.svelte";
// Use the app's global data without reloading // Use the app's global data without reloading
let appData = {}; let appData = {};
@@ -131,73 +132,49 @@
</script> </script>
{#if initialized} {#if initialized}
<div class="home-container"> <Header
<Header logos={appData.logos || []}
logos={appData.logos || []} displayLogos={appData.displayLogos || []}
displayLogos={appData.displayLogos || []} theme={appData.theme || "light"}
theme={appData.theme || "light"} setTheme={appData.setTheme || ((t) => {})}
setTheme={appData.setTheme || ((t) => {})} viewMode={appData.viewMode || "grid"}
viewMode={appData.viewMode || "grid"} setGridView={appData.setGridView || (() => {})}
setGridView={appData.setGridView || (() => {})} setListView={appData.setListView || (() => {})}
setListView={appData.setListView || (() => {})} searchQuery={appData.searchQuery || ""}
searchQuery={appData.searchQuery || ""} setSearchQuery={appData.setSearchQuery || ((q) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})} allTags={appData.allTags || []}
allTags={appData.allTags || []} selectedTags={appData.selectedTags || []}
selectedTags={appData.selectedTags || []} tagDropdownOpen={appData.tagDropdownOpen || false}
tagDropdownOpen={appData.tagDropdownOpen || false} toggleDropdown={appData.toggleDropdown || (() => {})}
toggleDropdown={appData.toggleDropdown || (() => {})} addTag={appData.addTag || (() => {})}
addTag={appData.addTag || (() => {})} removeTag={appData.removeTag || (() => {})}
removeTag={appData.removeTag || (() => {})} getTagObj={appData.getTagObj || ((t) => ({text: t}))}
getTagObj={appData.getTagObj || ((t) => ({text: t}))} compactMode={appData.compactMode || false}
compactMode={appData.compactMode || false} setCompactMode={appData.setCompactMode || ((val) => {})}
setCompactMode={appData.setCompactMode || ((val) => {})} />
/>
<div class="logos-container main-content"> <main class="logos-container">
{#if appData.viewMode === "grid"} {#if appData.viewMode === "grid"}
<Grid <Grid
logos={appData.displayLogos || []} logos={appData.displayLogos || []}
allLogos={appData.logos || []} allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})} onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})} onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})} setSearchQuery={appData.setSearchQuery || ((q) => {})}
theme={appData.effectiveTheme || "light"} theme={appData.effectiveTheme || "light"}
/> />
{:else} {:else}
<List <List
logos={appData.displayLogos || []} logos={appData.displayLogos || []}
allLogos={appData.logos || []} allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})} onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})} onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})} setSearchQuery={appData.setSearchQuery || ((q) => {})}
/> />
{/if} {/if}
</div> </main>
<!-- Footer --> <Footer />
<footer>
<div class="footer-flex">
<span class="footer-left">shadoll Logo Gallery</span>
<span class="footer-center">All logos are property of their respective owners.</span>
<a
href="https://github.com/shadoll/sLogos"
target="_blank"
rel="noopener noreferrer"
class="footer-github"
>
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="#ccc"
style="margin-right:0.3em;"
><path
d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
/></svg>
</a>
</div>
</footer>
</div>
{:else} {:else}
<div class="loading"> <div class="loading">
<p>Loading...</p> <p>Loading...</p>
@@ -205,18 +182,10 @@
{/if} {/if}
<style> <style>
.home-container {
width: 100%;
}
.logos-container { .logos-container {
padding: 1rem; padding: 1rem;
} }
.main-content {
flex: 1 0 auto;
}
.loading { .loading {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -225,53 +194,4 @@
font-size: 1.5rem; font-size: 1.5rem;
color: var(--color-text); color: var(--color-text);
} }
footer {
padding: 1.5rem;
background: var(--color-background);
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
font-size: 0.9rem;
}
.footer-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1em;
}
.footer-left {
flex: 1;
text-align: left;
}
.footer-center {
flex: 2;
text-align: left;
}
.footer-github {
flex: 0;
margin-left: 1em;
display: inline-flex;
align-items: center;
}
@media (max-width: 700px) {
.footer-flex {
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
}
.footer-left, .footer-center {
text-align: left;
width: 100%;
}
.footer-github {
margin-left: 0;
margin-top: 0.5em;
}
}
</style> </style>

40
src/pages/Preview.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { push, pop } from 'svelte-spa-router'; import { push, pop } from 'svelte-spa-router';
import PreviewComponent from '../components/Preview.svelte'; import PreviewComponent from '../components/Preview.svelte';
import Footer from '../components/Footer.svelte';
import { getDefaultLogoColor } from '../utils/colorTheme.js'; import { getDefaultLogoColor } from '../utils/colorTheme.js';
// Get preview ID from URL parameter // Get preview ID from URL parameter
@@ -71,6 +72,9 @@
// Initialize theme // Initialize theme
initTheme(); initTheme();
// Ensure page starts at the top
window.scrollTo(0, 0);
// First try to get logos from window.appData if available // First try to get logos from window.appData if available
if (window.appData && window.appData.logos && window.appData.logos.length > 0) { if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
console.log("Preview page: Using logos from window.appData:", window.appData.logos.length); console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
@@ -122,16 +126,16 @@
</script> </script>
{#if logo} {#if logo}
<div class="preview-page"> <header class="back-button-container">
<div class="back-button-container"> <button class="back-button" on:click={goBack}>
<button class="back-button" on:click={goBack}> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 12H5M12 19l-7-7 7-7"></path>
<path d="M19 12H5M12 19l-7-7 7-7"></path> </svg>
</svg> Back to Gallery
Back to Gallery </button>
</button> </header>
</div>
<main class="preview-content">
<PreviewComponent <PreviewComponent
show={true} show={true}
{logo} {logo}
@@ -139,7 +143,9 @@
{onDownload} {onDownload}
on:close={handleClose} on:close={handleClose}
/> />
</div> </main>
<Footer />
{:else} {:else}
<div class="loading-container"> <div class="loading-container">
<p>Loading logo...</p> <p>Loading logo...</p>
@@ -147,11 +153,7 @@
{/if} {/if}
<style> <style>
.preview-page { /* Page level styles applied to body in global.css */
width: 100%;
min-height: 100vh;
position: relative;
}
.back-button-container { .back-button-container {
position: fixed; position: fixed;
@@ -188,4 +190,12 @@
font-size: 1.2rem; font-size: 1.2rem;
color: var(--color-text, #222); color: var(--color-text, #222);
} }
.preview-content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Footer styles now come from the Footer component */
</style> </style>

8
src/router.js Normal file
View File

@@ -0,0 +1,8 @@
import Home from './pages/Home.svelte';
import Preview from './pages/Preview.svelte';
// Define all routes for the application
export const routes = {
'/': Home,
'/preview/:id': Preview
};