fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix mobile tabs

Browse source
This commit is contained in:
fred 2025-08-07 11:57:11 -07:00
parent 2da4c0aa12
commit fdaf4cff1f
4 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/DemoModal.tsx
View file

@ -10,7 +10,7 @@ const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onClick={onClose}> <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
<div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}> <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
<div className="modal-msg"> <div className="modal-msg">
<p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p> <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>

2
frontend/src/components/Modal.tsx
View file

@ -10,7 +10,7 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onClick={onClose}> <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
<div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}> <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
<div className="modal-msg"> <div className="modal-msg">
<span aria-labelledby="message">{message}</span> <span aria-labelledby="message">{message}</span>

32
frontend/src/components/RecipeBookTabs.tsx
View file

@ -35,9 +35,9 @@ const RecipeBookTabs = () => {
const tabs = [ const tabs = [
{ id: '/', label: 'All Recipes', icon: '📚' }, { id: '/', label: 'Cookbook', icon: '📚' },
{ id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' }, { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' }, { id: '/add-recipe', label: 'Add', icon: '➕' },
{ id: '/about', label: 'About', icon: '🍽️' }, { id: '/about', label: 'About', icon: '🍽️' },
]; ];
@ -55,7 +55,7 @@ const RecipeBookTabs = () => {
key={tab.id} key={tab.id}
to={tab.id} to={tab.id}
className={` className={`
relative px-6 py-3 rounded-t-lg font-bold text-sm transform text-amber-800 relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
${isActive ${isActive
? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200' ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
: 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm' : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
@ -64,21 +64,23 @@ const RecipeBookTabs = () => {
${isActive ? '' : ''} ${isActive ? '' : ''}
`} `}
> >
<div className="flex items-center space-x-2"> <div className="flex items-center">
<span className="text-lg">{tab.icon}</span> <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
<span>{tab.label}</span> <span>{tab.label}</span>
</div> </div>
{isActive && ( {
<> isActive && (
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}> <>
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div> <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
</div> <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
<div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}> </div>
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div> <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
</div> <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
</> </div>
)} </>
)
}
</Link> </Link>
); );
})} })}

2
frontend/src/pages/RecipePage.tsx
View file

@ -100,7 +100,7 @@ function RecipePage() {
) : ( ) : (
<div className="recipe-card relative"> <div className="recipe-card relative">
<button onClick={openModal} className="ar-button bg-gray-200 text-white py-1 px-2 rounded hover:bg-gray-300 m-2 absolute top-0 right-0"> <button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-2 rounded hover:bg-amber-600 m-2 absolute top-0 right-0">
🗑️ 🗑️
</button> </button>
<div className="border-b-2 border-amber-300 pb-4 mb-6"> <div className="border-b-2 border-amber-300 pb-4 mb-6">