Skip to content

Commit

Permalink
Scroll to categories and open tables when linked
Browse files Browse the repository at this point in the history 
When a category is clicked, scroll to that category. If a section (id)
link is present in the URL, open the category and table pertaining to
that link.
  • Loading branch information
@fpigerre
fpigerre committed Jan 11, 2016
1 parent a383820 commit 645a0c8
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 83 deletions.
134 changes: 74 additions & 60 deletions _includes/table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% assign section_file = site.data[section.id] %}
<div class="website-table" id="{{ section.id }}-table" style="display:none">
<div class="desktop-section">
<table class="ui celled table">
<table class="ui celled table content-wrapper">
<thead>
<tr>
<th class="single line"><h3>{{ section.title }}</h3></th>
Expand Down Expand Up @@ -112,77 +112,91 @@
</table>
</div>
<div class="mobile-section">
<div class="jets-content">
{% for website in section_file.websites %}
{% if website.status %}
<div class="main progress">
<div class="left">
<a href="{{ website.url }}" class="name">{{ website.name }}</a>
{% include exception.html website=website %}
<p>IN PROGRESS!</p>

<a href="{{ website.status }}" target="_blank">
<i class="external url link large icon"></i> Current Status
</a>
</div>
<div class="right">
<div class="content-wrapper">
<div class="jets-content">
{% for website in section_file.websites %}
{% if website.status %}
<div class="main progress">
<div class="left">
{% if website.img %}
<noscript><img src="/img/{{ section.id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
<img src="/img/placeholder.png" data-src="/img/{{ section.id }}/{{ website.img }}" class="icon"
alt="{{ website.name }}">
{% endif %}
<a href="{{ website.url }}" class="name">{{ website.name }}</a>
{% include exception.html website=website %}
<p>IN PROGRESS!</p>

