Skip to content

Commit e966941

Browse files
NeelavaChatterjeeNeelavaChatterjee
authored
Merge pull request #12 from Rajangupta09/master
MODIFY: team-section
2 parents 076d47a + f54120c commit e966941

9 files changed

Lines changed: 211 additions & 80 deletions

File tree

‎assets/css/style.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,4 +556,129 @@ main {
556556
.welcome-msg {
557557
font-size: 14px;
558558
}
559+
}
560+
561+
/* Team */
562+
563+
.team-container h4 {
564+
font-family: "Raleway", sans-serif;
565+
font-size: 18px;
566+
font-weight: bold;
567+
color: #fff;
568+
text-transform: uppercase;
569+
position: relative;
570+
padding-bottom: 12px;
571+
text-align: center;
572+
}
573+
574+
.team-container h4::before,
575+
.team-container h4::after {
576+
content: "";
577+
position: absolute;
578+
left: 0;
579+
bottom: 0;
580+
height: 2px;
581+
}
582+
583+
.team-container h4::before {
584+
right: 0;
585+
left: 0;
586+
background: #555555;
587+
}
588+
589+
.team-container h4::after {
590+
background: #FF5722;
591+
left: 20%;
592+
width: 60%;
593+
}
594+
595+
596+
.faculty-container{
597+
margin-left: 22% !important;
598+
}
599+
.member-container{
600+
margin-left: 13% !important;
601+
}
602+
603+
.member-container, .faculty-container {
604+
margin: 0px 25px;
605+
padding: 12px;
606+
display: inline-block;
607+
width: 155px;
608+
position: relative;
609+
z-index: 0;
610+
}
611+
612+
613+
.member-container:hover, .faculty-container:hover {
614+
z-index: 100;
615+
}
616+
617+
.member-container:hover > .outer-circle, .faculty-container:hover > .outer-circle {
618+
animation: fade 0.5s ease 0s 1 forwards;
619+
620+
}
621+
622+
.faculty-container:hover > .basic-details > h3, .member-container:hover > .basic-details > h3{
623+
color: #ff5622e1;
624+
}
625+
626+
.faculty-designation, .member-designation{
627+
padding: 0px 6px 0px !important;
628+
}
629+
630+
631+
.basic-details {
632+
position: relative;
633+
z-index: 20;
634+
}
635+
636+
.basic-details .member-image, .faculty-image {
637+
border-radius: 50%;
638+
width: 131px;
639+
height: 131px;
640+
}
641+
642+
.basic-details .member-name, .faculty-name {
643+
color: white;
644+
padding: 11% 0% 0px 9px;
645+
font-size: 15px;
646+
647+
}
648+
649+
.outer-circle {
650+
position: absolute;
651+
background-color:#ff5622c0;
652+
padding-top: 135px;
653+
padding-bottom: 20px;
654+
width: 100%;
655+
top: 0px;
656+
left: 0px;
657+
z-index: 15;
658+
opacity: 0;
659+
border-radius: 100%;
660+
}
661+
662+
@media only screen and (max-width: 550px) {
663+
.outer-circle {
664+
padding-top: 140px;
665+
}
666+
667+
668+
}
669+
670+
.outer-circle h5 {
671+
color: white;
672+
font-weight: 100;
673+
}
674+
675+
@keyframes fade {
676+
from {
677+
opacity: 0;
678+
transform: translateY(1px);
679+
}
680+
to {
681+
opacity: 1;
682+
transform: translateY(0px);
683+
}
559684
}

‎assets/img/faculty/PratyayKuila.jpeg‎

46.4 KB
Loading

‎assets/img/faculty/TarunBiswas.jpeg‎

77.6 KB
Loading

‎assets/img/member/AbhineshKumar.jpg‎

378 KB
Loading

‎assets/img/member/PokalaAnirudh.png‎

571 KB
Loading

‎assets/img/member/PrinceRaj.jpg‎

359 KB
Loading

‎assets/js/main.js‎

Lines changed: 35 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -142,98 +142,48 @@ function updateRepos(data){
142142
}
143143

144144
function fetchTeam(force = false) {
145-
fetch("https://api.github.com/orgs/devCANS/public_members", {
146-
headers: {
147-
"Accept": "application/vnd.github.v3+json",
148-
"If-None-Match": ls.getKey("team-etag")
149-
}
150-
}).then(
145+
fetch("./assets/js/members.json")
146+
.then(
151147
function(response) {
152-
if (response.status == 304) {
153-
try {
154-
let data = JSON.parse(ls.getKey("team-data"));
155-
updateTeam(data);
156-
console.log("[LOCAL Team] Loaded cached copy.");
157-
} catch (e) {
158-
ls.removeKey("team-etag");
159-
setTimeout(fetchTeam());
160-
}
161-
return;
162-
}
163148
if (response.status !== 200) {
164149
console.log("[FETCH Team] Request failed!. Status Code: " + response.status);
165150
return;
166151
}
167-
168152
response.json().then(function(data) {
169-
try {
170-
ls.setKey("team-etag", response.headers.get("etag"));
171-
ls.setKey("team-data", JSON.stringify(data));
172-
} catch (e) {
173-
console.log("[FETCH Team] ETag Missing");
174-
}
175-
176153
updateTeam(data);
177154
});
178-
}
179-
).catch(function(err) {
180-
console.log("[FETCH Team] Fetch Error!", err);
155+
}
156+
).catch(function(err) {
157+
console.log("[FETCH Team] Fetch Error!", err);
181158
});
182159
}
183160

184161
function updateTeam(data){
185-
data.forEach((member) => {
186-
if (ls.getKey(member.node_id) != null) {
187-
// Fetching member info from local storage
188-
info = JSON.parse(ls.getKey(member.node_id));
189-
setMember(info);
190-
} else {
191-
// Fetching member info from github api
192-
fetch(member.url, {
193-
headers: {
194-
"Accept": "application/vnd.github.v3+json",
195-
"If-None-Match": ls.getKey("team-etag")
196-
}
197-
}).then((response) => {
198-
if(response.status != 200){
199-
console.log("[Fetch Member Info] Status code" + response.status);
200-
}
201-
202-
response.json().then((info) => {
203-
// Saving member info to local storage
204-
ls.setKey(info.node_id, JSON.stringify(info));
205-
setMember(info)
206-
});
207-
}).catch(function(err) {
208-
console.log("[FETCH Team] Fetch Error!", err);
209-
});
210-
}
162+
Object.entries(data).forEach((val) => {
163+
val[1].forEach((key)=> {
164+
setMember(key);
165+
})
166+
})
167+
}
211168

212-
});
213-
}
214169

