illinois-cs241.github.io/staff.html at master · arshk123/illinois-cs241.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
---
---
<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
      {% include header.html %}
      <main class="mdl-layout__content">
        <div class="page-content">
          <!-- Your content goes here -->
          <div class = "row" style="padding-bottom: 8%">
            <div class = "small-8 medium-8 large-10 large-centered medium-centered small-centered columns">
              <!-- A bit janky: assumes zero or one instructors. Why can't Jekyll have stable sort??? :( -->
              {% assign team = site.data.staff | sort: 'netid' | sort: 'instructor', 'last' %}
              {% assign instructor = team | first %}
              {% assign sorted_team = team | shift | sort: 'netid' | unshift: instructor %}
              {% assign photos = site.static_files | where_exp: "file", "file.path contains '/images/staffPhotos/'" %}
              {% for member in sorted_team %}
                <div class = "small-12 medium-12 large-3 columns">
                  <div class = "pad" id = "{{member.netid}}" >
                    {% assign photofile = photos | where_exp: "file", "file.path contains member.netid" | first %}
                    {% assign photo = photofile.path | default: "/images/staffPhotos/default.jpg" %}
                    <a href = ".{{ photo }}">
                      <div class="card-staff mdl-card mdl-shadow--2dp" style="background-image: url('.{{ photo }}');">
                        <div class = "spacer" style = "height: 0; padding-bottom: 85%; width:100%;">
                          <!-- Horrible Hack! Please fix me -->
                        </div>
                        <div style = "width: 100%; background: rgba(0, 0, 0, 0.7);">
                          <div class = "floater" style = "height: 0; padding-bottom: 15%; width:90%; margin: 3% auto">
                            <span style = "color: white; float:left; font-size:1.5em;">{{member.name}}{% if member.class != "" and member.class != nil %} '{{member.class}}{% endif %}</span>
                            <span data-tooltip aria-haspopup="true" class="has-tip" title="{{member.netid}}@illinois.edu" style = "float:right;position:relative">
                              <span class="icon material-icons">
                                <i class="material-icons"><a style ="color:white;" href = "mailto:{{member.netid}}@illinois.edu?Subject=CS241%20Student">mail</a></i>
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="mdl-tooltip" data-mdl-for="{{member.netid}}">
                    {{member.roles}} interested in {{member.specialty}} and has been on staff for {{member.semesters}}
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </main>
    </div>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>