Skip to content

Commit

Permalink
Improve width and position of tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@fpigerre
fpigerre committed Jan 3, 2016
1 parent 9e60b8d commit 0dda267
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 61 deletions.
2 changes: 1 addition & 1 deletion _includes/table.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% assign section = include.variable-param %}
<div class="website-table" id="{{ section.id }}" style="display:none">
<div class="website-table" id="{{ section.id }}-table" style="display:none">
<table class="ui celled unstackable table">
<thead>
<tr>
Expand Down
3 changes: 2 additions & 1 deletion css/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ p {
}

.website-table {
position: relative;
width: 90vw;
z-index: 1000;
position: absolute;
}
110 changes: 55 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,183 +23,183 @@ <h2>Two Factor Auth (2FA)</h2>
</div>
</div>

<div class="ui equal width stackable grid container">
<div class="column">
<div id="backup" class="category">
<div class="ui stackable equal width five column grid container">
<div class="row">
<div id="backup" class="category column">
<h5 class="ui icon header">
<i class="circular disk outline icon"></i>
<small>Backup and Sync</small>
</h5>
{% include table.html variable-param=site.data.sections.backup %}
</div>
<div id="developer" class="category">
<div id="developer" class="category column">
<h5 class="ui icon header">
<i class="circular code icon"></i>
<small>Developer</small>
</h5>
{% include table.html variable-param=site.data.sections.developer %}
</div>
<div id="finance" class="category">
<div id="finance" class="category column">
<h5 class="ui icon header">
<i class="circular money icon"></i>
<small>Finance</small>
</h5>
{% include table.html variable-param=site.data.sections.finance %}
</div>
<div id="investing" class="category">
<div id="investing" class="category column">
<h5 class="ui icon header">
<i class="circular line chart icon"></i>
<small>Investing</small>
</h5>
{% include table.html variable-param=site.data.sections.investing %}
</div>
<div id="security" class="category">
<div id="security" class="category column">
<h5 class="ui icon header">
<i class="circular lock icon"></i>
<small>Security</small>
</h5>
{% include table.html variable-param=site.data.sections.security %}
</div>
{% include table.html variable-param=site.data.sections.backup %}
{% include table.html variable-param=site.data.sections.developer %}
{% include table.html variable-param=site.data.sections.finance %}
{% include table.html variable-param=site.data.sections.investing %}
{% include table.html variable-param=site.data.sections.security %}
</div>
<div class="column">
<div id="banking" class="category">
<div class="row">
<div id="banking" class="category column">
<h5 class="ui icon header">
<i class="circular dollar icon"></i>
<small>Banking</small>
</h5>
{% include table.html variable-param=site.data.sections.banking %}
</div>
<div id="domains" class="category">
<div id="domains" class="category column">
<h5 class="ui icon header">
<i class="circular globe icon"></i>
<small>Domains</small>
</h5>
{% include table.html variable-param=site.data.sections.domains %}
</div>
<div id="gaming" class="category">
<div id="gaming" class="category column">
<h5 class="ui icon header">
<i class="circular gamepad icon"></i>
<small>Gaming</small>
</h5>
{% include table.html variable-param=site.data.sections.gaming %}
</div>
<div id="other" class="category">
<div id="other" class="category column">
<h5 class="ui icon header">
<i class="circular lab icon"></i>
<small>Other</small>
</h5>
{% include table.html variable-param=site.data.sections.other %}
</div>
<div id="social" class="category">
<div id="social" class="category column">
<h5 class="ui icon header">
<i class="circular users icon"></i>
<small>Social</small>
</h5>
{% include table.html variable-param=site.data.sections.social %}
</div>
{% include table.html variable-param=site.data.sections.banking %}
{% include table.html variable-param=site.data.sections.domains %}
{% include table.html variable-param=site.data.sections.gaming %}
{% include table.html variable-param=site.data.sections.other %}
{% include table.html variable-param=site.data.sections.social %}
</div>
<div class="column">
<div id="cloud-computing" class="category">
<div class="row">
<div id="cloud-computing" class="category column">
<h5 class="ui icon header">
<i class="circular cloud icon"></i>
<small>Cloud Computing</small>
</h5>
{% include table.html variable-param=site.data.sections.cloud %}
</div>
<div id="education" class="category">
<div id="education" class="category column">
<h5 class="ui icon header">
<i class="circular book icon"></i>
<small>Education</small>
</h5>
{% include table.html variable-param=site.data.sections.education %}
</div>
<div id="health" class="category">
<div id="health" class="category column">
<h5 class="ui icon header">
<i class="circular medkit icon"></i>
<small>Health</small>
</h5>
{% include table.html variable-param=site.data.sections.health %}
</div>
<div id="payments" class="category">
<div id="payments" class="category column">
<h5 class="ui icon header">
<i class="circular payment icon"></i>
<small>Payments</small>
</h5>
{% include table.html variable-param=site.data.sections.payments %}
</div>
<div id="transport" class="category">
<div id="transport" class="category column">
<h5 class="ui icon header">
<i class="circular car icon"></i>
<small>Transport</small>
</h5>
{% include table.html variable-param=site.data.sections.transport %}
</div>
{% include table.html variable-param=site.data.sections.cloud %}
{% include table.html variable-param=site.data.sections.education %}
{% include table.html variable-param=site.data.sections.health %}
{% include table.html variable-param=site.data.sections.payments %}
{% include table.html variable-param=site.data.sections.transport %}
</div>
<div class="column">
<div id="communication" class="category">
<div class="row">
<div id="communication" class="category column">
<h5 class="ui icon header">
<i class="circular comment icon"></i>
<small>Communication</small>
</h5>
{% include table.html variable-param=site.data.sections.communication %}
</div>
<div id="email" class="category">
<div id="email" class="category column">
<h5 class="ui icon header">
<i class="circular mail icon"></i>
<small>Email</small>
</h5>
{% include table.html variable-param=site.data.sections.email %}
</div>
<div id="hosting" class="category">
<div id="hosting" class="category column">
<h5 class="ui icon header">
<i class="circular sitemap icon"></i>
<small>Hosting/VPS</small>
</h5>
{% include table.html variable-param=site.data.sections.hosting %}
</div>
<div id="remote" class="category">
<div id="remote" class="category column">
<h5 class="ui icon header">
<i class="circular desktop icon"></i>
<small>Remote Access</small>
</h5>
{% include table.html variable-param=site.data.sections.remote %}
</div>
<div id="utilities" class="category">
<div id="utilities" class="category column">
<h5 class="ui icon header">
<i class="circular phone icon"></i>
<small>Utilities</small>
</h5>
{% include table.html variable-param=site.data.sections.utilities %}
</div>
{% include table.html variable-param=site.data.sections.communication %}
{% include table.html variable-param=site.data.sections.email %}
{% include table.html variable-param=site.data.sections.hosting %}
{% include table.html variable-param=site.data.sections.remote %}
{% include table.html variable-param=site.data.sections.utilities %}
</div>
<div class="column">
<div id="cryptocurrencies" class="category">
<div class="row">
<div id="cryptocurrencies" class="category column">
<h5 class="ui icon header">
<i class="circular bitcoin icon"></i>
<small>Cryptocurrencies</small>
</h5>
{% include table.html variable-param=site.data.sections.bitcoin %}
</div>
<div id="entertainment" class="category">
<div id="entertainment" class="category column">
<h5 class="ui icon header">
<i class="circular music icon"></i>
<small>Entertainment</small>
</h5>
{% include table.html variable-param=site.data.sections.entertainment %}
</div>
<div id="identity" class="category">
<div id="identity" class="category column">
<h5 class="ui icon header">
<i class="circular user icon"></i>
<small>Identity Management</small>
</h5>
{% include table.html variable-param=site.data.sections.identity %}
</div>
<div id="retail" class="category">
<div id="retail" class="category column">
<h5 class="ui icon header">
<i class="circular cart icon"></i>
<small>Retail</small>
</h5>
{% include table.html variable-param=site.data.sections.retail %}
</div>
{% include table.html variable-param=site.data.sections.bitcoin %}
{% include table.html variable-param=site.data.sections.entertainment %}
{% include table.html variable-param=site.data.sections.identity %}
{% include table.html variable-param=site.data.sections.retail %}
</div>
</div>
</div>
9 changes: 5 additions & 4 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@ function getStyle(element, styleProp) {
}

$('.category').click(function () {
console.log($(this).find('.website-table').css('display'));
if ($(this).find('.website-table').css('display') == 'block') {
$(this).find('.website-table').css('display', 'none');
var id = $(this).attr('id');
var table = $('#' + id + '-table');
if (table.css('display') == 'block') {
table.css('display', 'none');
} else {
$('*.website-table').css('display', 'none');
$(this).find('.website-table').css('display', 'block');
table.css('display', 'block');
}
});

0 comments on commit 0dda267

Please sign in to comment.