215170
function setMember(info){
216-
// Creating member card
217-
const teamContainer = document.querySelector(".team-container");
218-
let outerDiv = createElement("div", {class: "col-lg-2 col-md-4"});
219-
let member = createElement("div", {class: "member"});
220-
let img = createElement("img",{class: "img-fluid", src: info.avatar_url});
221-
let memberInfo = createElement("div", {class: "member-info"});
222-
let memberInfoContent = createElement("div", {class: "member-info-content"});
223-
let h4 = createElement("h4");
224-
h4.innerHTML = info.name;
225-
memberInfoContent.appendChild(h4);
226-
let social = createElement("div", {class: "social"});
227-
social.innerHTML = `
228-
<a href="${info.html_url}" target="_"><i class="fa fa-github"></i></a>
229-
`;
230-
memberInfoContent.appendChild(social);
231-
memberInfo.appendChild(memberInfoContent);
232-
member.appendChild(img);
233-
member.appendChild(memberInfo);
234-
outerDiv.appendChild(member);
171+
let teamContainer = document.querySelector('#'+info.profile+'-container');
172+
let outerDiv = createElement("div", {class: info.profile+"-container"});
173+
let basicdetails = createElement("div", {class: "basic-details"});
174+
let img = createElement("img",{class: info.profile+"-image", src: info.img});
175+
let h3 = createElement("h3", {class: info.profile+"-name"});
176+
let h4 = createElement("h4", {class: info.profile+"-designation "+info.profile+"-name ml-2"});
177+
let innerdetails = createElement("div", {class: "outer-circle"});
178+
h3.innerHTML = info.name;
179+
h4.innerHTML = info.designation;
180+
basicdetails.appendChild(img);
181+
basicdetails.appendChild(h3);
182+
basicdetails.appendChild(h4);
183+
outerDiv.appendChild(basicdetails);
184+
outerDiv.appendChild(innerdetails);
235185
teamContainer.appendChild(outerDiv);
236-
}
186+
};
237187

238188
function createElement(tag, options = {}, html = "") {
239189
let e = document.createElement(tag);
@@ -248,6 +198,9 @@ function createElement(tag, options = {}, html = "") {
248198
return e;
249199
}
250200

201+
202+
203+
251204
function getMaterialIcon(icon, addClasses = "", DOMElement = true) {
252205
if (DOMElement) {
253206
return createElement("i", {class: "material-icons " + addClasses}, icon);
@@ -324,3 +277,9 @@ function init() {
324277

325278
new TypeWriter(textElement, words, wait);
326279
}
280+
281+
282+
283+
284+
285+

‎assets/js/members.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"faculty":[
3+
{
4+
"profile": "faculty",
5+
"img": "/assets/img/faculty/PratyayKuila.jpeg",
6+
"name": "Dr. Pratyay Kuila",
7+
"designation" : "Faculty advisors"
8+
},
9+
{
10+
"profile": "faculty",
11+
"img": "/assets/img//faculty/TarunBiswas.jpeg",
12+
"name": "Dr. Tarun Biswas",
13+
"designation" : "Faculty advisors"
14+
}
15+
],
16+
"2021": [
17+
{
18+
"profile": "member",
19+
"img": "/assets/img/member/PokalaAnirudh.png",
20+
"name": "Pokala Anirudh",
21+
"designation": "Coordinator"
22+
},
23+
{
24+
"profile": "member",
25+
"img": "/assets/img/member/PrinceRaj.jpg",
26+
"name": "Prince Raj",
27+
"designation": "Coordinator"
28+
29+
},
30+
{
31+
"profile": "member",
32+
"img": "/assets/img/member/AbhineshKumar.jpg",
33+
"name": "Abhinesh Kumar",
34+
"designation": "Coordinator"
35+
36+
}
37+
]
38+
}

‎index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,19 @@ <h3 class="title">resources</h3>
110110
<div class="container">
111111
<header class="section-header">
112112
<h3 class="title">Our Team</h3>
113-
</header>
114-
115-
<div class="row team-container"></div>
116-
113+
</header>
114+
<header class="team-container">
115+
<h4 class="title">Faculty</h4>
116+
</header>
117+
<div id="faculty-container" class="m-5">
118+
119+
</div>
120+
<header class="team-container" class="m-2">
121+
<h4 class="title">Cordinator</h4>
122+
</header>
123+
<div id="member-container" class="m-5">
124+
125+
</div>
117126
</div>
118127
</section>
119128
</main>

0 commit comments

Comments
 (0)