Admin/audiobook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add responsive styling and mobile support

Browse Source 
- Applied Tailwind CSS responsive classes across all components
- Implemented mobile-first design approach with breakpoints (sm, md, lg)
- Added touch-friendly interactions with min-h-[44px] touch targets
- Enhanced App.tsx with responsive padding, headings, and alerts
- Updated TextInputSection with responsive textarea and full-width mobile button
- Improved VoiceAssignmentSection with flexible layouts and mobile-optimized controls
- Enhanced AudioPlayerSection with responsive sizing and touch support
- Added custom CSS for range slider with larger thumb for mobile
- Improved select dropdowns with visible arrows and proper padding
- Added touch-manipulation class to prevent double-tap zoom
- Added active states for better mobile feedback
- Updated index.html with proper title and meta description
- Created RESPONSIVE_IMPROVEMENTS.md documentation

Requirements: 12.1, 12.2, 12.3, 12.4
This commit is contained in:
Paul Bailey
2025-12-09 09:34:23 +00:00
parent e5bd7dcd74
commit 50b0ef792a
9 changed files with 224 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/VoiceAssignmentSection.tsx
View File

@@ -73,22 +73,22 @@ export default function VoiceAssignmentSection({
const isGenerateDisabled = !allRolesAssigned || isGenerating;
return (
<div className="w-full max-w-4xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Assign voices to roles</h2>
<div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Assign voices to roles</h2>
{/* Role-to-Voice Mapping Section */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Voice Assignments</h3>
<div className="space-y-4">
<div className="mb-6 sm:mb-8">
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Voice Assignments</h3>
<div className="space-y-3 sm:space-y-4">
{roles.map((role) => (
<div key={role.id} className="flex items-center gap-4">
<label className="w-40 font-medium text-gray-700">
<div key={role.id} className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<label className="font-medium text-gray-700 text-sm sm:text-base sm:w-40">
{role.label}:
</label>
<select
value={voiceAssignments.get(role.id) || ''}
onChange={(e) => handleVoiceSelect(role.id, e.target.value)}
className="flex-1 p-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
className="flex-1 p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
>
<option value="">Select a voice...</option>
{KOKORO_VOICES.map((voice) => (
@@ -104,11 +104,11 @@ export default function VoiceAssignmentSection({
{/* Language Selector */}
<div className="mb-6">
<h3 className="text-xl font-semibold mb-4">Language</h3>
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Language</h3>
<select
value={language}
onChange={handleLanguageSelect}
className="w-full p-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
className="w-full p-3 sm:p-2 min-h-[44px] border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-sm sm:text-base touch-manipulation"
>
{LANGUAGES.map((lang) => (
<option key={lang.code} value={lang.code}>
@@ -119,10 +119,10 @@ export default function VoiceAssignmentSection({
</div>
{/* Speed Slider */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Playback Speed</h3>
<div className="flex items-center gap-4">
<span className="text-sm text-gray-600 w-12">0.5x</span>
<div className="mb-6 sm:mb-8">
<h3 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Playback Speed</h3>
<div className="flex items-center gap-2 sm:gap-4">
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">0.5x</span>
<input
type="range"
min="0.5"
@@ -130,10 +130,10 @@ export default function VoiceAssignmentSection({
step="0.1"
value={speed}
onChange={handleSpeedChange}
className="flex-1"
className="flex-1 h-8 sm:h-auto touch-manipulation"
/>
<span className="text-sm text-gray-600 w-12">1.5x</span>
<span className="font-semibold text-gray-800 w-16 text-center">
<span className="text-xs sm:text-sm text-gray-600 w-10 sm:w-12">1.5x</span>
<span className="font-semibold text-gray-800 w-12 sm:w-16 text-center text-sm sm:text-base">
{speed.toFixed(1)}x
</span>
</div>
@@ -144,10 +144,10 @@ export default function VoiceAssignmentSection({
<button
onClick={onGenerate}
disabled={isGenerateDisabled}
className={`px-8 py-3 rounded-lg font-semibold text-white transition-colors ${
className={`w-full sm:w-auto px-8 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
isGenerateDisabled
? 'bg-gray-400 cursor-not-allowed'
: 'bg-green-600 hover:bg-green-700 cursor-pointer'
: 'bg-green-600 hover:bg-green-700 active:bg-green-800 cursor-pointer'
}`}
>
{isGenerating ? 'Generating...' : 'Generate Audiobook'}
@@ -156,7 +156,7 @@ export default function VoiceAssignmentSection({
{/* Validation Message */}
{!allRolesAssigned && !isGenerating && (
<div className="mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-center">
<div className="mt-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded text-center text-sm sm:text-base">
Please assign voices to all roles before generating the audiobook.
</div>
)}