Skip to content

Commit fc1d5c6

Browse files
pikachu0542pikachu0542
committed
More display changes
1 parent 821ba2b commit fc1d5c6

File tree

3 files changed

+126
-107
lines changed

3 files changed

+126
-107
lines changed

‎conditional/templates/major_project_submission.html‎

Lines changed: 96 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ <h3 class="mb-4">Major Project Form</h3>
130130
></textarea>
131131
</div>
132132

133-
<div class="col-lg-5 mt-4">
133+
<div class="col-lg-5 mt-4 dropzone">
134134
<div class="border rounded text-center p-4" id="project_files">
135135
<img src="../images/photo_video.svg" width="72">
136136

@@ -164,162 +164,152 @@ <h3 class="mb-4">Major Project Form</h3>
164164
</script>
165165
</form>
166166

167-
<!-- All Major Projects -->
167+
<hr class="my-5">
168168

169-
<h3 class="mb-3">All Major Projects</h3>
169+
<h3 class="mb-4">All Major Projects</h3>
170170

171-
{% if major_projects_len <= 0 %}
171+
{% if major_projects_len <= 0 %}
172172

173-
<div class="card">
174-
<div class="card-body text-center">
175-
No Pending Major Projects
173+
<div class="row">
174+
<div class="col">
175+
<div class="card shadow-sm">
176+
<div class="card-body text-center text-muted">
177+
No Pending Major Projects
178+
</div>
176179
</div>
177180
</div>
181+
</div>
178182

179-
{% else %}
180-
181-
{% for p in major_projects %}
182-
183-
<div class="card mb-3">
183+
{% else %}
184184

185-
<div class="card-body">
185+
{% for p in major_projects %}
186186

187-
<div class="d-flex justify-content-between align-items-start">
187+
<div class="card shadow-lg bg-white mb-4">
188+
<div class="card-body mb-extra px-5">
188189

189-
<div>
190+
<div class="container-fluid px-0 px-extra">
190191

191-
<h4 class="mb-1">{{p['proj_name']}}</h4>
192+
<!-- HEADER ROW -->
193+
<div class="row d-flex align-items-center">
194+
<!-- Title -->
195+
<div class="col-md-11" style="margin-bottom: 1em;">
196+
<h4 class="font-weight-bold mb-1">
197+
<strong>{{p['proj_name']}}</strong>
198+
</h4>
192199

193200
<img
194-
class="rounded mr-2"
195-
width="40"
201+
class="rounded-circle mr-2"
202+
width="36"
196203
src="https://profiles.csh.rit.edu/image/{{p['username']}}"
197204
>
198205

199-
{{p['name']}} ({{p['username']}})
200-
206+
<small>
207+
{{p['name']}} ({{p['username']}})
208+
</small>
201209
</div>
202210

203-
<div>
204-
211+
<!-- Status -->
212+
<div class="col-md-1">
205213
{% if is_eval_director %}
206-
207214
<div
208-
class="btn-group"
215+
class="btn-group btn-group-sm"
209216
data-module="majorProjectStatus"
210217
data-id="{{p['id']}}"
211218
>
212-
213-
<button
214-
class="btn dropdown-toggle
215-
{% if p['status']=='Passed' %}
216-
btn-success
217-
{% elif p['status']=='Failed' %}
218-
btn-danger
219-
{% else %}
220-
btn-warning
221-
{% endif %}"
222-
data-toggle="dropdown"
223-
>
219+
<a href="#" class="btn {% if p['status'] == 'Passed' %}btn-success{% elif p['status'] == 'Failed' %}btn-danger{% else %}btn-warning{% endif %} dropdown-toggle btn-mp" data-toggle="dropdown" aria-expanded="false">
224220
{{p['status']}}
225-
</button>
226-
227-
<div class="dropdown-menu">
228-
229-
<a class="dropdown-item" href="#" data-option="Passed">
230-
Passed
231-
</a>
232-
233-
<a class="dropdown-item" href="#" data-option="Pending">
234-
Pending
235-
</a>
236-
237-
<a class="dropdown-item" href="#" data-option="Failed">
238-
Failed
239-
</a>
240-
241-
<a class="dropdown-item text-danger" href="#" data-option="Delete">
242-
Delete
243-
</a>
244-
245-
</div>
246-
221+
<span class="caret"></span>
222+
</a>
223+
224+
<ul class="dropdown-menu">
225+
<li>
226+
<a href="#" data-option="Passed"><i class="bi bi-check-circle-fill green"></i> Passed</a>
227+
</li>
228+
<li>
229+
<a href="#" data-option="Pending"><i class="bi bi-hourglass-split yellow"></i> Pending</a>
230+
</li>
231+
<li>
232+
<a href="#" data-option="Failed"><i class="bi bi-x-circle-fill red"></i> Failed</a>
233+
</li>
234+
<li>
235+
<a href="#" data-option="Delete"><i class="bi bi-trash3 red"></i> Delete</a>
236+
</li>
237+
</ul>
247238
</div>
248239