<a class="ui twitter mini button"
href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{page.tweet_progress|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
target="_blank"><i class="twitter icon"></i> {{page.link_progress_mobile}}</a>
<a href="{{ website.status }}" target="_blank">
<i class="external url link large icon"></i> Current Status
</a>
</div>
<div class="right">
<a class="ui twitter mini button"
href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{page.tweet_progress|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
target="_blank"><i class="twitter icon"></i> {{page.link_progress_mobile}}</a>
</div>
</div>
</div>
{% elsif website.tfa %}
<div class="main positive">
<div class="left">
<a href="{{ website.url }}" class="name">{{ website.name }}</a>
{% include exception.html website=website %}
<br>
<br>
{% elsif website.tfa %}
<div class="main positive">
<div class="left">
{% if website.img %}
<noscript><img src="/img/{{ section.id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
<img src="/img/placeholder.png" data-src="/img/{{ section.id }}/{{ website.img }}" class="icon"
alt="{{ website.name }}">
{% endif %}
<a href="{{ website.url }}" class="name">{{ website.name }}</a>
{% include exception.html website=website %}
<br>

{% if website.sms %}
<p>SMS is supported!</p>
{% endif %}
{% if website.sms %}
<p>SMS is supported!</p>
{% endif %}

{% if website.phone %}
<p>Phone is supported!</p>
{% endif %}
{% if website.phone %}
<p>Phone is supported!</p>
{% endif %}

{% if website.email %}
<p>Email is supported!</p>
{% endif %}
{% if website.email %}
<p>Email is supported!</p>
{% endif %}

{% if website.hardware %}
<p>Hardware is supported!</p>
{% endif %}
{% if website.hardware %}
<p>Hardware is supported!</p>
{% endif %}

{% if website.software %}
<p>Software is supported!</p>
{% if website.software %}
<p>Software is supported!</p>
{% endif %}
</div>
{% if website.doc %}
<div class="right">
<a href="{{ website.doc }}" class="ui twitter mini button"><i class="large book icon"></i> DOCS</a>
</div>
{% endif %}
</div>
{% if website.doc %}
<div class="right">
<a href="{{ website.doc }}" class="ui twitter mini button"><i class="large book icon"></i> DOCS</a>
</div>
{% endif %}
</div>
{% else %}
<div class="main negative">
<div class="left">
<a href="{{ website.url }}" class="name">{{ website.name }}</a>

<p>NO 2FA</p>
</div>
{% if website.twitter %}
<div class="right">
<a class="ui twitter mini button"
href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{page.tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
target="_blank"><i class="twitter icon"></i> {{page.link_mobile}}</a>
{% else %}
<div class="main negative">
<div class="left">
{% if website.img %}
<noscript><img src="/img/{{ section.id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
<img src="/img/placeholder.png" data-src="/img/{{ section.id }}/{{ website.img }}" class="icon"
alt="{{ website.name }}">
{% endif %}
<a href="{{ website.url }}" class="name">{{ website.name }}</a>
<p>NO 2FA</p>
</div>
{% if website.twitter %}
<div class="right">
<a class="ui twitter mini button"
href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{page.tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
target="_blank"><i class="twitter icon"></i> {{page.link_mobile}}</a>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
34 changes: 22 additions & 12 deletions css/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ p {
.right {
display: inline-block;
height: 100%;
line-height: 2em;
}

.left {
Expand Down Expand Up @@ -154,16 +155,18 @@ input[type=search] {
}

.mobile-section {
border: 1px groove rgba(34, 36, 38, 0.14902);
border-radius: 5px;
display: none;
margin: 40px auto;
width: 90%;

.jets-content > div {
border-bottom: 1px groove rgba(34, 36, 38, 0.14902);
overflow: auto;
padding: 2em;
.content-wrapper {
border: 1px groove rgba(34, 36, 38, 0.14902);
border-radius: 5px;
margin: 40px auto;
width: 90%;

.jets-content > div {
border-bottom: 1px groove rgba(34, 36, 38, 0.14902);
padding: 2em;
}
}

.button {
Expand All @@ -182,12 +185,19 @@ input[type=search] {
}
}

.ui.table td.icon {
text-align: center;
width: 10%;
.ui.table td {
&.main {
line-height: 2em;
}

&.icon {
text-align: center;
width: 10%;
}
}

td img.icon {
td img.icon,
.left img {
-webkit-box-shadow: 0 0 0 .1em rgba(0, 0, 0, .1) inset;
box-shadow: 0 0 0 .1em rgba(0, 0, 0, .1) inset;
background-color: white;
Expand Down
61 changes: 50 additions & 11 deletions js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
// When DOM elements are ready, excluding images
$(document).ready(function () {
// Check if URL references specific category
if (window.location.hash && window.location.hash.indexOf('#') > -1) {
openCategory(window.location.hash.substring(1));
}

// Unveil images 50px before they appear
$('img').unveil(50);
});
Expand All @@ -16,6 +22,7 @@ var jets = new Jets({
contentTag: '.jets-content',
didSearch: function (searchPhrase) {
$('.category h5 i').removeClass('active-icon');
var content = $('.jets-content');
// Non-strict comparison operator is used to allow for null
if (searchPhrase == '') {
$('*.website-table').css('display', 'none');
Expand All @@ -24,7 +31,8 @@ var jets = new Jets({
} else {
$('.category').hide();
$('*.website-table').css('display', 'block');
$('.jets-content').each(function () {
content.parent().show();
content.each(function () {
// Hide table when all rows are hidden by Jets
if ($(this).children(':hidden').length === $(this).children().length) $(this).parent().hide();
});
Expand All @@ -35,14 +43,45 @@ var jets = new Jets({

// Display tables and color category selectors
$('.category').click(function () {
var icon = $(this).find('h5 i');
var table = $('#' + $(this).attr('id') + '-table');
if (table.css('display') == 'block') {
table.css('display', 'none');
} else {
$('*.website-table').css('display', 'none');
$('.category h5 i').removeClass('active-icon');
table.css('display', 'block');
}
icon.hasClass('active-icon') ? icon.removeClass('active-icon') : icon.addClass('active-icon');
var name = $(this).attr('id');
isOpen(name) ? closeCategory(name) : openCategory(name);
});

/**
* Checks if a category is open
*
* @param category The id of a category as a string
* @returns {*|jQuery} A true or false value, whether the category is open
*/
function isOpen(category) {
return $('#' + category + ' h5 i').hasClass('active-icon');
}
/**
* Opens a category, ensures the icon is active and scrolls to the icon
*
* @param category The id of a category as a string
*/
function openCategory(category) {
// Close all active categories
$('.category h5 i').removeClass('active-icon');
$('*.website-table').css('display', 'none');

var icon = $('#' + category + ' h5 i');
icon.addClass('active-icon');
$('#' + category + '-table').css('display', 'block');

// Scroll smoothly to category selector
$('html, body').animate({
scrollTop: icon.offset().top - 25
}, 1000);
}

/**
* Closes a category and ensures the icon is inactive
*
* @param category The id of a category as a sring
*/
function closeCategory(category) {
$('#' + category + ' h5 i').removeClass('active-icon');
$('#' + category + '-table').css('display', 'none');
}

0 comments on commit 645a0c8

Please sign in to comment.