Skip to content

Commit f42fd88

Browse files
YousefSedikYousefSedik
authored
Merge pull request #14 from YousefSedik/development
Development
2 parents 0798a5b + e083197 commit f42fd88

File tree

2 files changed

+452
-4
lines changed

2 files changed

+452
-4
lines changed

‎templates/project/index.html‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,208 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Project List</title>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10+
<meta name="theme-color" content="#4361ee">
811
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
912
<script src="/static/js/script.js"></script>
1013
<style>
14+
/* Enhanced Mobile Responsiveness */
15+
16+
/* General responsive adjustments */
17+
@media (max-width: 768px) {
18+
.container {
19+
padding: 1rem;
20+
}
21+
22+
.header-section h1 {
23+
font-size: 1.5rem;
24+
}
25+
26+
.btn-create {
27+
padding: 0.6rem 1rem;
28+
font-size: 0.9rem;
29+
}
30+
}
31+
32+
/* Better navbar for mobile */
33+
@media (max-width: 768px) {
34+
.navbar {
35+
flex-direction: column;
36+
padding: 0.75rem;
37+
}
38+
39+
.logo {
40+
margin-bottom: 0.5rem;
41+
width: 100%;
42+
display: flex;
43+
justify-content: space-between;
44+
align-items: center;
45+
}
46+
47+
.logo a {
48+
font-size: 1.25rem;
49+
}
50+
51+
.menu-toggle {
52+
display: block;
53+
background: none;
54+
border: none;
55+
font-size: 1.5rem;
56+
color: var(--secondary);
57+
cursor: pointer;
58+
}
59+
60+
.links {
61+
width: 100%;
62+
flex-direction: column;
63+
gap: 0;
64+
max-height: 0;
65+
overflow: hidden;
66+
transition: max-height 0.3s ease;
67+
}
68+
69+
.links.active {
70+
max-height: 300px;
71+
}
72+
73+
.links a {
74+
width: 100%;
75+
padding: 0.75rem 0;
76+
border-bottom: 1px solid #eee;
77+
}
78+
79+
.user-info {
80+
width: 100%;
81+
justify-content: center;
82+
margin-top: 0.5rem;
83+
}
84+
}
85+
86+
/* Project grid responsive improvements */
87+
@media (max-width: 768px) {
88+
.project-grid {
89+
grid-template-columns: 1fr;
90+
gap: 1rem;
91+
}
92+
93+
.project-card {
94+
margin-bottom: 0;
95+
}
96+
97+
.project-header {
98+
padding: 1rem;
99+
}
100+
101+
.project-body {
102+
padding: 1rem;
103+
}
104+
105+
.project-meta .meta-item {
106+
flex-direction: column;
107+
align-items: flex-start;
108+
gap: 0.2rem;
109+
}
110+
111+
.project-footer {
112+
padding: 0.75rem 1rem;
113+
}
114+
115+
.btn-view {
116+
width: 100%;
117+
text-align: center;
118+
}
119+
}
120+
121+
/* Modal responsive improvements */
122+
@media (max-width: 768px) {
123+
.modal-dialog {
124+
margin: 0.5rem;
125+
}
126+
127+
.modal-body {
128+
padding: 1rem;
129+
}
130+
131+
.access-input-group {
132+
flex-direction: column;
133+
gap: 0.5rem;
134+
}
135+
136+
.access-input-group .form-control,
137+
.access-input-group .form-select {
138+
width: 100%;
139+
}
140+
141+
.btn-add-user {
142+
width: 100%;
143+
}
144+
145+
.access-item {
146+
flex-direction: column;
147+
align-items: flex-start;
148+
gap: 0.5rem;
149+
}
150+
151+
.access-item>div {
152+
width: 100%;
153+
justify-content: space-between;
154+
}
155+
}
156+
157+
/* Small phone screens */
158+
@media (max-width: 480px) {
159+
.header-section {
160+
flex-direction: column;
161+
align-items: stretch;
162+
gap: 1rem;
163+
}
164+
165+
.header-section h1 {
166+
text-align: center;
167+
}
168+
169+
.btn-create {
170+
width: 100%;
171+
justify-content: center;
172+
}
173+
174+
.empty-state {
175+
padding: 1.5rem;
176+
}
177+
}
178+
179+
/* Touch-friendly improvements */
180+
@media (max-width: 768px) {
181+
182+
.btn-view,
183+
.btn-create,
184+
.btn-add-user,
185+
.btn-submit,
186+
.btn-remove {
187+
min-height: 44px;
188+
/* Minimum touch target size */
189+
}
190+
191+
.form-control,
192+
.form-select {
193+
font-size: 16px;
194+
/* Prevents iOS zoom on input */
195+
padding: 0.75rem;
196+
height: auto;
197+
}
198+
199+
select.form-select {
200+
padding-right: 2rem;
201+
/* Space for dropdown arrow */
202+
}
203+
204+
.access-item .btn-remove {
205+
width: 32px;
206+
height: 32px;
207+
}
208+
}
209+
11210
:root {
12211
--primary: #4361ee;
13212
--primary-hover: #3a56d4;
@@ -468,6 +667,7 @@
468667
<div class="navbar">
469668
<div class="logo">
470669
<a href="/">Share Code</a>
670+
<button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation">☰</button>
471671
</div>
472672
<div class="links">
473673
<a href="">Home</a>
@@ -793,6 +993,29 @@ <h3>${project.name}</h3>
793993
document.addEventListener('DOMContentLoaded', function () {
794994
fetchProjects();
795995
});
996+
// Mobile menu toggle
997+
document.addEventListener('DOMContentLoaded', function () {
998+
const menuToggle = document.getElementById('menuToggle');
999+
const links = document.querySelector('.links');
1000+
1001+
if (menuToggle) {
1002+
menuToggle.addEventListener('click', function () {
1003+
links.classList.toggle('active');
1004+
});
1005+
}
1006+
1007+
// Close menu when clicking outside
1008+
document.addEventListener('click', function (event) {
1009+
if (!event.target.closest('.navbar')) {
1010+
links.classList.remove('active');
1011+
}
1012+
});
1013+
1014+
// Prevent clicks inside the navbar from closing the menu
1015+
document.querySelector('.navbar').addEventListener('click', function (event) {
1016+
event.stopPropagation();
1017+
});
1018+
});
7961019
</script>
7971020
</body>
7981021

0 commit comments

Comments
 (0)