Updating channel list to use icons instead of a simple bulleted list. Also added toggles in preparation for #42 and #47. Closes #51.

www/themes/jason-williamsca/assets/css/theme.css

@@ -233,6 +233,8 @@ html::-webkit-scrollbar-thumb {
     color: var(--alt-accent-color);
 }
 
+a.feed-showonly { font-size: 0.75rem; color: var(--xlight-accent-color); }
+
 /* Tag cloud styles */
 div.jqcloud {
     font-size: 0.5rem;

www/themes/jason-williamsca/pages/feed.htm

@@ -16,6 +16,9 @@ includeEmpty = 0
 <?php
 function onStart()
 {
+    if (empty($this->param('channel'))) $this['channelfilter'] = 'all';
+    else $this['channelfilter'] = explode(',', $this->param('channel'));
+
     $this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
     $this->addJs('assets/javascript/feedlayout.js');
     //$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');    
@@ -31,7 +34,7 @@ function onStart()
     </div>
     <div class="col-lg-3">
         <h2>Channels</h2>
-        {% component 'ChannelList' %}
+        {% partial 'feed/channels' %}
         
         <h2>Tags</h2>
         <div id="tagcloud"><img src="{{ 'assets/images/loading.svg' | theme }}"></div>

www/themes/jason-williamsca/partials/feed/channels.htm

@@ -0,0 +1,35 @@
+==
+{% for channel in channels %}
+    <!--<div class="custom-control custom-switch">
+        <input
+            type="checkbox"
+            class="custom-control-input channelswitch"
+            id="channel-{{ channel.slug }}"
+            data-channel="{{ channel.slug }}"
+            {% if channelfilter == 'all' or channel.slug in channelfilter %}checked{% endif %}
+        >
+        <label class="custom-control-label" for="channel-{{ channel.slug }}">
+            <i class="{{ channel.icon }} fa-fw" style="color: {{ channel.colour }};"></i>
+            {{ channel.title }}
+        </label>
+        <a
+            href="/feed/{{ channel.slug }}"
+            title="Show only {{ channel.title }} posts"
+            class="feed-showonly"
+            data-toggle="tooltip"
+            data-channel="{{ channel.slug }}"
+        ><i class="far fa-eye"></i></a>
+    </div>-->
+    
+    <div>
+        <i class="{{ channel.icon }} fa-fw" style="color: {{ channel.colour }};"></i>
+        {{ channel.title }}
+        <a
+            href="/feed/{{ channel.slug }}"
+            title="Show only {{ channel.title }} posts"
+            class="feed-showonly"
+            data-toggle="tooltip"
+            data-channel="{{ channel.slug }}"
+        ><i class="far fa-eye"></i></a>
+    </div>
+{% endfor %}