249240
{% else %}
250-
251-
<span class="badge
241+
<div class="h3 align-items-center">
242+
<!-- Status indicator -->
252243
{% if p['status']=='Passed' %}
253-
badge-success
244+
<div><i class="bi bi-check-circle-fill green"></i></div>
254245
{% elif p['status']=='Failed' %}
255-
badge-danger
246+
<div><i class="bi bi-x-circle-fill red"></i></div>
256247
{% else %}
257-
badge-warning
248+
<div><i class="bi bi-hourglass-split yellow"></i></div>
258249
{% endif %}
259-
">
260-
{{p['status']}}
261-
</span>
262-
250+
</div>
263251
{% endif %}
264-
265252
</div>
266-
267253
</div>
268254

269-
<!-- Collapse button -->
270-
271-
<button
272-
class="btn btn-link p-0 mt-2"
273-
data-toggle="collapse"
274-
data-target="#evalsCollapse-{{p['id']}}"
275-
>
276-
Expand
277-
</button>
255+
<!-- TOGGLE -->
256+
<div class="row justify-content-center mt-3">
257+
<div class="col">
258+
<button class="btn-expand-panel" role="button" data-toggle="collapse" href="#evalsCollapse-{{p['id']}}" aria-expanded="false" aria-controls="evalsCollapse-{{p['id']}}">
259+
<i class="bi bi-chevron-down"></i>
260+
</button>
261+
</div>
262+
</div>
278263

279-
<!-- Collapse content -->
264+
</div>
280265

281-
<div class="collapse mt-3" id="evalsCollapse-{{p['id']}}">
266+
<!-- COLLAPSE CONTENT -->
267+
<div class="collapse mt-3" id="evalsCollapse-{{p['id']}}">
282268

283-
<p>
284-
<strong>TLDR:</strong> {{p['tldr']}}
285-
</p>
269+
<div class="container-fluid px-0 border-top pt-3">
286270

287-
<div class="mb-2">
271+
<div class="row">
288272

289-
<strong>Skills:</strong>
273+
<div class="col-md-6 mb-3">
274+
<h6><strong>TL;DR</strong></h6>
275+
<p class="mb-0">{{p['tldr']}}</p>
276+
</div>
290277

291-
{% for s in p['skills'] %}
292-
<span class="badge badge-pill badge-secondary mr-1">
293-
{{s}}
294-
</span>
295-
{% endfor %}
278+
<div class="col-md-6 mb-3">
279+
<strong>Time Commitment</strong>
280+
<p class="mb-0">{{p['time_spent']}}</p>
281+
</div>
296282

297-
</div>
283+
<div class="col-md-6 mb-3">
284+
<strong>Skills</strong><br>
285+
{% for s in p['skills'] %}
286+
<span class="skill-display mr-1 mb-1">
287+
{{s}}
288+
</span>
289+
{% endfor %}
290+
</div>
298291

299-
<p>
300-
<strong>Time Commitment:</strong>
301-
{{p['time_spent']}}
302-
</p>
292+
<div class="col-md-6 mb-3">
293+
<strong>Links</strong>
294+
<p class="mb-0">{{p['links']}}</p>
295+
</div>
303296

304-
<p>
305-
<strong>Links:</strong>
306-
{{p['links']}}
307-
</p>
297+
<div class="col-md-9 ">
298+
<strong>Description</strong>
299+
<p class="mb-0">{{p['desc']}}</p>
300+
</div>
308301

309-
<p>
310-
<strong>Description:</strong><br>
311-
{{p['desc']}}
312-
</p>
302+
</div>
313303

314304
</div>
315305

316306
</div>
317307

318308
</div>
309+
</div>
319310

320-
{% endfor %}
321-
{% endif %}
322-
311+
{% endfor %}
312+
{% endif %}
323313
</div>
324314

325315
{% endblock %}

‎frontend/stylesheets/pages/_major-project.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
.bg-white {
2+
background-color: #fff;
3+
}
4+
5+
.px-extra {
6+
padding-left: 1em;
7+
padding-right: 1em;
8+
}
9+
110
.mp-form-intro {
211
background-color: #fff;
312
box-shadow: 1px 1px 2px grey;
@@ -41,6 +50,15 @@
4150
margin-bottom: 2em;
4251
}
4352

53+
.proj-listing {
54+
background-color: #fff;
55+
padding: 0.5em;
56+
}
57+
58+
.rounded-circle {
59+
border-radius: 50%;
60+
}
61+
4462
.placeholder {
4563
color: #bbb;
4664
font-size: 16px;
@@ -67,6 +85,17 @@
6785
font-size: 10px;
6886
}
6987

88+
.skill-display {
89+
display: block;
90+
float: left;
91+
background: #d979e3;
92+
padding: 4px 8px 4px 8px;
93+
margin: 2px 3px;
94+
color: #444;
95+
border-radius: 5px;
96+
transition: .5s all;
97+
}
98+
7099
.skill-tag:hover {
71100
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
72101
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"npm": ">=6.14.8"
1818
},
1919
"scripts": {
20-
"webpack": "webpack-cli -w",
20+
"webpack": "webpack-cli",
2121
"build": "npm run webpack && npm run scss && cp -r node_modules/bootstrap-icons/font/fonts conditional/static/css/fonts"
2222
},
2323
"dependencies": {

0 commit comments

Comments
 (0)