team8.github.io/mentors.html at master · team8/team8.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
---
layout: pages
title: Mentors
permalink: /mentors/
---


<link href="/assets/css/leads.stylesheet.css" rel="stylesheet">

<!-- Body begins here -->
<div class="container">
	<div class="col-md-12">
		<h2 class="contact-us-header">
			Mentors
		</h2>
		<hr />
	</div>
</div>
<!-- Body ends here -->

<!-- Contact stuff begins here. Note: two for loops per row. First for loop is for the pictures, roles, person, the second is for the description and email-->
<!-- For the desktop version, only shown on big screens. -->
{% assign num_columns = 4 %}
{% assign num_rows = site.data.mentors.Mentors.size | plus: num_columns | minus: 1 | divided_by: num_columns %}

<div class="container visible-lg visible-md hidden-sm">
	{% for row in (1..num_rows) %}
	{% assign start = row | minus: 1 | times: num_columns %}
	{% assign sub_array = site.data.mentors.Mentors | slice : start, num_columns %}
	{% if row == 1 %}
	<div class="row first-row">
	{% else %}
	<div class="row">
	{% endif %}
		{% for item in sub_array %}
		<div class="col-md-3">
			<a data-toggle="collapse" href="#{{start | plus: forloop.index}}">
				<img class="img-circle leads-circle" src="{{item.image}}" class="img-circle person center-block"
					width="255" height="255" onclick="test({{start | plus: forloop.index}})">
			</a>
			<div class="name-and-role">
				<p class="name">{{item.name}}</p>
				<p class="role">{{item.role}}</p>
			</div>
		</div>
		{% endfor %}
		{% for item in sub_array %}
		<div class="col-md-12">
			<div id="{{start | plus: forloop.index}}" class="collapse paragraph">
				<p class="paragraph-text">
					{% if item.email %}
					{{item.email}}<br><br>
					{% endif %}
					{{item.description}}
				</p>
			</div>
		</div>
		{% endfor %}
	</div>
	{% endfor %}
	<!-- end of Mentors -->
</div>


<!-- For the mobile version, only shown on small; screens -->
<div class="container mobile">
	<div class="row first-row">
		{% for item in site.data.mentors.Mentors %}
		<div class="col-md-3">
			<a data-toggle="collapse" href="#{{forloop.index | plus: 100}}">
				<img class="img-circle leads-circle" src="{{item.image}}" class="img-circle person center-block"
					width="255" height="255" onclick="test({{forloop.index | plus: 100}})">
			</a>
			<div class="name-and-role">
				<p class="name">{{item.name}}</p>
				<p class="role">{{item.role}}</p>
			</div>
			<div id="{{forloop.index | plus: 100}}" class="collapse paragraph">
				<p class="paragraph-text">
					{% if item.email %}
					{{item.email}}<br><br>
					{% endif %}
					{{item.description}}
				</p>
			</div>
		</div>
		{% endfor %}
	</div>
	<!-- end of Mentors -->
</div>


<!-- Body ends here -->


<script type="text/javascript">
	var current = -1
	function test(id) {
		if (current == -1) {
			current = id;
		} else if (current == id) {
			current = -1;
		} else {
			document.getElementById(current).className = document.getElementById(current).className.replace(/(?:^|\s)in(?!\S)/g, '');
			current = id;

		}

	}
</script>