Skip to content

Commit cc71703

Browse files
parthsarinparthsarin
committed
Add cards and upgrade bootstrap
1 parent 9692713 commit cc71703

File tree

2 files changed

+99
-70
lines changed

2 files changed

+99
-70
lines changed

‎index.html‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
5050
<meta name="theme-color" content="#ffffff">
5151
<!-- End Favicon -->
52-
53-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" media="screen">
52+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
53+
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" media="screen"> -->
5454
<link rel="stylesheet" href="css/bootswatch/paper.css">
5555
<link rel="stylesheet" href="css/styles.css">
5656
<link rel="stylesheet" href="css/colors.css">
@@ -84,13 +84,25 @@ <h3 class="text-muted">the <span class="text-primary">python</span> programming
8484

8585
<!-- Navigation Tabs -->
8686
<nav role="navigation">
87-
<ul class="nav nav-tabs nav-justified" role="tablist" id="navigation">
88-
<li role="presentation" class="active"><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a></li>
89-
<li role="presentation"><a href="#lecture" aria-controls="lecture" role="tab" data-toggle="tab">Lecture</a></li>
90-
<li role="presentation"><a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">Labs</a></li>
91-
<li role="presentation"><a href="#assignments" aria-controls="assignments" role="tab" data-toggle="tab">Assignments</a></li>
92-
<li role="presentation"><a href="#resources" aria-controls="resources" role="tab" data-toggle="tab">Resources</a></li>
93-
<li role="presentation"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">Course Info</a></li>
87+
<ul class="nav nav-tabs nav-fill" role="tablist" id="navigation">
88+
<li role="presentation" class="nav-item active">
89+
<a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a>
90+
</li>
91+
<li class='nav-item' role="presentation">
92+
<a href="#lecture" aria-controls="lecture" role="tab" data-toggle="tab">Lecture</a>
93+
</li>
94+
<li role="presentation">
95+
<a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">Labs</a>
96+
</li>
97+
<li class='nav-item' role="presentation">
98+
<a href="#assignments" aria-controls="assignments" role="tab" data-toggle="tab">Assignments</a>
99+
</li>
100+
<li class='nav-item' role="presentation">
101+
<a href="#resources" aria-controls="resources" role="tab" data-toggle="tab">Resources</a>
102+
</li>
103+
<li class='nav-item' role="presentation">
104+
<a href="#info" aria-controls="info" role="tab" data-toggle="tab">Course Info</a>
105+
</li>
94106
</ul>
95107
</nav>
96108
<!-- End Navigation Tabs -->
@@ -101,27 +113,10 @@ <h3 class="text-muted">the <span class="text-primary">python</span> programming
101113
<div role="tabpanel" class="tab-pane fade in active" id="overview">
102114

103115
<!-- Start of the Final Project Showcase -->
104-
105-
<div class="row">
106-
<div>
107-
<div class="projects">
108-
<h4 class="text-primary">Final Project Showcase</h4>
109-
<table class="table table-striped table-hover table-bordered">
110-
<thead>
111-
<tr>
112-
<th style="width:40%">Project</th>
113-
<th style="width:40%">Video</th>
116+
<div class="container">
117+
<div id="final-showcase" class="row mt-2 no-gutters justify-content-between d-flex flex-wrap">
114118

115-
</tr>
116-
</thead>
117-
<tbody>
118-
<!-- Showcase inserted here by resources.js TODO - add closing
119-
comment to this when uncommenting the final project showcase
120-
since HTML comments don't nest -->
121-
</tbody>
122-
</table>
123119
</div>
124-
<div>
125120
</div>
126121

127122
<!-- End of the Final Project Showcase -->

‎js/resources.js‎

Lines changed: 76 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -205,54 +205,88 @@ function create_handout_tr(ho) {
205205
return $tr;
206206
}
207207

