Skip to content

Commit

Permalink
Improved staff page layout.
Browse files Browse the repository at this point in the history 
- Replaced 3 by 3 layout with flexbox
- Centered, and increased space
- Made colors less bright
- Added note on emailing to staff page
  • Loading branch information
@PradyumnaShome
PradyumnaShome committed May 7, 2019
1 parent bcf4894 commit af596b0
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 124 deletions.
79 changes: 38 additions & 41 deletions _pages/staff.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,43 @@
{% include head.html %}
<body>
{% include header.html %}
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-xs-1"></div>
<div class="col-md-10 col-xs-10">
<!-- 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: 'name' | unshift: instructor %}
{% assign photos = site.static_files | where_exp: "file", "file.path contains '/images/staffPhotos/'" %}
<div class="container">
{% for member in sorted_team %}
{% assign value = forloop.index0 | modulo:3 %}
{% if value == 0 %}
<div class="row row-eq-height staff-row">
{% endif %}
{% assign photofile = photos | where_exp: "file", "file.path contains member.netid" | first %}
{% assign photo = photofile.path | default: "/images/staffPhotos/default.jpg" %}
<a href="mailto:{{member.netid}}@illinois.edu?Subject=CS%20241%20Student" alt="Mail Student">
<div class="col-md-3 col-sm-12 col-xs-12 staff-div"
id="{{member.netid}}"
data-toggle="tooltip"
data-placement="bottom"
title="{{ member.roles }} {% if member.specialty != '' %}interested in {{ member.specialty }}{% endif %} and has been on staff for {{ member.semesters }}"
style="background-image: url({{ photo }});">
<div class="container">
<div class="row">
<div class="staff-name col-md-12 col-xs-12">{{ member.name }}</div>
</div>
</div>
</div>
</a>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
{% if forloop.last or value == 2 %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<h1 class="heading">
Course Staff
</h1>
<section class="center">
<p>
Most questions should be asked on Piazza, so that answers can benefit the entire class.
Please acquaint yourself with our <a href="/help.html#piazza-search-first-dont-post">Piazza policy!</a>
</p>
<p>
However, if you have a sensitive issue feel free to make a private note on Piazza, or email course staff directly.
</p>
</section>
<!-- 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: 'name' | unshift: instructor %}
{% assign photos = site.static_files | where_exp: "file", "file.path contains '/images/staffPhotos/'" %}
<section class="gallery">
{% for member in sorted_team %}
{% assign photofile = photos | where_exp: "file", "file.path contains member.netid" | first %}
{% assign photo = photofile.path | default: "/images/staffPhotos/default.jpg" %}
<section class="staff-container">
<a href="mailto:{{member.netid}}@illinois.edu?Subject=CS%20241%20Student" alt="Mail Student">
<div class="col-md-3 col-sm-12 col-xs-12 staff-image"
id="{{member.netid}}"
data-toggle="tooltip"
data-placement="bottom"
title="{{ member.roles }} {% if member.specialty != '' %}interested in {{ member.specialty }}{% endif %} and has been on staff for {{ member.semesters }}"
style="background-image: url({{ photo }});">
</div>
<div class="card-body d-flex flex-column staff-name">
{{ member.name }}
</div>
</a>
</section>
{% endfor %}
</section>
{% include footer.html %}
</body>
</html>
</html>
83 changes: 39 additions & 44 deletions _pages/staff_hall_of_fame.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,43 @@
---
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
{% include header.html %}
<div class="container-fluid" id="page">
<div class="row">
<div class="col-md-1 col-xs-1"></div>
<div class="col-md-10 col-xs-10">
<h1>Staff Hall of Fame</h1>
<p>These are all graduated TAs and CAs that have been on staff for multiple semesters and contributed greatly to the course.</p>

