ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-20 22:24:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix responsive (#135)

Browse Source
This commit is contained in:
Doh
2025-05-20 22:12:31 -04:00
committed by GitHub
parent 91ffe46863
commit ac71c94d53
12 changed files with 98 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/docker-publish.yml vendored
View File

@@ -53,6 +53,7 @@ jobs:
tags: |
${{ steps.check-version.outputs.EXISTS == 'false' && format('dohsimpson/habittrove:v{0}', steps.package-version.outputs.VERSION) || '' }}
dohsimpson/habittrove:demo
dohsimpson/habittrove:latest
deploy-demo:
runs-on: ubuntu-latest

8
CHANGELOG.md
View File

@@ -1,5 +1,13 @@
# Changelog
## Version 0.2.13
### Fixed
* fix responsive design on mobile (#134)
* fix translation (#132)
* fix latest docker tag auto build (#131)
## Version 0.2.12
### Added

8
app/settings/page.tsx
View File

@@ -35,7 +35,7 @@ export default function SettingsPage() {
return (
<>
<div className="container mx-auto px-4 py-8">
<div>
<h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
<Card className="mb-6">
<CardHeader>
@@ -104,7 +104,7 @@ export default function SettingsPage() {
system: { ...settings.system, timezone: e.target.value }
})
}
className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
>
{Intl.supportedValuesOf('timeZone').map((tz) => (
<option key={tz} value={tz}>
@@ -132,7 +132,7 @@ export default function SettingsPage() {
system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
})
}
className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
>
{([
['sunday', 0],
@@ -215,7 +215,7 @@ export default function SettingsPage() {
variant: 'default',
});
}}
className={`w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
className={`w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
>
{/* Add more languages as needed */}
<option value="en">English</option>

6
components/CoinsManager.tsx
View File

@@ -101,12 +101,12 @@ export default function CoinsManager() {
}
return (
<div className="container mx-auto px-4 py-8">
<div>
<div className="flex items-center justify-between mb-6">
<h1 className="text-3xl font-bold mr-6">{t('title')}</h1>
<h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
{currentUser?.isAdmin && (
<select
className="border rounded p-2"
className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
value={selectedUser}
onChange={(e) => setSelectedUser(e.target.value)}
>

4
components/Dashboard.tsx
View File

@@ -19,9 +19,9 @@ export default function Dashboard() {
const wishlistItems = wishlist.items
return (
<div className="container mx-auto px-4 py-8">
<div>
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">{t('title')}</h1>
<h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<CoinBalance coinBalance={balance} />

4
components/HabitCalendar.tsx
View File

@@ -43,8 +43,8 @@ export default function HabitCalendar() {
}, [completedHabitsMap, settings.system.timezone])
return (
<div className="container mx-auto px-4 py-6">
<h1 className="text-2xl font-semibold mb-6">{t('title')}</h1>
<div>
<h1 className="text-xl xs:text-3xl font-semibold mb-6">{t('title')}</h1>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card>
<CardHeader>

4
components/HabitList.tsx
View File

@@ -124,9 +124,9 @@ export default function HabitList() {
return (
<div className="container mx-auto px-4 py-8">
<div>
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">
<h1 className="text-xl xs:text-3xl font-bold">
{t(isTasksView ? 'myTasks' : 'myHabits')}
</h1>
<span>

4
components/Layout.tsx
View File

@@ -1,3 +1,4 @@
import { ResponsiveContainer } from 'recharts'
import ClientWrapper from './ClientWrapper'
import Header from './Header'
import Navigation from './Navigation'
@@ -10,9 +11,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<Navigation viewPort='main' />
<div className="flex-1 flex flex-col">
<main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
{/* responsive container (optimized for mobile) */}
<div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
<ClientWrapper>
{children}
</ClientWrapper>
</div>
</main>
<Navigation viewPort='mobile' />
</div>

4
components/WishlistManager.tsx
View File

@@ -83,9 +83,9 @@ export default function WishlistManager() {
}
return (
<div className="container mx-auto px-4 py-8">
<div>
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">{t('title')}</h1>
<h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
<Button onClick={() => setIsModalOpen(true)}>
<Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')}
</Button>

2
messages/de.json
View File

@@ -37,7 +37,7 @@
"dailyHabitsTitle": "Tägliche Gewohnheiten",
"noHabitsDueTodayMessage": "Heute keine Gewohnheiten fällig. Fügen Sie Gewohnheiten hinzu, um zu beginnen!",
"wishlistGoalsTitle": "Wunschlisten-Ziele",
"redeemableBadgleLabel": "{count}/{total} einlösbar",
"redeemableBadgeLabel": "{count}/{total} einlösbar",
"noWishlistItemsMessage": "Noch keine Elemente auf der Wunschliste. Fügen Sie Ziele hinzu, auf die Sie hinarbeiten können!",
"readyToRedeemMessage": "Bereit zum Einlösen!",
"coinsToGoMessage": "Noch {amount} Münzen benötigt",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "habittrove",
"version": "0.2.12",
"version": "0.2.13",
"private": true,
"scripts": {
"dev": "next dev --turbopack",

11
tailwind.config.ts
View File

@@ -8,6 +8,17 @@ export default {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
screens: {
'3xs': '320px',
'2xs': '375px',
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1920px'
},
extend: {
keyframes: {
celebrate: {