root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Moved buttons for more space

Browse Source
This commit is contained in:
root
2025-11-25 17:59:09 +01:00
parent 386393e507
commit 9717ab9575
2 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/App.vue
View File

@@ -7,46 +7,46 @@
<h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 tracking-tight mb-2">Spritesheet generator</h1>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
</div>
<dark-mode-toggle />
<nav class="flex flex-wrap items-center justify-center gap-2">
<a
href="https://gitea.adhd.sh/root/spritesheet-generator"
target="_blank"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="source-link"
>
<i class="fab fa-github"></i>
<span class="font-medium">Source</span>
</a>
<a
href="https://discord.gg/JTev3nzeDa"
target="_blank"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="discord-link"
>
<i class="fab fa-discord"></i>
<span class="font-medium">Discord</span>
</a>
<a
href="#"
@click.prevent="openHelpModal"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="help-link"
>
<i class="fas fa-question-circle"></i>
<span class="font-medium">Help</span>
</a>
<a
href="#"
@click.prevent="openFeedbackModal"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="feedback-link"
>
<i class="fas fa-comment-dots"></i>
<span class="font-medium">Feedback</span>
</a>
<dark-mode-toggle />
</nav>
</div>
<nav class="flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3">
<a
href="https://gitea.adhd.sh/root/spritesheet-generator"
target="_blank"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="source-link"
>
<i class="fab fa-github"></i>
<span class="font-medium">Source</span>
</a>
<a
href="https://discord.gg/JTev3nzeDa"
target="_blank"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="discord-link"
>
<i class="fab fa-discord"></i>
<span class="font-medium">Discord</span>
</a>
<a
href="#"
@click.prevent="openHelpModal"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="help-link"
>
<i class="fas fa-question-circle"></i>
<span class="font-medium">Help</span>
</a>
<a
href="#"
@click.prevent="openFeedbackModal"
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
data-rybbit-event="feedback-link"
>
<i class="fas fa-comment-dots"></i>
<span class="font-medium">Feedback</span>
</a>
</nav>
</header>
<main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">

7
src/components/utilities/DarkModeToggle.vue
View File

@@ -1,14 +1,11 @@
<template>
<button
@click="settingsStore.toggleDarkMode()"
class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
:class="settingsStore.darkMode ? 'bg-indigo-600 text-yellow-300' : 'bg-blue-500 text-white'"
class="inline-flex items-center gap-2 px-8 py-3 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
aria-label="Toggle dark mode"
data-rybbit-event="toggle-dark-mode"
>
<div class="relative w-6 h-6 flex items-center justify-center">
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
</div>
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
</button>
</template>