dsm-portfolio-theme 0.1.4 → 0.3.0

data/_layouts/summary.html

@@ -1,62 +1,81 @@
 ---
 layout: default
 ---
-<div class="">
-    <div class="">
-        <a class="" href="{{ '/' | relative_url }}">Portfolio</a> &gt;
-        {{ page.project_title }} &gt;
-        {{ page.type | capitalize }}
-    </div>
-    <div class="">
+
+{% include breadcrumbs.html %}
+<div class="row">
+    <div class="col">
         <h1>
             {{ page.project_title }}
         </h1>
     </div>
 </div>
-<div class="">
-    <div class="">
-        <h3>
-            Summary
-        </h3>
-        {{ content }}
+<div class="row">
+    <div class="col">
+        <div class="row">
+            <div class="container">
+                <h3>
+                    Summary
+                </h3>
+                {{ content }}
+            </div>
+        </div>
     </div>
-    <div class="">
-        <div class="">
-            <h3>
-                Length
-            </h3>
-            {{ page.length }}
+    <div class="col">
+        {% if page.length %}
+        <div class="row">
+            <div class="container mb-3">
+                <h3>
+                    Length
+                </h3>
+                {{ page.length }}
+            </div>
         </div>
-        <div class="">
-            <h3>
-                Tags
-            </h3>
-            <ul class="">
-                {% for tag in page.tags %}
-                    <li>
-                        {{ tag }}
-                    </li>
-                {% endfor %}
-            </ul>
+        {% endif %}
+        {% if page.tags.size > 0 %}
+        <div class="row">
+            <div class="container">
+                <h3>
+                    Tags
+                </h3>
+                <ul>
+                    {% for tag in page.tags %}
+                        <li>
+                            {{ tag }}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
-        <div class="">
-            <h3>
-                External Resources
-            </h3>
-            <ul class="">
-                {% for external_resource in page.external_resources %}
-                    <li>
-                        <a class="" href="{{ external_resource.url }}" target="_blank">
-                            {{ external_resource.title }}
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
+        {% endif %}
+        {% if page.external_resources.size > 0 %}
+        <div class="row">
+            <div class="container">
+                <h3>
+                    External Resources
+                </h3>
+                <ul>
+                    {% for external_resource in page.external_resources %}
+                        <li>
+                            <a href="{{ external_resource.url }}" target="_blank">
+                                {{ external_resource.title }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
+        {% endif %}
     </div>
-    {% if page.notebook_file %}
-        <div class="">
-            {% jupyter_notebook site.notebook_base_path | append: page.notebook_file | relative_url %}
+</div>
+{% if page.notebook_file %}
+<div class="row">
+    <div class="col">
+        <div class="row">
+            <div class="container">
+                {% jupyter_notebook site.notebook_base_path | append: page.notebook_file | relative_url %}
+            </div>
         </div>
-    {% endif %}
-</div>
+    </div>
+</div>  
+{% endif %}

data/_layouts/vignette.html

@@ -2,43 +2,78 @@
 layout: default
 ---
 
-<!-- Vignette tabs -->
-<div class="o-vignette-tabs">
-    <h3>
-        Iterations
-    </h3>
-    <ul class="o-vignette-tabs__container">
-        {% for vignette in page.vignettes %}
-            {% if forloop.index == 1 %}
-                {% assign classString = 'o-vignette-tabs__tab--active' %}
-            {% else %}
-                {% assign classString = '' %}
+{% include breadcrumbs.html %}
+{% assign linked_project = site.data.projects | where:"id", page.project_code | first %}
+{% if page.project_code and linked_project %}
+    <div class="container mb-4">
+            <p class="lead">
+                Linked to academic project <a href="{{ '/projects#' | append: page.project_code | relative_url }}">{{ page.project_code }}</a>
+                {% if linked_project.deadline %}
+                    with a deadline of {{ linked_project.deadline }}
+                {% endif %}
+            </p>
+            {% if linked_project.description %}
+                <em>"{{ linked_project.description }}"</em>
             {% endif %}
-            <li id="tab-{{ forloop.index | minus: 1 }}" class="o-vignette-tabs__tab {{ classString }}" onclick="javascript:$vignette.updateVignette({{ forloop.index | minus: 1 }})">
-                {{ forloop.index }} 
-            </li>
-        {% endfor %}
-    </ul>
+    </div>
+{% else %}
+    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+    <strong>There is no academic project linked.</strong> This is assumed to be a personal project. See <a href="{{ '/about' | relative_url }}">about</a> for more information.
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+{% endif %}
+<div class="row">
+    <div class="col">
+        <div class="table-responsive">
+            <table class="table table-hover" id="table">
+                <!-- Dynamically generated content -->
+            </table>
+        </div>
+    </div>
 </div>
-
-<!-- Competencies block -->
-<div class="o-vignette-table">
-    <h3>
-        Competencies
-    </h3>
-    <table id="table">
-        <!-- Dynamically generated content -->
-    </table>
+<div class="row">
+    <div class="col">
+        {{ content }}
+    </div>
 </div>
-
-<!-- Vignette content blocks -->
-<div class="o-vignette-blocks">
-    {{ content }}
+<div class="row mt-4">
+    <div class="col">
+        <nav aria-label="...">
+            <ul class="pagination">
+                <li id="tab-previous" class="page-item disabled">
+                    <a class="page-link" onclick="javascript:$vignette.previousVignette()">Previous</a>
+                </li>
+                {% for vignette in page.vignettes %}
+                    {% if forloop.index == 1 %}
+                        {% assign classString = 'page-item active' %}
+                    {% else %}
+                        {% assign classString = 'page-item' %}
+                    {% endif %}
+                    <li id="tab-{{ forloop.index | minus: 1 }}" class="{{ classString }}">
+                        <a class="page-link" onclick="javascript:$vignette.updateVignette({{ forloop.index | minus: 1 }})">
+                            {{ forloop.index }} 
+                        </a>
+                    </li>
+                {% endfor %}
+                {% if page.vignettes.size > 0 %}
+                    {% assign classString = 'page-item' %}
+                {% else %}
+                    {% assign classString = 'page-item disabled' %}
+                {% endif %}
+                <li id="tab-next" class="{{ classString }}">
+                    <a class="page-link" onclick="javascript:$vignette.nextVignette()">Next</a>
+                </li>
+            </ul>
+        </nav>
+    </div>
 </div>
-
-<!-- Inject data variables into page context for JavaScript -->
 <script>
-    // Store raw data in ubiquitous object.
-    this.window['vignettes'] = {{ page.vignettes | jsonify }};
-    this.window['targets'] = {{ page.targets | jsonify }};
+    // Inject data variables into page context for JavaScript.
+    this.window['vignette_vignettes'] = {{ page.vignettes | jsonify }};
+    this.window['vignette_targets'] = {{ page.targets | jsonify }};
+    this.window['vignette_c_url'] = "{{ '/competencies' | relative_url }}";
+    this.window['vignette_sort_competencies'] = true;
+    this.window['vignette_mark_table'] = true;
 </script>

data/assets/scripts/vignette.js

@@ -12,10 +12,14 @@ $vignette = (function () {
     var _targetsHit = [];
     var _index      = 0;
     var _tableData  = [];
+    var _cUrl       = '/competencies';
+    var _markTable  = false; 
 
     // UI elements
     var _blocks     = [];
     var _tabs       = [];
+    var _next       = {};
+    var _previous   = {};
     var _table      = undefined;
 
     /**
@@ -26,8 +30,10 @@ $vignette = (function () {
      */
     function initialize() {
         // Presume access to page variables.
-        _vignettes = window['vignettes'];
-        _targets   = window['targets'];
+        _vignettes = window['vignette_vignettes'];
+        _targets   = window['vignette_targets'];
+        _cUrl      = window['vignette_c_url'];
+        _markTable = window['vignette_mark_table'];
 
         // Defensive checking.
         if(!_vignettes) {
@@ -59,8 +65,11 @@ $vignette = (function () {
         // Expose functions.
         return {
             dump: _dump,
+            combine: _combine,
             updateVignette: _updateVignette,
-            combine: _combine
+            nextVignette: _nextVignette,
+            previousVignette: _previousVignette,
+            sort: _sortCurrentVignette
         };
     }
 
@@ -69,12 +78,18 @@ $vignette = (function () {
      * for manipulation.
      */
     function registerUI() {
-        for(var i = 0; i < vignettes.length; i++) {
+        // Get omnipresent pagination components.
+        _previous = document.getElementById('tab-previous');
+        _next = document.getElementById('tab-next');
+
+        // Get all dynamic elements.
+        for(var i = 0; i < _vignettes.length; i++) {
             // Get tab and content block elements.
             _blocks.push(document.getElementById('block-' + i.toString()));
             _tabs.push(document.getElementById('tab-' + i.toString()));
         }
 
+        // Get table.
         _table = document.getElementById('table');
     }
 
@@ -86,30 +101,56 @@ $vignette = (function () {
      * @param {*} index
      * @returns
      */
-    function _updateVignette(index) {
+    function _updateVignette(index, override = false) {
         // Redundancy check.
-        if(_index === index) {
+        if(_index === index && !override) {
             return;
         }
 
+        let activeClass = 'active';
+
         // Update previous tab element.
-        _tabs[_index].classList.remove('o-vignette-tabs__tab--active');
+        _tabs[_index].classList.remove(activeClass);
 
         // Update previous block element.
-        _blocks[_index].classList.remove('o-vignette-blocks__block--active');
+        _blocks[_index].classList.remove(activeClass);
+
+        if(index === 0) {
+            _previous.classList.add('disabled');
+        } else {
+            _previous.classList.remove('disabled');
+        }
+
+        if(index === _vignettes.length - 1) {
+            _next.classList.add('disabled');
+        } else {
+            _next.classList.remove('disabled');
+        }
         
         // Update data model.
         _index = index;
 
         // Update tab element.
-        _tabs[_index].classList.add('o-vignette-tabs__tab--active');
+        _tabs[_index].classList.add(activeClass);
 
         // Update block element.
-        _blocks[_index].classList.add('o-vignette-blocks__block--active');
+        _blocks[_index].classList.add(activeClass);
 
         // Update competency table.
         _updateTable(index);
     }
+
+    function _nextVignette() {
+        if(_index != _vignettes.length - 1) {
+            _updateVignette(_index + 1);
+        }
+    }
+
+    function _previousVignette() {
+        if(_index != 0) {
+            _updateVignette(_index - 1);
+        }
+    }
     
     /**
      * Update the skill table based
@@ -124,6 +165,10 @@ $vignette = (function () {
         _table.innerHTML = _tableData[index];
     }
 
+    function _sortTable() {
+        // Perform sort on current table using key (column).
+    }
+
     // Define utility functions.
 
     /**
@@ -149,14 +194,36 @@ $vignette = (function () {
         }
     }
 
-    function _tableify(index) {
+    function _sortCurrentVignette(sortKey, ascending) {
+        // Sort the table.
+        for(var i = 0; i < _vignettes.length; i++) {
+            // Recompute table data ahead of time.
+            _tableData[i] = _tableify(i, sortKey, ascending);
+        }
+
+        // Update table HTML.
+        _updateVignette(_index, true);
+    }
+
+    function _tableify(index, sortKey = 'competencyId', ascending = true) {
         // Build HTML for all unique skills...
+        var tableRowsData = [];
         var tableRowsHTML = [];
         
         for(let competency of _all) {
             // Build table row data.
             var tableRowData = {
                 competencyId: competency,
+                linked: (linked => {
+                    for(let v of _vignettes) {
+                        for(let c of v['competencies']) {
+                            if(c['id'] === competency) {
+                                return c['linked'];
+                            }
+                        }
+                    }
+                    return false;
+                })(),
                 target: _targets.indexOf(competency) != -1,
                 count: (total => {
                     for(let c of _vignettes[index]['competencies']) {
@@ -166,22 +233,116 @@ $vignette = (function () {
                     }
                     return 0;
                 })(),
-                removed: _indexDiffWithType(competency, index, 'removed'),
+                removed: Math.abs(_indexDiffWithType(competency, index, 'removed')),
                 unchanged: _indexDiffWithType(competency, index, 'unchanged'),
                 added: _indexDiffWithType(competency, index, 'added')
             };
+            tableRowsData.push(tableRowData);
+        }
+
+        // Sort rows by Id (default).
+        tableRowsData.sort(function(a, b){
+            var nameA = a[sortKey], nameB = b[sortKey];
+            if(nameA < nameB) {
+                if(ascending) {
+                    return -1;
+                }
+                else {
+                    return 1;
+                }
+            }
+            if(nameA > nameB) {
+                if(ascending) {
+                    return 1;
+                } else {
+                    return -1;
+                }
+            }
+            return 0;
+        });
+
+        for(let tableRowData of tableRowsData) {
             // Convert table row data into HTML.
             tableRowsHTML.push(_tableRowDataToHTML(tableRowData));
         }
 
         // Create new table.
-        var headerRow = '<tr id="table-header"><th>Competency</th>';
+        var headerRow = '<tr id="table-header"><th>Competency ';
+        if(sortKey === 'competencyId') {
+            if(ascending) {
+                headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'competencyId\', false)"></i>';
+            } else {
+                headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'competencyId\', true)"></i>'
+            }
+        } else {
+            headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'competencyId\', false)"></i>';
+        }
+        headerRow += '</th>';
+
         if(_targets) {
-            headerRow +=  '<th>Target</th>'
+            headerRow += '<th>Target ';
+            if(sortKey === 'target') {
+                if(ascending) {
+                    headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'target\', false)"></i>';
+                } else {
+                    headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'target\', true)"></i>'
+                }
+            } else {
+                headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'target\', false)"></i>';
+            }
+            headerRow += '</th>';
+        }
+
+        headerRow +=      '<th>Count ';
+        if(sortKey === 'count') {
+            if(ascending) {
+                headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'count\', false)"></i>';
+            } else {
+                headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'count\', true)"></i>'
+            }
+        } else {
+            headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'count\', false)"></i>';
         }
-        headerRow +=      '<th>Count</th><th>Removed</th><th>Unchanged</th><th>Added</th></tr>';
+        headerRow += '</th>';
+
+        headerRow += '<th>Removed ';
+        if(sortKey === 'removed') {
+            if(ascending) {
+                headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'removed\', false)"></i>';
+            } else {
+                headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'removed\', true)"></i>'
+            }
+        } else {
+            headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'removed\', false)"></i>';
+        }
+        headerRow += '</th>';
+        
+        headerRow += '<th>Unchanged ';
+        if(sortKey === 'unchanged') {
+            if(ascending) {
+                headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'unchanged\', false)"></i>';
+            } else {
+                headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'unchanged\', true)"></i>'
+            }
+        } else {
+            headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'unchanged\', false)"></i>';
+        }
+        headerRow += '</th>';
+        
+        headerRow += '<th>Added ';
+        if(sortKey === 'added') {
+            if(ascending) {
+                headerRow += '<i class="fas fa-sort-down" onclick="javascript:$vignette.sort(\'added\', false)"></i>';
+            } else {
+                headerRow += '<i class="fas fa-sort-up" onclick="javascript:$vignette.sort(\'added\', true)"></i>'
+            }
+        } else {
+            headerRow += '<i class="fas fa-sort" onclick="javascript:$vignette.sort(\'added\', false)"></i>';
+        }
+        headerRow += '</th></tr>';
 
         var finalHTML = headerRow;
+
         for(let row of tableRowsHTML) {
             finalHTML += row;
         }
@@ -213,9 +374,26 @@ $vignette = (function () {
      * @param {*} tableRowData HTML to inject.
      */
     function _tableRowDataToHTML(tableRowData) {
-        var encoded =   '<tr><td><span class="a-pill">' +
+        var encoded =   '<tr';
+
+        if(_markTable && tableRowData.target && tableRowData.count > 0) {
+            encoded += ' class="table-success"';
+        }
+        
+        encoded += '><td>';
+        if(tableRowData['linked']) {
+            encoded += '<a href="' +
+                        _cUrl +
+                        '#' +
+                        tableRowData['competencyId'] +
+                        '">' +
+                        tableRowData['competencyId'] +
+                        '</a></td><td>';
+        } else {
+            encoded += '<span>' +
                         tableRowData['competencyId'] +
                         '</span></td><td>';
+        }
         if(_targets) {
             if(tableRowData['target']) {
                 encoded += 'Yes';
@@ -225,11 +403,19 @@ $vignette = (function () {
             encoded += '</td><td>';
         }
         encoded +=  tableRowData['count'] +
-                    '</td><td>' +
+                    '</td><td';
+        if(_markTable && tableRowData['removed'] < 0) {
+            encoded += ' class="table-danger"';
+        }
+        encoded +=  '>' +
                     tableRowData['removed'] +
                     '</td><td>' +
                     tableRowData['unchanged'] +
-                    '</td><td>' +
+                    '</td><td';
+        if(_markTable && tableRowData['added'] > 0) {
+            encoded += ' class="table-success"';
+        }
+        encoded +=  '>' +
                     tableRowData['added'] +
                     '</td></tr>';
         return encoded;

data/assets/styles/main.scss

@@ -1,38 +1,24 @@
 ---
 # Front matter hyphens tell Jekyll pre-processor this is the main SCSS file.
 ---
-
 /***
- * This file imports all partials required by the site.
- * The design philosphy employed is 'atomic design'.
- *
- * Jekyll does not natively support 'globbing', so paths
- * to new files must be specified manually.
+ * Override default library styles.
  */
 
-// Base styles.
-@import "base/colours";
-@import "base/fonts";
-@import "base/normalize";
-@import "base/spacing";
-
-// Atoms.
-@import "atoms/forms";
-@import "atoms/images";
-@import "atoms/links";
-@import "atoms/lists";
-@import "atoms/tables";
-@import "atoms/typography";
+ .vignette-block {
+     display: none;
 
-// Molecules.
-@import "molecules/header";
-@import "molecules/footer";
+     &.active {
+         display: block;
+     }
+ }
 
-// Organisms.
-@import "organisms/vignette-blocks";
-@import "organisms/vignette-tabs";
+ tr:target {
+    background-color: #dee2e6;
+ }
 
-// Layouts.
-@import "layouts/evaluation";
-@import "layouts/page";
-@import "layouts/portfolio";
+ .fa-sort,
+ .fa-sort-up,
+ .fa-sort-down {
+    cursor: pointer;
+ }