Skip to content

Commit 7acc78b

Browse files
DinoxhDinoxh
authored
improved mobile functionality (#141)
1 parent 9638545 commit 7acc78b

File tree

5 files changed

+57
-45
lines changed

5 files changed

+57
-45
lines changed

‎my-app/src/pages/App.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,13 @@ function App({ model }) {
4545
<div className="flex-1 h-full flex flex-col ">
4646

4747

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

5452

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

‎my-app/src/views/Components/CoursePagePopup.jsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ function CoursePagePopup({
105105
if (!isOpen || !course) return null;
106106
return (
107107
<div
108-
className={`fixed backdrop-blur-lg inset-0 flex justify-center z-50 ${sidebarIsOpen ? 'pl-[400px]' : 'w-full'
109-
}`}
108+
className={`fixed backdrop-blur-lg inset-0 flex justify-center z-50
109+
${sidebarIsOpen ? 'sm:pl-[400px] flex flex-auto h-screen w-screen ' : 'w-full'}`}
110110
onClick={onClose}
111111
>
112112
<div
@@ -116,7 +116,7 @@ function CoursePagePopup({
116116
setShowOverlay(true);
117117
}}
118118
>
119-
<div className="flex-1">
119+
<div className="flex-1 overflow-auto">
120120
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-8 font-sans">
121121
{/* Course Title Section */}
122122
<div>
@@ -154,48 +154,56 @@ function CoursePagePopup({
154154
</svg>
155155
</button>
156156

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

164161
{/* Course Info Section */}
165-
<div className="flex flex-col space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
162+
<div className="sm:flex-col inline-flex flex-row flex-wrap space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
166163
{/* Top Row - Basic Info */}
167-
<div className="grid grid-cols-2 gap-4">
164+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
168165
<div className="flex flex-col space-y-2">
169166
<div className="flex items-center gap-2">
170167
<span className="text-sm font-medium text-violet-800">Academic Level:</span>
171-
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
168+
<span
169+
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
172170
{course.academicLevel || 'Not specified'}
173171
</span>
174172
</div>
173+
<div className="flex items-center gap-2">
174+
<span className="text-sm font-medium text-violet-800">Credits:</span>
175+
<span
176+
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
177+
{course.credits || 'Not specified'}
178+
</span>
179+
</div>
175180
<div className="flex items-center gap-2">
176181
<span className="text-sm font-medium text-violet-800">Department:</span>
177-
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
182+
<span
183+
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
178184
{course.department || 'Not specified'}
179185
</span>
180186
</div>
181187
<div className="flex items-center gap-2">
182188
<span className="text-sm font-medium text-violet-800">Language:</span>
183-
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
189+
<span
190+
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
184191
{handlePeriodsAndLanguages(course?.language) || 'Languages not specified'}
185192
</span>
186193
</div>
187194
<div className="flex items-center gap-2">
188195
<span className="text-sm font-medium text-violet-800">Course Periods:</span>
189-
<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
196+
<span
197+
className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
190198
{handlePeriodsAndLanguages(course?.periods) || 'Periods not specified'}
191199
</span>
192200
</div>
193201

194202
</div>
195203

196204
<div className="flex flex-col space-y-4">
197-
<div className="flex flex-col space-y-4">
198-
<div className="flex flex-col bg-violet-50 p-4 rounded-lg space-y-4">
205+
<div className="flex flex-wrap flex-col space-y-4">
206+
<div className="flex flex-col flex-wrap bg-violet-50 p-4 rounded-lg space-y-4">
199207
<div className="flex flex-col">
200208
<span className="text-sm font-medium text-violet-800 mb-1">Overall Rating:</span>
201209
<div className="flex items-center gap-2">

‎my-app/src/views/Components/FavouriteDropdown.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ const FavouritesDropdown = observer((props) => {
2323

2424
return (
2525
<div>
26-
<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)]">
26+
<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)]">
2727
{/* Fixed Header */}
2828
<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">
29-
<p className="text-white w-1/4">Code</p>
29+
<p className="text-white w-1/2">Code</p>
3030
<p className="text-white w-1/2">Name</p>
3131
<p className="text-white w-1/4 text-center">Credits</p>
3232
<div className="w-8"></div>
@@ -44,9 +44,9 @@ const FavouritesDropdown = observer((props) => {
4444

4545
}}
4646
key={course.code}
47-
className="p-3 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
47+
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"
4848
>
49-
<p className="text-violet-700 font-semibold w-1/4">{course.code}</p>
49+
<p className="text-violet-700 font-semibold w-1/2">{course.code}</p>
5050
<p className="text-slate-900 font-semibold w-1/2">{course.name}</p>
5151
<p className="text-slate-900 font-semibold w-1/4 text-center">{course.credits} hp</p>
5252
<button
@@ -69,7 +69,7 @@ const FavouritesDropdown = observer((props) => {
6969

7070
{/* Fixed Footer */}
7171
<div className="sticky bottom-0 border-t border-solid border-violet-400 bg-indigo-300/75 backdrop-blur-lg">
72-
<div className='p-3 flex justify-between items-center bg-violet-400/30'>
72+
<div className='sm:p-3 p-0 flex items-center bg-violet-400/30'>
7373
<p className='text-slate-900 font-bold w-1/2'>Total:</p>
7474
<p className='text-slate-900 font-bold w-1/4'></p>
7575
<p className='text-slate-900 font-bold w-1/4 text-center'>{props.totalCredits} hp</p>

‎my-app/src/views/ListView.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@ function ListView(props) {
109109
}
110110

111111
return (
112-
<div className="relative bg-gray-100 text-black p-2 flex flex-col gap-3 h-screen">
113-
{isLoading ? (
114-
<div className="flex justify-center items-center h-full">
115-
<Quantum size="400" speed="10" color="#000061" />
112+
<div
113+
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 ? (
114+
<div className="flex justify-center items-center h-full ">
115+
<Quantum size="400" speed="10" color="#000061" />
116116
</div>
117117
) : (
118118
<div className="overflow-y-auto h-full" id="scrollableDiv" ref={props.scrollContainerRef}>
@@ -129,9 +129,9 @@ function ListView(props) {
129129
<select
130130
value={props.sortBy}
131131
onChange={(e) => props.setSortBy(e.target.value)}
132-
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"
132+
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"
133133
>
134-
<option value="relevance">Sort by Relevance</option>
134+
<option value ="relevance">Sort by Relevance</option>
135135
<option value="name">Sort by Name</option>
136136
<option value="credits">Sort by Credits</option>
137137
<option value="avg_rating">Sort by Overall Rating</option>
@@ -141,7 +141,7 @@ function ListView(props) {
141141

142142
<button
143143
onClick={() => props.setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc')}
144-
className="bg-white shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
144+
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"
145145
aria-label={`Sort ${props.sortDirection === 'asc' ? 'ascending' : 'descending'}`}
146146
>
147147
{props.sortDirection === 'desc' ? (

‎my-app/src/views/SearchbarView.jsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,24 +43,27 @@ export function SearchbarView(props) {
4343
};
4444

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

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

61-
<div className="flex gap-6 items-center">
65+
<div className=" flex sm:gap-4 gap-1 pt-4 sm:pr-0">
6266
{props.share}
63-
6467
<a
6568
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"
6669
href = "https://inferencekth.github.io/Course-Compass/"
@@ -95,7 +98,7 @@ export function SearchbarView(props) {
9598
)}
9699
</div>
97100

98-
<div className="flex items-center cursor-pointer">
101+
<div className=" flex items-center cursor-pointer">
99102
{user ? (
100103
<button
101104
onClick={handleSignOut}
@@ -111,15 +114,17 @@ export function SearchbarView(props) {
111114

112115
)}
113116

117+
{user && (
118+
<img
119+
src={user.photoURL}
120+
alt="Profile"
121+
className="w-[44px] h-[44px] rounded-full border border-[#000061] ml-2"
122+
/>
123+
)}
124+
114125
</div>
115126

116-
{user && (
117-
<img
118-
src={user.photoURL}
119-
alt="Profile"
120-
className="w-[44px] h-[44px] rounded-full border border-[#000061]"
121-
/>
122-
)}
127+
123128
</div>
124129
</div>
125130
);

0 commit comments

Comments
 (0)