Merge branch 'release'

Author: KeiranWDigital

_includes/filter-difficulty.html

@@ -0,0 +1,9 @@
+<p>
+    You can filter the items on this page to show only
+    <a href="#" onclick="filterCards('Easy')">Easy</a>,
+    <a href="#" onclick="filterCards('Medium')">Medium</a>, or
+    <a href="#" onclick="filterCards('Hard')">Hard</a> cards.
+    If you want to, you can  
+    <a href="#" onclick="resetCards()">reset the cards</a> to
+    show them all again.
+</p>

_includes/scripts.html

@@ -38,6 +38,34 @@
     }
 </script>
 
+<script type="text/javascript">
+    if ("{{page.title}}" === "Activities" || "{{page.title}}" === "Resources") {
+        allCards = $('div.align-items-stretch:has(span.badge)');
+
+        function resetCards() {
+            $.each(allCards, function() {
+                var card = $(this);
+                if (!card.hasClass('d-flex')) {
+                    card.toggleClass('d-flex');
+                }
+                $(card).show();
+            });
+        }
+        
+        function filterCards(filterText) {
+            resetCards();
+            $.each(allCards, function() {
+                var card = $(this);
+                if (card.not(':has(span.badge:contains("' + filterText + '"))').length > 0) {
+                    card.toggleClass('d-flex');
+                    $(card).hide();
+                }
+            });
+        }
+    }
+</script>
+
+
 <!-- Placeholder for dynamic EventBrite integration script generation -->
 <script id="eventBriteWidgets" type="text/javascript">
 </script>

activities.html

@@ -29,6 +29,7 @@ <h1>{{page.title}}</h1>
     quite often we get people attending who are working their way through resources they've found elsewhere on
     the web. The following are just a few of the ones we see people on, along with some we recommend you try.
 </p>
+{% include filter-difficulty.html %}
 <p>
     Jump to: <a href="#activities-learning">Learning</a> | <a href="#activities-practice">Practice</a>
 </p>

pages-resources/resources-soft-skills.html

@@ -46,4 +46,39 @@ <h4>
             </div>
         </div>
     </div>
+    <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+        <div class="row">
+            <div class="card">
+                <h4>
+                    <span class="fab fa-trello"></span>
+                    <a href="https://trello.com/" target="_blank">Trello</a>
+                    <span class="badge badge-success">Easy</span>
+                </h4>
+                <p>
+                    Trello is an industry-standard tool for organising projects. You can create cards, that live on
+                    boards, to track outstanding tasks. The cards can then be moved into different lists on the board.
+                    At CodeWith we use Trello to track outstanding actions from committee meetings.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+        <div class="row">
+            <div class="card">
+                <h4>
+                    <span class="fas fa-project-diagram"></span>
+                    <a href="https://code2flow.com/" target="_blank">Code2Flow</a>
+                    <span class="badge badge-warning">Medium</span>
+                </h4>
+                <p>
+                    Code2Flow is a tool to transform ideas and workflows into easy to understand diagrams. Using a
+                    psuedocode editor you can generate a flowchart with up to 50 nodes for free. We used Code2Flow to
+                    generate our process flow charts at CodeWith.
+                </p>
+            </div>
+        </div>
+    </div>
 </div>

resources.html

@@ -27,6 +27,7 @@ <h1>{{page.title}}</h1>
     On top of that, there are lots of places on the Internet which will do jobs that text editors just aren't built for.
     We've listed some of those too.
 </p>
+{% include filter-difficulty.html %}
 <p>
     Jump to:
     <a href="#resources-links">Useful Links</a> |