rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Improve Activity Navigation Layout and Responsiveness

Browse source
This commit is contained in:
swve 2025-02-27 15:06:08 +01:00
parent e070e3da3a
commit df12731026
1 changed files with 96 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

86
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -3,7 +3,7 @@ import Link from 'next/link'
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
import Canva from '@components/Objects/Activities/DynamicCanva/DynamicCanva'
import VideoActivity from '@components/Objects/Activities/Video/Video'
import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree } from 'lucide-react'
import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree, X } from 'lucide-react'
import { markActivityAsComplete } from '@services/courses/activity'
import DocumentPdfActivity from '@components/Objects/Activities/DocumentPdf/DocumentPdf'
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
@ -476,7 +476,7 @@ function ActivityChapterDropdown(props: {
onClick={() => setIsOpen(false)}
className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100"
>
<ChevronDown size={18} />
<X size={18} />
</button>
</div>
@ -624,55 +624,105 @@ function ActivityNavigation(props: {
// Navigation buttons component - reused for both top and bottom
const NavigationButtons = ({ isFloating = false }) => (
<div className={`flex justify-between items-center w-full ${isFloating ? 'space-x-1.5' : 'space-x-2'}`}>
<div className={`${isFloating ? 'flex justify-between' : 'grid grid-cols-3'} items-center w-full`}>
{isFloating ? (
// Floating navigation - original flex layout
<>
<button
onClick={() => navigateToActivity(prevActivity)}
className={`flex items-center ${isFloating ? 'space-x-1.5 p-2' : 'space-x-1.5 px-3.5 py-2'} rounded-md transition-all duration-200 ${
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 ${
prevActivity
? `${isFloating ? '' : 'bg-white nice-shadow'} text-gray-700`
: `${isFloating ? 'opacity-50' : 'bg-gray-100'} text-gray-400 cursor-not-allowed`
? 'text-gray-700'
: 'opacity-50 text-gray-400 cursor-not-allowed'
}`}
disabled={!prevActivity}
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
>
<ChevronLeft size={isFloating ? 20 : 16} className={isFloating ? 'text-gray-800' : ''} />
<ChevronLeft size={20} className="text-gray-800 flex-shrink-0" />
<div className="flex flex-col items-start">
<span className="text-xs text-gray-500">Previous</span>
<span className="text-sm capitalize truncate max-w-[100px] sm:max-w-[120px] font-semibold">
<span className="text-sm capitalize font-semibold text-left">
{prevActivity ? prevActivity.name : 'No previous activity'}
</span>
</div>
</button>
<div className={`text-sm text-gray-500 ${isFloating ? 'hidden' : 'hidden sm:block'}`}>
{currentIndex + 1} of {allActivities.length}
</div>
<button
onClick={() => navigateToActivity(nextActivity)}
className={`flex items-center ${isFloating ? 'space-x-1.5 p-2' : 'space-x-1.5 px-3.5 py-2'} rounded-md transition-all duration-200 ${
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 ${
nextActivity
? `${isFloating ? '' : 'bg-white nice-shadow'} text-gray-700`
: `${isFloating ? 'opacity-50' : 'bg-gray-100'} text-gray-400 cursor-not-allowed`
? 'text-gray-700'
: 'opacity-50 text-gray-400 cursor-not-allowed'
}`}
disabled={!nextActivity}
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
>
<div className="flex flex-col items-end">
<span className="text-xs text-gray-500">Next</span>
<span className="text-sm capitalize truncate max-w-[100px] sm:max-w-[120px] font-semibold">
<span className="text-sm capitalize font-semibold text-right">
{nextActivity ? nextActivity.name : 'No next activity'}
</span>
</div>
<ChevronRight size={isFloating ? 20 : 16} className={isFloating ? 'text-gray-800' : ''} />
<ChevronRight size={20} className="text-gray-800 flex-shrink-0" />
</button>
</>
) : (
// Regular navigation - grid layout with centered counter
<>
<div className="justify-self-start">
<button
onClick={() => navigateToActivity(prevActivity)}
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 ${
prevActivity
? 'bg-white nice-shadow text-gray-700'
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
}`}
disabled={!prevActivity}
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
>
<ChevronLeft size={16} className="flex-shrink-0" />
<div className="flex flex-col items-start">
<span className="text-xs text-gray-500">Previous</span>
<span className="text-sm capitalize font-semibold text-left">
{prevActivity ? prevActivity.name : 'No previous activity'}
</span>
</div>
</button>
</div>
<div className="text-sm text-gray-500 justify-self-center">
{currentIndex + 1} of {allActivities.length}
</div>
<div className="justify-self-end">
<button
onClick={() => navigateToActivity(nextActivity)}
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 ${
nextActivity
? 'bg-white nice-shadow text-gray-700'
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
}`}
disabled={!nextActivity}
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
>
<div className="flex flex-col items-end">
<span className="text-xs text-gray-500">Next</span>
<span className="text-sm capitalize font-semibold text-right">
{nextActivity ? nextActivity.name : 'No next activity'}
</span>
</div>
<ChevronRight size={16} className="flex-shrink-0" />
</button>
</div>
</>
)}
</div>
);
return (
<>
{/* Bottom navigation (in-place) */}
<div ref={bottomNavRef} className="mt-6 mb-2 max-w-xl mx-auto">
<div ref={bottomNavRef} className="mt-6 mb-2 w-full">
<NavigationButtons isFloating={false} />
</div>