208-
function create_showcase_tr(project) {
208+
function create_showcase_card(project) {
209209
/*
210-
<tr>
211-
<td scope="row">
212-
<b>Sample Project Title</b> <br>
213-
Sample Project Authors <br>
214-
<a href="link_to_project"> [Check it Out!] </a>
215-
</td>
216-
<td> (Image, if applicable) </td>
217-
</tr>
210+
<div class="card" style="width: 18rem;">
211+
<div class="card-body">
212+
<h5 class="card-title">{ project.title }</h5>
213+
<h6 class="card-subtitle mb-2 text-muted">{ project.authors }</h6>
214+
<a href="{ project.codeLink }" class="card-link">{ project.codeSource }</a>
215+
{ project.ext }
216+
<button
217+
type="button"
218+
class="btn btn-link card-link"
219+
data-toggle="modal"
220+
data-target="#{ project.uid }-modal"
221+
>
222+
{ project.mediaType }
223+
</button>
224+
</div>
225+
</div>
226+
<div
227+
class="modal fade"
228+
id="{ project.uid }-modal"
229+
tabindex="-1"
230+
role="dialog"
231+
aria-labelledby="{ project.uid }-title"
232+
aria-hidden="true"
233+
>
234+
<div class="modal-dialog" role="document">
235+
<div class="modal-content">
236+
<div class="modal-header">
237+
<h5 class="modal-title" id="{ project.uid }-title">Video for "{ project.title }"</h5>
238+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
239+
<span aria-hidden="true">&times;</span>
240+
</button>
241+
</div>
242+
<div class="modal-body">
243+
{ project.rightColMedia }
244+
</div>
245+
<div class="modal-footer">
246+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
218252
*/
219-
var $tr = $('<tr>').append(
220-
$('<td>').attr('scope', 'row')
221-
.append(
222-
$('<b>')
223-
.append(project.title)
224-
)
225-
.append(
226-
$("<br>")
227-
)
228-
.append(
229-
$('<span>')
230-
.append(project.authors)
231-
)
232-
.append(
233-
$("<br>")
234-
)
253+
var $card = $('<div>').attr('class', 'col mb-2')
254+
.append(
255+
$('<div>').attr({
256+
'class': 'card',
257+
'style': 'width: 20rem; height: 100%;'
258+
})
259+
.append(
260+
$('<div>').attr('class', 'card-body')
235261
.append(
262+
$('<h5>').attr('class', 'card-title').append(project.title)
263+
).append(
264+
$('<h6>').attr('class', 'card-subtitle mb-2 text-muted').append(project.authors)
265+
).append(
236266
create_anchor(project.codeLink, project.codeSource, "None", gtag_trackShowcaseLink)
267+
.attr('class', 'mr-3')
268+
).append(
269+
(project.rightColMedia ? $('<a>').attr({
270+
'class': 'mr-3',
271+
'data-toggle': 'modal',
272+
'data-target': `#${project.uid}-modal`,
273+
'href': '#'
274+
}).append('Video') : null)
275+
).append(
276+
(project.ext ? '<br />' + project.ext : null)
237277
)
238-
.append(
239-
$("<br>")
240-
)
241-
.append(
242-
$("<span>")
243-
.append(project.ext)
244-
)
278+
)
245279
);
246280

247-
if (project.rightColMedia.length > 0) {
248-
$tr = $tr.append(
249-
$("<td>").append(
250-
project.rightColMedia
251-
)
252-
)
253-
}
281+
// if (project.rightColMedia.length > 0) {
282+
// $tr = $tr.append(
283+
// $("<td>").append(
284+
// project.rightColMedia
285+
// )
286+
// )
287+
// }
254288

255-
return $tr;
289+
return $card;
256290
}
257291

258292
function create_announcement(announcement) {
@@ -408,9 +442,9 @@ $.when(
408442

409443
for (var i = 0; i < projects.length; i++) {
410444
var proj = projects[i];
411-
var markup = create_showcase_tr(proj);
445+
var markup = create_showcase_card(proj);
412446
if (markup !== null) {
413-
$(".projects tbody").append(markup);
447+
$("#final-showcase").append(markup);
414448
}
415449
}
416450

0 commit comments

Comments
 (0)