Skip to content

improved mobile functionality #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dinoxh merged 1 commit into from
May 14, 2025
Merged

improved mobile functionality #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions my-app/src/pages/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,13 @@ function App({ model }) {
<div className="flex-1 h-full flex flex-col ">


<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
<div className="flex items-center">
<div className="flex items-center bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
<SearchbarPresenter model={model}/>
</div>
</div>


<div className="flex-auto border bg-[#121212] relative">
<div
className="flex sm:flex-auto h-screen w-screen sm:w-full bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
<ListViewPresenter model={model}/>
</div>

Expand Down
36 changes: 22 additions & 14 deletions my-app/src/views/Components/CoursePagePopup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ function CoursePagePopup({
if (!isOpen || !course) return null;
return (
<div
className={`fixed backdrop-blur-lg inset-0 flex justify-center z-50 ${sidebarIsOpen ? 'pl-[400px]' : 'w-full'
}`}
className={`fixed backdrop-blur-lg inset-0 flex justify-center z-50
${sidebarIsOpen ? 'sm:pl-[400px] flex flex-auto h-screen w-screen ' : 'w-full'}`}
onClick={onClose}
>
<div
Expand All @@ -116,7 +116,7 @@ function CoursePagePopup({
setShowOverlay(true);
}}
>
<div className="flex-1">
<div className="flex-1 overflow-auto">
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-8 font-sans">
{/* Course Title Section */}
<div>
Expand Down Expand Up @@ -154,48 +154,56 @@ function CoursePagePopup({
</svg>
</button>

<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
({course.credits} Credits)
</span>
</h2>
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
</div>

{/* Course Info Section */}
<div className="flex flex-col space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
<div className="sm:flex-col inline-flex flex-row flex-wrap space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
{/* Top Row - Basic Info */}
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col space-y-2">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-violet-800">Academic Level:</span>
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
<span
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
{course.academicLevel || 'Not specified'}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-violet-800">Credits:</span>
<span
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
{course.credits || 'Not specified'}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-violet-800">Department:</span>
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
<span
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
{course.department || 'Not specified'}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-violet-800">Language:</span>
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
<span
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
{handlePeriodsAndLanguages(course?.language) || 'Languages not specified'}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-violet-800">Course Periods:</span>
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
<span
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
{handlePeriodsAndLanguages(course?.periods) || 'Periods not specified'}
</span>
</div>

</div>

<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-4">
<div className="flex flex-col bg-violet-50 p-4 rounded-lg space-y-4">
<div className="flex flex-wrap flex-col space-y-4">
<div className="flex flex-col flex-wrap bg-violet-50 p-4 rounded-lg space-y-4">
<div className="flex flex-col">
<span className="text-sm font-medium text-violet-800 mb-1">Overall Rating:</span>
<div className="flex items-center gap-2">
Expand Down
10 changes: 5 additions & 5 deletions my-app/src/views/Components/FavouriteDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ const FavouritesDropdown = observer((props) => {

return (
<div>
<div className="fixed mt-3 w-[32rem] right-4 bg-indigo-300/75 backdrop-blur-lg border border-violet-500 rounded-lg z-20 shadow-lg flex flex-col max-h-[calc(100vh-8rem)]">
<div className="sm:fixed absolute mt-3 sm:w-[32rem] sm:right-4 sm:-translate-x-0 bg-indigo-300/75 backdrop-blur-lg border border-violet-500 rounded-lg z-20 shadow-lg flex flex-col max-h-[calc(100vh-8rem)]">
{/* Fixed Header */}
<div className="sticky top-0 p-3 rounded-t-md bg-violet-500 flex justify-between items-center w-full border-b border-solid border-violet-600 font-semibold">
<p className="text-white w-1/4">Code</p>
<p className="text-white w-1/2">Code</p>
<p className="text-white w-1/2">Name</p>
<p className="text-white w-1/4 text-center">Credits</p>
<div className="w-8"></div>
Expand All @@ -44,9 +44,9 @@ const FavouritesDropdown = observer((props) => {

}}
key={course.code}
className="p-3 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
className="p-3 gap-1 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
>
<p className="text-violet-700 font-semibold w-1/4">{course.code}</p>
<p className="text-violet-700 font-semibold w-1/2">{course.code}</p>
<p className="text-slate-900 font-semibold w-1/2">{course.name}</p>
<p className="text-slate-900 font-semibold w-1/4 text-center">{course.credits} hp</p>
<button
Expand All @@ -69,7 +69,7 @@ const FavouritesDropdown = observer((props) => {

{/* Fixed Footer */}
<div className="sticky bottom-0 border-t border-solid border-violet-400 bg-indigo-300/75 backdrop-blur-lg">
<div className='p-3 flex justify-between items-center bg-violet-400/30'>
<div className='sm:p-3 p-0 flex items-center bg-violet-400/30'>
<p className='text-slate-900 font-bold w-1/2'>Total:</p>
<p className='text-slate-900 font-bold w-1/4'></p>
<p className='text-slate-900 font-bold w-1/4 text-center'>{props.totalCredits} hp</p>
Expand Down
14 changes: 7 additions & 7 deletions my-app/src/views/ListView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,10 @@ function ListView(props) {
}

return (
<div className="relative bg-gray-100 text-black p-2 flex flex-col gap-3 h-screen">
{isLoading ? (
<div className="flex justify-center items-center h-full">
<Quantum size="400" speed="10" color="#000061" />
<div
className="overflow-hidden relative w-full h-screen bg-gray-100 p-4 sm:p-3 text-black flex flex-col gap-1 sm:gap-2 overflow-y-auto"> {isLoading ? (
<div className="flex justify-center items-center h-full ">
<Quantum size="400" speed="10" color="#000061" />
</div>
) : (
<div className="overflow-y-auto h-full" id="scrollableDiv" ref={props.scrollContainerRef}>
Expand All @@ -129,9 +129,9 @@ function ListView(props) {
<select
value={props.sortBy}
onChange={(e) => props.setSortBy(e.target.value)}
className="bg-white shadow-md text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
className=" w-[90px] sm:w-full bg-white overflow-hidden shadow-md text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
>
<option value="relevance">Sort by Relevance</option>
<option value ="relevance">Sort by Relevance</option>
<option value="name">Sort by Name</option>
<option value="credits">Sort by Credits</option>
<option value="avg_rating">Sort by Overall Rating</option>
Expand All @@ -141,7 +141,7 @@ function ListView(props) {

<button
onClick={() => props.setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc')}
className="bg-white shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
className="bg-white flex flex-wrap shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
aria-label={`Sort ${props.sortDirection === 'asc' ? 'ascending' : 'descending'}`}
>
{props.sortDirection === 'desc' ? (
Expand Down
35 changes: 20 additions & 15 deletions my-app/src/views/SearchbarView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,27 @@ function SearchbarView(props) {
};

return (
<div className="w-full px-6 py-6 flex items-center justify-between" onClick={handleClickOutside}>
<div
className=" w-full sm:px-6 sm:py-6 pt-4 pb-4 sm:flex p-2 items-center sm:justify-between"
onClick={handleClickOutside}>
<a href="https://course-compass.se/"
className="flex items-center h-[90px] w-auto">
className="flex justify-center sm:h-[90px] h-[120px] w-auto ">
<img src={project_logo} className="h-[90px] w-auto" alt="KTH Logo" />
</a>

<div className="flex justify-center sm:pr-20">
<input
type="text"
placeholder="What course are you looking for?"
value={props.searchQuery} // Changed from searchQuery to props.searchQuery
placeholder="Search for courses..."
value={props.searchQuery}
onChange={(e) => handleSearch(e.target.value)}
onClick={(e) => e.stopPropagation()}
className="w-[400px] h-[44px] pl-14 pr-4 bg-white text-black rounded-full"
className="sm:w-[400px] max-w-full h-[44px] pl-4 pr-4 bg-white text-black rounded-full "
/>
</div>

<div className="flex gap-6 items-center">
<div className=" flex sm:gap-4 gap-1 pt-4 sm:pr-0">
{props.share}

<a
className="flex items-center justify-center w-[120px] h-[44px] bg-[#003399] text-white rounded-full border border-[#000061] cursor-pointer hover:bg-[#001a4d] transition-all duration-200"
href = "https://inferencekth.github.io/Course-Compass/"
Expand Down Expand Up @@ -96,7 +99,7 @@ function SearchbarView(props) {
)}
</div>

<div className="flex items-center cursor-pointer">
<div className=" flex items-center cursor-pointer">
{user ? (
<button
onClick={handleSignOut}
Expand All @@ -112,15 +115,17 @@ function SearchbarView(props) {

)}

{user && (
<img
src={user.photoURL}
alt="Profile"
className="w-[44px] h-[44px] rounded-full border border-[#000061] ml-2"
/>
)}

</div>

{user && (
<img
src={user.photoURL}
alt="Profile"
className="w-[44px] h-[44px] rounded-full border border-[#000061]"
/>
)}

</div>
</div>
);
Expand Down