Skip to content

Commit 72fc4f7

Browse files
dustinuseydustinusey
committed
support for resource lists in specific TDs
1 parent daf226b commit 72fc4f7

File tree

7 files changed

+140
-45
lines changed

7 files changed

+140
-45
lines changed

‎frontend/dist/scripts/app.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,33 @@ function loadProjectList(id) {
231231
projList.appendChild(li);
232232
})
233233
}
234+
235+
let resourceList = document.getElementById('resourceList');
236+
resourceList.innerHTML = '';
237+
238+
if (data.resources) {
239+
data.resources.forEach(res => {
240+
let li = document.createElement('li');
241+
li.setAttribute('title', res.description)
242+
let a = document.createElement('a');
243+
a.setAttribute('href', res.link);
244+
a.setAttribute('target', '_blank');
245+
let icon = document.createElement('i');
246+
icon.classList = 'fa-solid fa-link';
247+
a.appendChild(icon);
248+
let group = document.createElement('div');
249+
group.classList = 'group';
250+
let title = document.createElement('p');
251+
title.textContent = res.title;
252+
let link = document.createElement('p');
253+
link.textContent = res.link;
254+
group.appendChild(title);
255+
group.appendChild(link);
256+
a.appendChild(group);
257+
li.appendChild(a);
258+
resourceList.appendChild(li);
259+
})
260+
}
234261
}
235262

236263
}

‎frontend/dist/styles/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/scripts/app.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,33 @@ function loadProjectList(id) {
231231
projList.appendChild(li);
232232
})
233233
}
234+
235+
let resourceList = document.getElementById('resourceList');
236+
resourceList.innerHTML = '';
237+
238+
if (data.resources) {
239+
data.resources.forEach(res => {
240+
let li = document.createElement('li');
241+
li.setAttribute('title', res.description)
242+
let a = document.createElement('a');
243+
a.setAttribute('href', res.link);
244+
a.setAttribute('target', '_blank');
245+
let icon = document.createElement('i');
246+
icon.classList = 'fa-solid fa-link';
247+
a.appendChild(icon);
248+
let group = document.createElement('div');
249+
group.classList = 'group';
250+
let title = document.createElement('p');
251+
title.textContent = res.title;
252+
let link = document.createElement('p');
253+
link.textContent = res.link;
254+
group.appendChild(title);
255+
group.appendChild(link);
256+
a.appendChild(group);
257+
li.appendChild(a);
258+
resourceList.appendChild(li);
259+
})
260+
}
234261
}
235262

236263
}

‎frontend/src/styles/components/techdegree-panel/_dropdown.scss

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,48 @@
11
section.techdegree-panel .techdegree-dropdown {
2-
@include bg(var(--td-header-bg));
3-
@include loader(1vmin, .8rem);
4-
@include theme-transition;
5-
position: relative;
6-
overflow: hidden;
7-
padding: 1rem;
8-
border-bottom-right-radius: 15px;
9-
border-bottom-left-radius: 15px;
10-
min-height: 125px;
11-
display: none;
12-
.loader {
13-
color: white;
2+
@include bg(var(--td-header-bg));
3+
@include loader(1vmin, 0.8rem);
4+
@include theme-transition;
5+
position: relative;
6+
overflow: hidden;
7+
padding: 1rem;
8+
border-bottom-right-radius: 15px;
9+
border-bottom-left-radius: 15px;
10+
min-height: 125px;
11+
display: none;
12+
.loader {
13+
color: white;
14+
}
15+
li {
16+
@include flex(row, nowrap, space-between, center);
17+
padding: 0.33rem;
18+
border-radius: 0.33rem;
19+
cursor: pointer;
20+
color: white;
21+
transition: background 0.3s ease;
22+
span {
23+
@include textOverflow(1);
24+
pointer-events: none;
25+
transition: margin 0.3s ease;
1426
}
15-
li {
16-
@include flex(row, nowrap, space-between, center);
17-
padding: .33rem;
18-
border-radius: .33rem;
19-
cursor: pointer;
20-
color: white;
21-
transition: background .3s ease;
22-
span {
23-
@include textOverflow(1);
24-
pointer-events: none;
25-
transition: margin .3s ease;
26-
}
27-
&:hover {
28-
@include bg(rgba(white, 0.1));
29-
span {
30-
margin-left: 1rem;
31-
}
32-
}
33-
i {
34-
color: $gold;
35-
opacity: 0.2;
36-
transition: opacity .3s;
37-
&:hover {
38-
opacity: 1;
39-
}
40-
}
41-
&.fav {
42-
i {
43-
opacity: 1;
44-
}
45-
}
27+
&:hover {
28+
@include bg(rgba(white, 0.1));
29+
span {
30+
margin-left: 1rem;
31+
}
4632
}
33+
i {
34+
color: $gold;
35+
opacity: 0.2;
36+
transition: opacity 0.3s;
37+
display: none;
38+
&:hover {
39+
opacity: 1;
40+
}
41+
}
42+
&.fav {
43+
i {
44+
opacity: 1;
45+
}
46+
}
47+
}
4748
}

‎frontend/src/styles/components/techdegree-panel/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import 'header', 'dropdown', 'project-list';
1+
@import "header", "dropdown", "project-list", "resource-list";

‎frontend/src/styles/components/techdegree-panel/_resource-list.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
ul.resource-list {
2+
padding: 0 1rem 1rem;
3+
li {
4+
padding: 0.33rem 0.25rem;
5+
6+
a {
7+
@include flex(row, nowrap, flex-start, center);
8+
text-decoration: none;
9+
color: var(--primary-color);
10+
font-size: 0.9rem;
11+
@include bg(rgba(white, 0.1));
12+
@include bg(var(--primary-bg));
13+
@include radius(5px);
14+
overflow: hidden;
15+
i {
16+
margin-right: 0.33rem;
17+
padding: 1rem 0.75rem;
18+
}
19+
p {
20+
&:nth-child(1) {
21+
font-weight: 300;
22+
}
23+
&:nth-child(2) {
24+
@include textOverflow(1);
25+
color: var(--td-accent);
26+
transition: margin 0.3s ease;
27+
}
28+
}
29+
}
30+
&:hover {
31+
a p:nth-child(2) {
32+
margin-left: 0.5rem;
33+
}
34+
}
35+
}
36+
}

‎index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ <h1> Hold up!</h1>
4949
<div class="loader"></div>
5050
<!-- <li data-project-id="1" style="">My Personal Profile Page</li><li data-project-id="2">Mobile-first Responsive Layout</li><li data-project-id="3">An Online Registration Form</li><li data-project-id="4">Web Style Guide</li><li data-project-id="5">An Interactive Photo Gallery</li><li data-project-id="6">Game Show App</li><li data-project-id="7">WebApp Dashboard</li><li data-project-id="8">Use an API to Create an Employee Directory</li><li data-project-id="9">Capstone Portfolio</li> -->
5151
</ul>
52+
<!-- resources -->
53+
<ul class="resource-list" id="resourceList">
54+
<!-- dynamic -->
55+
</ul>
5256
</section>
5357

5458

0 commit comments

Comments
 (0)