Commit 3dcf8b2e authored by David Haynes's avatar David Haynes 🙆

Proper masonstrap support

- what was going on here
parent 0ad460ce
...@@ -26,11 +26,9 @@ ...@@ -26,11 +26,9 @@
<meta name="twitter:image" content="{{ site.url }}/assets/img/SRCT_square_green_sm.png"> <meta name="twitter:image" content="{{ site.url }}/assets/img/SRCT_square_green_sm.png">
<!-- Load stylesheets --> <!-- Load stylesheets -->
<link rel="stylesheet" href="https://srct.gmu.io/masonstrap/css/masonstrap.min.css" /> <link rel="stylesheet" href="https://srct.gmu.io/masonstrap/css/masonstrap.min.css"
/>
<link href="/assets/css/style.css" rel="stylesheet"> <link href="/assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.pride.codes/css/bar_helpers.css">
<!-- Load favicon --> <!-- Load favicon -->
<link rel="icon" href="/assets/img/favicon.ico"> <link rel="icon" href="/assets/img/favicon.ico"> {% if page.tablesorter_css %}
{% if page.tablesorter_css %} <link rel="stylesheet" href="/assets/css/tablesorter.css"> {% endif %}
<link rel="stylesheet" href="/assets/css/theme.bootstrap_4.min.css">
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="/assets/js/functions.js"></script> <script src="/assets/js/functions.js"></script>
<script src="https://srct.gmu.io/masonstrap/js/masonstrap.min.js"></script>
...@@ -7,29 +7,47 @@ tablesorter_css: true ...@@ -7,29 +7,47 @@ tablesorter_css: true
<!-- Exec Table --> <!-- Exec Table -->
<h3> <h3>
<strong><a href="http://wiki.srct.gmu.edu/Executive_Board">Executive Board</a></strong> <strong>
<a href="http://wiki.srct.gmu.edu/Executive_Board">Executive Board</a>
</strong>
</h3> </h3>
<table class="table table-hover text-center"> <table class="table table-hover text-center">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th><h4>Name</h4></th> <th>
<th><h4>Position</h4></th> <h4>Name</h4>
<th><h4>Email</h4></th> </th>
<th>
<h4>Position</h4>
</th>
<th>
<h4>Email</h4>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for member in site.data.people %} {% for member in site.data.people %} {% if member.exec.status == true %}
{% if member.exec.status == true %} <tr>
<tr> <td>
<td><img class="exec-image" src="{{ member.email | get_gravatar }}" alt="gravatar image"></td> <img class="exec-image" src="{{ member.email | get_gravatar }}" alt="gravatar image">
<td class="align-middle"><h5>{{ member.name }}</h5></td> </td>
<td class="align-middle"><h5><a href="{{ member.exec.link }}">{{ member.exec.position }}</a></h5></td> <td class="align-middle">
<td class="align-middle"><h5><a href="mailto:{{ member.email }}">{{ member.email }}</a></h5></td> <h5>{{ member.name }}</h5>
</tr> </td>
{% endif %} <td class="align-middle">
{% endfor %} <h5>
<a href="{{ member.exec.link }}">{{ member.exec.position }}</a>
</h5>
</td>
<td class="align-middle">
<h5>
<a href="mailto:{{ member.email }}">{{ member.email }}</a>
</h5>
</td>
</tr>
{% endif %} {% endfor %}
</tbody> </tbody>
</table> </table>
...@@ -37,53 +55,70 @@ tablesorter_css: true ...@@ -37,53 +55,70 @@ tablesorter_css: true
<div class="col-md-6"> <div class="col-md-6">
<!-- Devs --> <!-- Devs -->
<h3> <h3>
<strong><a href="http://wiki.srct.gmu.edu/Developers">Developers</a></strong> <strong>
<a href="http://wiki.srct.gmu.edu/Developers">Developers</a>
</strong>
</h3> </h3>
<table id="devs-table" class="table table-hover text-center"> <table id="devs-table" class="table table-hover text-center">
<thead> <thead>
<tr> <tr>
<th data-sorter="false"></th> <th data-sorter="false"></th>
<th class="sorter-last-name"><h4>Name</h4></th> <th class="sorter-last-name">
<th data-sorter="false"><h4>Email</h4></th> <h4>Name</h4>
</th>
<th data-sorter="false">
<h4>Email</h4>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for member in site.data.people %} {% for member in site.data.people %} {% if member.alum == false and member.exec.position
{% if member.alum == false and member.exec.position != 'Faculty Advisor' %} != 'Faculty Advisor' %}
<tr> <tr>
<td><img class="member-image" src="{{ member.email | get_gravatar }}" alt="gravatar image"></td> <td>
<td class="align-middle">{{ member.name }}</td> <img class="member-image" src="{{ member.email | get_gravatar }}" alt="gravatar image">
<td class="align-middle"><a href="mailto:{{ member.email }}">{{ member.email }}</a></td> </td>
</tr> <td class="align-middle">{{ member.name }}</td>
{% endif %} <td class="align-middle">
{% endfor %} <a href="mailto:{{ member.email }}">{{ member.email }}</a>
</td>
</tr>
{% endif %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<!-- Alum --> <!-- Alum -->
<h3> <h3>
<strong><a href="#">Alumni</a></strong> <strong>
<a href="#">Alumni</a>
</strong>
</h3> </h3>
<table id="alums-table" class="table table-hover text-center"> <table id="alums-table" class="table table-hover text-center">
<thead> <thead>
<tr> <tr>
<th data-sorter="false"></th> <th data-sorter="false"></th>
<th class="sorter-last-name"><h4>Name</h4></th> <th class="sorter-last-name">
<th data-sorter="false"><h4>Email</h4></th> <h4>Name</h4>
</th>
<th data-sorter="false">
<h4>Email</h4>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for member in site.data.people %} {% for member in site.data.people %} {% if member.alum == true %}
{% if member.alum == true %} <tr>
<tr> <td>
<td><img class="member-image" src="{{ member.email | get_gravatar }}" alt="gravatar image"></td> <img class="member-image" src="{{ member.email | get_gravatar }}" alt="gravatar image">
<td class="align-middle">{{ member.name }}</td> </td>
<td class="align-middle"><a href="mailto:{{ member.email }}">{{ member.email }}</a></td> <td class="align-middle">{{ member.name }}</td>
</tr> <td class="align-middle">
{% endif %} <a href="mailto:{{ member.email }}">{{ member.email }}</a>
{% endfor %} </td>
</tr>
{% endif %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -91,31 +126,35 @@ tablesorter_css: true ...@@ -91,31 +126,35 @@ tablesorter_css: true
<script src="/assets/js/jquery.tablesorter.min.js" type="text/javascript"></script> <script src="/assets/js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script> <script>
$(function() { $(function () {
// from https://stackoverflow.com/questions/38209618/ // from https://stackoverflow.com/questions/38209618/
// response there by the person who maintains the project // response there by the person who maintains the project
$.tablesorter.addParser({ $.tablesorter.addParser({
id: 'last-name', id: 'last-name',
is: function() { is: function () {
return false; return false;
}, },
format: function(str) { format: function (str) {
var parts = (str || '').split(/\s+/), var parts = (str || '').split(/\s+/),
last = parts.pop(); last = parts.pop();
parts.unshift(last); parts.unshift(last);
return parts.join(' '); return parts.join(' ');
}, },
// set type, either numeric or text // set type, either numeric or text
type: 'text' type: 'text'
}); });
$("#devs-table").tablesorter({ $("#devs-table").tablesorter({
theme: "bootstrap", theme: "bootstrap",
sortList: [[1,0]] sortList: [
}); [1, 0]
$("#alums-table").tablesorter({ ]
theme: "bootstrap", });
sortList: [[1,0]] $("#alums-table").tablesorter({
theme: "bootstrap",
sortList: [
[1, 0]
]
});
}); });
});
</script> </script>
/* Sticky footer styles */ /* Sticky footer styles */
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
body { body {
/* Margin bottom by footer height */ /* Margin bottom by footer height */
margin-bottom: 120px; margin-bottom: 120px;
} }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -17,29 +20,37 @@ body { ...@@ -17,29 +20,37 @@ body {
} }
/* Custom page CSS */ /* Custom page CSS */
a[name] { a[name] {
padding-top: 50px; padding-top: 50px;
} }
@font-face { @font-face {
font-family: 'Xolonium'; font-family: 'Xolonium';
src: url('../fonts/Xolonium-Regular.otf') format("opentype"); src: url('../fonts/Xolonium-Regular.otf') format("opentype");
} }
.xolonium { .xolonium {
font-family: Xolonium; font-family: Xolonium;
} }
#srct-logo-home { #srct-logo-home {
padding-top: 1rem; padding-top: 1rem;
} }
.srct-logo { .srct-logo {
height: 10rem; height: 10rem;
width: 10rem; width: 10rem;
} }
.srct-title { .srct-title {
color: white; color: white;
font-size: 2rem; font-size: 2rem;
padding-top: 0.35rem; padding-top: 0.35rem;
padding-left: 0.5rem; padding-left: 0.5rem;
text-shadow: 1px 1px 6px #333;} text-shadow: 1px 1px 6px #333;
}
.jumbostyle { .jumbostyle {
background: url(/assets/img/meeting.jpg) no-repeat; background: url(/assets/img/meeting.jpg) no-repeat;
background-size: cover; background-size: cover;
...@@ -49,29 +60,35 @@ a[name] { ...@@ -49,29 +60,35 @@ a[name] {
padding-bottom: 100px; padding-bottom: 100px;
border-radius: unset; border-radius: unset;
} }
.srctlogo { .srctlogo {
width: 10px; width: 10px;
} }
.smidge { .smidge {
padding-bottom: 10px; padding-bottom: 10px;
} }
.smidgen { .smidgen {
padding-bottom: 5px; padding-bottom: 5px;
} }
.people-left { .people-left {
padding-left:0; padding-left: 0;
padding-right:0; padding-right: 0;
} }
.people-right { .people-right {
padding-right:0; padding-right: 0;
padding-left:0; padding-left: 0;
} }
@media(min-width:992px){
@media(min-width:992px) {
.people-left { .people-left {
padding-right:15px; padding-right: 15px;
} }
.people-right { .people-right {
padding-left:15px; padding-left: 15px;
} }
} }
...@@ -99,47 +116,58 @@ a[name] { ...@@ -99,47 +116,58 @@ a[name] {
* A cool little hack I found to try to allow a responsive Google Cal: * A cool little hack I found to try to allow a responsive Google Cal:
* http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/ * http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/
**/ **/
.googlecal-container { .googlecal-container {
position: relative; position: relative;
padding-bottom: 56.25%; padding-bottom: 56.25%;
padding-top: 30px; padding-top: 30px;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
.googlecal-container iframe { .googlecal-container iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/** Projects Page **/ /** Projects Page **/
.project-entry { .project-entry {
margin-bottom:10px; margin-bottom: 10px;
} }
.project-icon { .project-icon {
text-align:center; text-align: center;
display: block; display: block;
font-size:100px; font-size: 100px;
margin:0 auto; margin: 0 auto;
padding-bottom: 10px; padding-bottom: 10px;
} }
/* can't you extend CSS classes? */ /* can't you extend CSS classes? */
.project-link { .project-link {
/* Padding and margin business because of the static header */ /* Padding and margin business because of the static header */
padding-top:50px !important; padding-top: 50px !important;
margin-top:-50px; margin-top: -50px;
display:block; display: block;
color:#000; color: #000;
} }
.project-link:hover, .project-link:active, .project-link:focus {
.project-link:hover,
.project-link:active,
.project-link:focus {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
} }
.project-icon-stacked { .project-icon-stacked {
font-size:55px; font-size: 55px;
} }
.project-role { .project-role {
width: 150px; width: 150px;
display: inline-block; display: inline-block;
...@@ -150,10 +178,12 @@ a[name] { ...@@ -150,10 +178,12 @@ a[name] {
background: transparent; background: transparent;
font-size: 0.9em; font-size: 0.9em;
} }
.project-text { .project-text {
margin-top:10px; margin-top: 10px;
padding-bottom:15px; padding-bottom: 15px;
} }
#banner { #banner {
padding-top: 2rem; padding-top: 2rem;
background: #e4e6d7; background: #e4e6d7;
...@@ -161,18 +191,22 @@ a[name] { ...@@ -161,18 +191,22 @@ a[name] {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 22.5px; font-size: 22.5px;
} }
.page-header { .page-header {
margin-top:0; margin-top: 0;
border-bottom:none; border-bottom: none;
} }
.white-branding { .white-branding {
color: black; color: black;
background-color: white; background-color: white;
} }
.green-branding { .green-branding {
color: white; color: white;
background-color: #006633; background-color: #006633;
} }
.black-branding { .black-branding {
color: white; color: white;
background-color: black; background-color: black;
......
.tablesorter-bootstrap {
width: 100%
}
.tablesorter-bootstrap tfoot td,
.tablesorter-bootstrap tfoot th,
.tablesorter-bootstrap thead td,
.tablesorter-bootstrap thead th {
font: 14px/20px Arial, Sans-serif;
font-weight: 700;
padding: 4px;
margin: 0 0 18px
}
.tablesorter-bootstrap thead .tablesorter-header {
background-position: right 5px center;
background-repeat: no-repeat;
cursor: pointer;
white-space: normal
}
.tablesorter-bootstrap:not(.table-dark) tfoot td,
.tablesorter-bootstrap:not(.table-dark) tfoot th,
.tablesorter-bootstrap:not(.table-dark) thead:not(.thead-dark) .tablesorter-header {
background-color: #fff
}
.tablesorter-bootstrap thead .sorter-false {
cursor: default;
background-image: none
}
.tablesorter-bootstrap .tablesorter-header-inner {
position: relative;
padding: 4px 18px 4px 4px
}
.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
padding: 4px
}
.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)
}
.tablesorter-bootstrap thead .tablesorter-headerAsc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)
}
.tablesorter-bootstrap thead .tablesorter-headerDesc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)
}
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerUnSorted:not(.sorter-false),
.tablesorter-bootstrap.table-dark thead .tablesorter-headerUnSorted:not(.sorter-false) {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)
}
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerAsc,
.tablesorter-bootstrap.table-dark thead .tablesorter-headerAsc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)
}
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerDesc,
.tablesorter-bootstrap.table-dark thead .tablesorter-headerDesc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)
}
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover~tr.tablesorter-hasChildRow.odd~.tablesorter-childRow.odd>td {
background-color: #f9f9f9
}
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even:hover>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.hover>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd:hover>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover~.tablesorter-childRow.even>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover~.tablesorter-childRow.odd>td {
background-color: #f5f5f5
}
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even>td,
.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover~tr.tablesorter-hasChildRow.even~.tablesorter-childRow.even>td {
background-color: #