Skip to content

Commit 222319c

Browse files
aditya-samaladitya-samal
authored
Merge pull request #126 from Coding-Club-IITG/aditya
Mobile View
2 parents 02c4c83 + 9e8e918 commit 222319c

56 files changed

Lines changed: 3433 additions & 587 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
try {
2727
// var socket = io("https://ankitdas.co.in/");
2828
} catch (error) {
29-
console.log(error);
29+
// console.log(error);
3030
}
3131
</script>
3232
</body>

‎client/src/App.jsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@ const App = () => {
1919
const isLoggedIn = useSelector((state) => state.user.loggedIn);
2020
const dispatch = useDispatch();
2121

22+
// Detect if device is mobile
23+
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
24+
25+
useEffect(() => {
26+
const handleResize = () => {
27+
setIsMobile(window.innerWidth <= 768);
28+
};
29+
30+
window.addEventListener("resize", handleResize);
31+
return () => window.removeEventListener("resize", handleResize);
32+
}, []);
33+
2234
useEffect(() => {
2335
const params = new URLSearchParams(window.location.search);
2436
if (params.get("fresh")) {
@@ -50,16 +62,27 @@ const App = () => {
5062
}
5163
}, [isLoggedIn, initial]);
5264

53-
return window.screen.width >= 640 ? (
65+
return (
5466
<div className="App">
5567
<ToastContainer
56-
position="top-right"
68+
position={isMobile ? "bottom-center" : "top-right"}
5769
autoClose={1500}
5870
hideProgressBar={false}
5971
newestOnTop={false}
6072
closeOnClick
6173
rtl={false}
6274
theme="light"
75+
className="toast-container"
76+
style={
77+
isMobile
78+
? {
79+
bottom: "20px",
80+
left: "16px",
81+
right: "16px",
82+
width: "auto",
83+
}
84+
: {}
85+
}
6386
/>
6487
<Router>
6588
<Routes>
@@ -78,8 +101,6 @@ const App = () => {
78101
</Routes>
79102
</Router>
80103
</div>
81-
) : (
82-
<MobilePage></MobilePage> //for mobile view
83104
);
84105
};
85106

‎client/src/actions/filebrowser_actions.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,18 @@ export const RemoveFileFromFolder = (fileId) => ({
5959

6060
export const RefreshCurrentFolder = () => ({
6161
type: "REFRESH_CURRENT_FOLDER",
62-
payload: Date.now(),
62+
payload: Date.now(),
63+
});
64+
65+
export const PushFolderHistory = (folder) => ({
66+
type: "PUSH_FOLDER_HISTORY",
67+
payload: folder,
68+
});
69+
70+
export const PopFolderHistory = () => ({
71+
type: "POP_FOLDER_HISTORY",
72+
});
73+
74+
export const ClearFolderHistory = () => ({
75+
type: "CLEAR_FOLDER_HISTORY",
6376
});

‎client/src/api/Course.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const getUserCourses = async (courses) => {
1616
});
1717
return resp.data;
1818
} catch (err) {
19-
console.log("Error:", err.message);
19+
// console.log("Error:", err.message);
2020
}
2121
};
2222

‎client/src/api/File.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,17 @@ export const getThumbnail = async (fileId) => {
5151
const resp = await axios.post(`${serverRoot}/api/file/thumbnail`, {
5252
fileId: fileId,
5353
});
54-
console.log("Thumbnail Refreshed");
54+
// console.log("Thumbnail Refreshed");
5555
};
5656

5757
export const getFileDownloadLink = async (fileId) => {
58-
const response = await fetch( serverRoot + '/api/files/download',{
59-
method: 'POST',
60-
headers: {
61-
'Content-Type': 'application/json',
62-
},
63-
body: JSON.stringify({ url: fileId }),
64-
})
58+
const response = await fetch(serverRoot + "/api/files/download", {
59+
method: "POST",
60+
headers: {
61+
"Content-Type": "application/json",
62+
},
63+
body: JSON.stringify({ url: fileId }),
64+
});
6565

6666
if (!response.ok) {
6767
throw new Error(`Error fetching download link: ${response.statusText}`);
@@ -70,5 +70,3 @@ export const getFileDownloadLink = async (fileId) => {
7070
const data = await response.json();
7171
return data.downloadLink;
7272
};
73-
74-

‎client/src/components/Loader/index.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import "./styles.scss";
3+
4+
const Loader = ({ text = "Loading..." }) => {
5+
return (
6+
<div className="loader-container">
7+
<div className="loader-animation">
8+
<div className="jimu-primary-loading"></div>
9+
</div>
10+
<div className="loader-text">
11+
<p>{text}</p>
12+
</div>
13+
</div>
14+
);
15+
};
16+
17+
export default Loader;

‎client/src/components/Loader/styles.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.loader-container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 2rem;
7+
min-height: 150px;
8+
}
9+
10+
.loader-animation {
11+
margin-bottom: 1rem;
12+
}
13+
14+
.loader-text {
15+
text-align: center;
16+
17+
p {
18+
font-family: "Regular", sans-serif;
19+
font-size: 1rem;
20+
color: #666;
21+
margin: 0;
22+
}
23+
}
24+
25+
/* Import the loading animation styles */
26+
.jimu-primary-loading:before,
27+
.jimu-primary-loading:after {
28+
position: absolute;
29+
top: 0;
30+
content: "";
31+
}
32+
33+
.jimu-primary-loading:before {
34+
left: -19.992px;
35+
}
36+
37+
.jimu-primary-loading:after {
38+
left: 19.992px;
39+
-webkit-animation-delay: 0.32s !important;
40+
animation-delay: 0.32s !important;
41+
}
42+
43+
.jimu-primary-loading:before,
44+
.jimu-primary-loading:after,
45+
.jimu-primary-loading {
46+
background: #333;
47+
-webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
48+
animation: loading-keys-app-loading 0.8s infinite ease-in-out;
49+
width: 13.6px;
50+
height: 32px;
51+
}
52+
53+
.jimu-primary-loading {
54+
text-indent: -9999em;
55+
margin: auto;
56+
position: relative;
57+
right: 0;
58+
top: 0;
59+
-webkit-animation-delay: 0.16s !important;
60+
animation-delay: 0.16s !important;
61+
}
62+
63+
@-webkit-keyframes loading-keys-app-loading {
64+
0%,
65+
80%,
66+
100% {
67+
opacity: 0.75;
68+
box-shadow: 0 0 #3a3a3a;
69+
height: 32px;
70+
}
71+
40% {
72+
opacity: 1;
73+
box-shadow: 0 -8px #9e9e9e;
74+
height: 40px;
75+
}
76+
}
77+
78+
@keyframes loading-keys-app-loading {
79+
0%,
80+
80%,
81+
100% {
82+
opacity: 0.75;
83+
box-shadow: 0 0 #c4c4c5;
84+
height: 32px;
85+
}
86+
40% {
87+
opacity: 1;
88+
box-shadow: 0 -8px #717171;
89+
height: 40px;
90+
}
91+
}

‎client/src/components/SmallLoader/index.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import "./styles.scss";
3+
4+
const SmallLoader = ({ text = "Loading..." }) => {
5+
return (
6+
<div className="small-loader-container">
7+
<div className="small-loader-animation">
8+
<div className="small-jimu-loading"></div>
9+
</div>
10+
<span className="small-loader-text">{text}</span>
11+
</div>
12+
);
13+
};
14+
15+
export default SmallLoader;

‎client/src/components/SmallLoader/styles.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.small-loader-container {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
padding: 10px;
6+
gap: 8px;
7+
}
8+
9+
.small-loader-animation {
10+
flex-shrink: 0;
11+
}
12+
13+
.small-loader-text {
14+
font-family: "Regular", sans-serif;
15+
font-size: 0.9rem;
16+
color: #666;
17+
}
18+
19+
/* Small loading animation */
20+
.small-jimu-loading:before,
21+
.small-jimu-loading:after {
22+
position: absolute;
23+
top: 0;
24+
content: "";
25+
}
26+
27+
.small-jimu-loading:before {
28+
left: -8px;
29+
}
30+
31+
.small-jimu-loading:after {
32+
left: 8px;
33+
-webkit-animation-delay: 0.32s !important;
34+
animation-delay: 0.32s !important;
35+
}
36+
37+
.small-jimu-loading:before,
38+
.small-jimu-loading:after,
39+
.small-jimu-loading {
40+
background: #333;
41+
-webkit-animation: small-loading-keys 0.8s infinite ease-in-out;
42+
animation: small-loading-keys 0.8s infinite ease-in-out;
43+
width: 6px;
44+
height: 16px;
45+
}
46+
47+
.small-jimu-loading {
48+
text-indent: -9999em;
49+
margin: 0;
50+
position: relative;
51+
right: 0;
52+
top: 0;
53+
-webkit-animation-delay: 0.16s !important;
54+
animation-delay: 0.16s !important;
55+
}
56+
57+
@-webkit-keyframes small-loading-keys {
58+
0%,
59+
80%,
60+
100% {
61+
opacity: 0.75;
62+
box-shadow: 0 0 #3a3a3a;
63+
height: 16px;
64+
}
65+
40% {
66+
opacity: 1;
67+
box-shadow: 0 -4px #9e9e9e;
68+
height: 20px;
69+
}
70+
}
71+
72+
@keyframes small-loading-keys {
73+
0%,
74+
80%,
75+
100% {
76+
opacity: 0.75;
77+
box-shadow: 0 0 #c4c4c5;
78+
height: 16px;
79+
}
80+
40% {
81+
opacity: 1;
82+
box-shadow: 0 -4px #717171;
83+
height: 20px;
84+
}
85+
}

‎client/src/components/container/styles.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,24 @@
2121
padding: 0px;
2222
}
2323
}
24-
}
24+
25+
// Mobile overflow fix - only affects mobile screens
26+
@media screen and (max-width: 768px) {
27+
.container-content {
28+
padding: 10px 16px;
29+
overflow-x: hidden;
30+
}
31+
}
32+
33+
@media screen and (max-width: 480px) {
34+
.container-content {
35+
padding: 10px 12px;
36+
}
37+
}
38+
39+
@media screen and (max-width: 360px) {
40+
.container-content {
41+
padding: 10px 8px;
42+
}
43+
}
44+
}

0 commit comments

Comments
 (0)