github-personal/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-08-28 11:33:29 +00:00
Code Issues 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
src/pages/Home.svelte
+42 -122
View File
@@ -3,6 +3,7 @@
import Grid from "../components/Grid.svelte";
import List from "../components/List.svelte";
import Header from "../components/Header.svelte";
import Footer from "../components/Footer.svelte";
// Use the app's global data without reloading
let appData = {};
@@ -131,73 +132,49 @@
</script>
{#if initialized}
<div class="home-container">
<Header
logos={appData.logos || []}
displayLogos={appData.displayLogos || []}
theme={appData.theme || "light"}
setTheme={appData.setTheme || ((t) => {})}
viewMode={appData.viewMode || "grid"}
setGridView={appData.setGridView || (() => {})}
setListView={appData.setListView || (() => {})}
searchQuery={appData.searchQuery || ""}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
allTags={appData.allTags || []}
selectedTags={appData.selectedTags || []}
tagDropdownOpen={appData.tagDropdownOpen || false}
toggleDropdown={appData.toggleDropdown || (() => {})}
addTag={appData.addTag || (() => {})}
removeTag={appData.removeTag || (() => {})}
getTagObj={appData.getTagObj || ((t) => ({text: t}))}
compactMode={appData.compactMode || false}
setCompactMode={appData.setCompactMode || ((val) => {})}
/>
<Header
logos={appData.logos || []}
displayLogos={appData.displayLogos || []}
theme={appData.theme || "light"}
setTheme={appData.setTheme || ((t) => {})}
viewMode={appData.viewMode || "grid"}
setGridView={appData.setGridView || (() => {})}
setListView={appData.setListView || (() => {})}
searchQuery={appData.searchQuery || ""}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
allTags={appData.allTags || []}
selectedTags={appData.selectedTags || []}
tagDropdownOpen={appData.tagDropdownOpen || false}
toggleDropdown={appData.toggleDropdown || (() => {})}
addTag={appData.addTag || (() => {})}
removeTag={appData.removeTag || (() => {})}
getTagObj={appData.getTagObj || ((t) => ({text: t}))}
compactMode={appData.compactMode || false}
setCompactMode={appData.setCompactMode || ((val) => {})}
/>
<div class="logos-container main-content">
{#if appData.viewMode === "grid"}
<Grid
logos={appData.displayLogos || []}
allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
theme={appData.effectiveTheme || "light"}
/>
{:else}
<List
logos={appData.displayLogos || []}
allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
/>
{/if}
</div>
<main class="logos-container">
{#if appData.viewMode === "grid"}
<Grid
logos={appData.displayLogos || []}
allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
theme={appData.effectiveTheme || "light"}
/>
{:else}
<List
logos={appData.displayLogos || []}
allLogos={appData.logos || []}
onCopy={appData.onCopy || ((p) => {})}
onDownload={appData.onDownload || ((p, n) => {})}
setSearchQuery={appData.setSearchQuery || ((q) => {})}
/>
{/if}
</main>
<!-- 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>
<Footer />
{:else}
<div class="loading">
<p>Loading...</p>
@@ -205,18 +182,10 @@
{/if}
<style>
.home-container {
width: 100%;
}
.logos-container {
padding: 1rem;
}
.main-content {
flex: 1 0 auto;
}
.loading {
display: flex;
justify-content: center;
@@ -225,53 +194,4 @@
font-size: 1.5rem;
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>
src/pages/Preview.svelte
+25 -15
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { push, pop } from 'svelte-spa-router';
import PreviewComponent from '../components/Preview.svelte';
import Footer from '../components/Footer.svelte';
import { getDefaultLogoColor } from '../utils/colorTheme.js';
// Get preview ID from URL parameter
@@ -71,6 +72,9 @@
// Initialize theme
initTheme();
// Ensure page starts at the top
window.scrollTo(0, 0);
// First try to get logos from window.appData if available
if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
@@ -122,16 +126,16 @@
</script>
{#if logo}
<div class="preview-page">
<div class="back-button-container">
<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">
<path d="M19 12H5M12 19l-7-7 7-7"></path>
</svg>
Back to Gallery
</button>
</div>
<header class="back-button-container">
<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">
<path d="M19 12H5M12 19l-7-7 7-7"></path>
</svg>
Back to Gallery
</button>
</header>
<main class="preview-content">
<PreviewComponent
show={true}
{logo}
@@ -139,7 +143,9 @@
{onDownload}
on:close={handleClose}
/>
</div>
</main>
<Footer />
{:else}
<div class="loading-container">
<p>Loading logo...</p>
@@ -147,11 +153,7 @@
{/if}
<style>
.preview-page {
width: 100%;
min-height: 100vh;
position: relative;
}
/* Page level styles applied to body in global.css */
.back-button-container {
position: fixed;
@@ -188,4 +190,12 @@
font-size: 1.2rem;
color: var(--color-text, #222);
}
.preview-content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Footer styles now come from the Footer component */
</style>