templates/people.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SWEatshop.tech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<link rel="stylesheet" href="/static/css/styles.processed.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3.0.0/dist/isotope.pkgd.js"></script>
<link rel="shortcut icon" href="/static/img/favicon.ico">
</head>
<body class="gradient-bg">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse-opacity">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/index.html"><img alt="Brand" src="/static/img/sweatshop-logo.png" style="width: 200px;"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/companies.html">Companies</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">People<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/investors.html">Investors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/schools.html">Schools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/visualization.html">Visualization</a>
</li>
<li><a href="#search"><img src="http://www.freeiconspng.com/uploads/search-icon-png-4.png" style="height: 35px;"></a></li>
</ul>
</div>
</nav>
<div style="min-height:89vh">
<h1 class="cover-heading">People</h1>
<div class="container" style="color: white;">
<div class="filters">
<div class="ui-group">
<button-text>Job Type</button-text>
<div class="button-group js-radio-button-group" data-filter-group="job-type" id="job-filters">
<button class="button" data-filter="">Any</button>
<button class="button" data-filter="CEO">CEO</button>
<button class="button" data-filter="Founder">Founder</button>
<button class="button" data-filter="President">President</button>
<button class="button" data-filter="VP">VP</button>
<button class="button" data-filter="Director">Director</button>
<button class="button" data-filter="CTO">CTO</button>
</div>
</div>
<div class="ui-group">
<button-text>Country</button-text>
<div class="button-group js-radio-button-group" data-filter-group="country" id="country-filters">
<button class="button" data-filter="">Any</button>
<button class="button" data-filter="United States">USA</button>
<button class="button" data-filter="United Kingdom">UK</button>
<button class="button" data-filter="Canada">Canada</button>
<button class="button" data-filter="China">China</button>
<button class="button" data-filter="France">France</button>
</div>
</div>
</div>
<div class="ui-group">
<button-text>Sort By</button-text>
<div class="button-group sort-by-button-group" id="sort-by">
<button class="button" data-sort-value="name" >Name</button>
<button class="button" data-sort-value="location" >Location</button>
</div>
</div>
<div class="ui-group">
<div class="button-group order-by-button-group" id="sort-order">
<button class="button" data-sort-value="asc">Ascending</button>
<button class="button" data-sort-value="desc">Descending</button>
</div>
</div>
<button-text>{{ pagination.info }}</button-text>
<div class="pag-container">{{ pagination.links }}</div>
<div class="grid small">
{% for person in people %}
<a href="http://sweatshop.tech/person/{{person.idnum}}">
<div class="grid-item private small-size usa" location='{{person.location}}' name='{{person.name}}'>
<div class="card card-inverse" style="background-color: #333; border-color: #333; width: 20rem;">
<div style="background: #FFF; width: 100%">
<img class="card-img-top" src="{{person.image_url}}" alt="Card image cap">
</div>
<div class="card-block">
<h4 class="card-title name">{{person.name}}</h4>
<ul class="list-group list-group-flush;">
<li class="list-group-item funding">Title: {{person.title}}</li>
<li class="list-group-item">Location: {{person.location}}</li>
<li class="list-group-item">
{{"".join(person.description[:350].split("\\r\\n")) if person.description}}
</li>
</ul>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
<div class="pag-container">{{ pagination.links }}</div>
<script>
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
masonry: {
columnWidth: 100
}
});
var $ascending = true
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var filters = {};
var possiblefilters = ["country", "job-type"];
for(var i in possiblefilters) {
var j = possiblefilters[i];
var filterVal = getParameterByName(j);
if(filterVal)
filters[j] = filterVal;
}
var sortByVal = getParameterByName('sort');
if (!sortByVal)
sortByVal = "";
var sortOrder = getParameterByName('order');
if (!sortOrder)
sortOrder = "";
function applyFilters() {
var qstring = filters;
if(sortByVal) {
qstring['sort'] = sortByVal;
}
if(sortOrder) {
qstring['order'] = sortOrder;
}
window.location.href = "?" + $.param(qstring);
}
// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-value');
sortByVal = sortByValue;
applyFilters();
});
// bind order button click
$('.order-by-button-group').on( 'click', 'button', function() {
var sortOrderValue = $(this).attr('data-sort-value');
sortOrder = sortOrderValue;
applyFilters();
});
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
applyFilters()
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
/********** Update is-checked on page load **********/
// Update the countries filter
var jobs = $('#job-filters').children('button');
var jobInitValue = filters['job-type'];
if (jobInitValue == null) {
jobInitValue = "";
}
for (var i in jobs)
if (typeof jobs[i] === "object" && $(jobs[i]).is('button'))
if (jobs[i].attributes['data-filter'].value == jobInitValue)
$(jobs[i]).addClass('is-checked');
// Update the countries filter
var countries = $('#country-filters').children('button');
var countryInitValue = filters['country'];
if (countryInitValue == null) {
countryInitValue = "";
}
for (var i in countries)
if (typeof countries[i] === "object" && $(countries[i]).is('button'))
if (countries[i].attributes['data-filter'].value == countryInitValue)
$(countries[i]).addClass('is-checked');
// Updates the sort by values
var sortByVals = $('#sort-by').children('button');
var sortByValue = sortByVal;
if (sortByValue == "null" || sortByValue == "") {
sortByValue = "name";
}
for (var i in sortByVals)
if (typeof sortByVals[i] === "object" && $(sortByVals[i]).is('button'))
if (sortByVals[i].attributes['data-sort-value'].value == sortByValue)
$(sortByVals[i]).addClass('is-checked');
// Updates the sort order by values
var sortOrderVals = $('#sort-order').children('button');
var sortOrderValue = sortOrder;
if (sortOrderValue == "null" || sortOrderValue == "") {
sortOrderValue = "asc";
}
for (var i in sortOrderVals)
if (typeof sortOrderVals[i] === "object" && $(sortOrderVals[i]).is('button'))
if (sortOrderVals[i].attributes['data-sort-value'].value == sortOrderValue)
$(sortOrderVals[i]).addClass('is-checked');
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
</script>
</div>
</div>
<div class="outro">
© SWEatshop 2017
</div>
</body>
<div id="search">
<button type="button" class="close">×</button>
<form action="/search" method="get">
<input type="search" name="query" value="" placeholder="type keyword(s) here" />
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<script>
$(function () {
$('a[href="#search"]').on('click', function(event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
</script>
</html>