<p><i>If I have seen farther than others, it is by standing on the shoulders of giants</i> -- Isaac Newton</p>
<!-- A bit janky: assumes zero or one instructors. Why can't Jekyll have stable sort??? :( -->
{% assign team = site.data.staff-emeritus | sort: 'name' %}
{% assign photos = site.static_files | where_exp: "file", "file.path contains '/images/staffPhotos/retired/'" %}
<div class="container">
{% for member in team %}
{% capture mods %}{{ forloop.index0 | modulo: 3 }}{% endcapture %}
{% if mods == '0' or forloop.first %}
<div class="row row-eq-height staff-row">
{% endif %}
{% assign photofile = photos | where_exp: "file", "file.path contains member.netid" | first %}
<div class="col-md-3 col-sm-12 col-xs-12 staff-div"
id="{{member.netid}}"
data-toggle="tooltip"
data-placement="bottom"
title="{{ member.roles }} {% if member.specialty != '' %}interested in {{ member.specialty }}{% endif %} and has been on staff for {{ member.semesters }}"
style="background-image: url(/images/staffPhotos/retired/{{ member.netid }}.jpg);">
<div class="container">
<div class="row">
<div class="staff-name col-md-12 col-xs-12">{{ member.name }}</div>
</div>
</div>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
{% if mods == '2' or forloop.last %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% include footer.html %}
</body>
{% include head.html %}
<body>
{% include header.html %}
<h1 class="heading">
Staff Hall of Fame
</h1>
<section class="center">
<p>
These are all graduated TAs and CAs that have been on staff for multiple semesters and have contributed greatly to the course.
</p>
<p>
<i>If I have seen farther than others, it is by standing on the shoulders of giants</i> -- Isaac Newton
</p>
</section>
<!-- A bit janky: assumes zero or one instructors. Why can't Jekyll have stable sort??? :( -->
{% assign team = site.data.staff-emeritus | sort: 'name' %}
{% assign photos = site.static_files | where_exp: "file", "file.path contains '/images/staffPhotos/retired/'" %}
<section class="gallery">
{% for member in team %}
{% assign photofile = photos | where_exp: "file", "file.path contains member.netid" | first %}
{% assign photo = photofile.path | default: "/images/staffPhotos/default.jpg" %}
<section class="staff-container">
<a href="mailto:{{member.netid}}@illinois.edu?Subject=CS%20241%20Student" alt="Mail Student">
<div class="col-md-3 col-sm-12 col-xs-12 staff-image"
id="{{member.netid}}"
data-toggle="tooltip"
data-placement="bottom"
title="{{ member.roles }} {% if member.specialty != '' %}interested in {{ member.specialty }}{% endif %} and has been on staff for {{ member.semesters }}"
style="background-image: url({{ photo }});">
</div>
<div class="card-body d-flex flex-column staff-name">
{{ member.name }}
</div>
</a>
</section>
{% endfor %}
</section>
{% include footer.html %}
</body>
</html>
94 changes: 55 additions & 39 deletions css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
:root {
--color-primary:#13bb36;
--color-secondary: #2f5fffdc;
--color-primary:#00b400;
--color-secondary: rgb(53, 144, 219);
--color-secondary-emphasis: rgb(28, 125, 204);
--color-text: black;
--color-translucent: hsla(0, 0%, 0%, 0.5);
}

body {
Expand All @@ -20,7 +22,7 @@ body {

.navbar {
background-color: var(--color-primary);
border-color: #2C72AD;
border-color: var(--color-secondary);
border: 0px;
border-top:none;
box-shadow:none;
Expand Down Expand Up @@ -78,33 +80,6 @@ h2 {
}
}

.staff {
width: 100%;
}

.staff-div {
width: 30vh;
height: 30vh;
overflow: hidden;
background-size: cover;
padding:0px;
border-radius: 1vh;
}

.staff-row {
margin-top: 40px;
}

.staff-name {
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.35);
color: white;
text-align: center;
font-size: 1.75em;
padding-top: 5px;
}

/* Popover */
.popover {
background-color: black;
Expand Down Expand Up @@ -302,7 +277,7 @@ img:not(.emoji) {

.fancy-link {
text-decoration: none !important;
color: #337ab7;
color: var(--color-secondary-emphasis);
display: inline-block;
position: relative;
padding-bottom: 0px;
Expand All @@ -320,14 +295,7 @@ img:not(.emoji) {

.fancy-link:hover:after {
width: 100%;
background: #337ab7;
}

.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: var(--color-secondary-emphasis);
}

.navbar-toggle {
Expand Down Expand Up @@ -597,3 +565,51 @@ li.navbar-link:hover a, li.navbar-sublink:hover {
text-align: center;
font-family: 'Roboto', sans-serif;
}

.gallery {
display: flex;
justify-content: center;
margin: 0;
padding: 4vw;
flex-wrap: wrap;
}

.staff {
width: 100%;
}

.staff-container {
margin: 2vh;
border: solid var(--color-translucent) 0.5px;
}

.staff-container div.staff-image {
width: 30vh;
height: 30vh;
overflow: hidden;
background-size: cover;
padding: 0;
}

.staff-name {
bottom: 0px;
background-color: rgba(255, 255, 255, 0.397);
color: var(--color-secondary);
width: 100%;
text-align: center;
font-size: 1.5em;
font-weight: 100;
padding-top: 5px;
}

.heading {
text-align: center;
}

section.center {
text-align: center;
padding-left: 3vw;
padding-right: 3vw;
padding-bottom: 0;
padding-top: 0;
}

0 comments on commit af596b0

Please sign in to comment.