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

This commit is contained in:
Jason Williams 2020-10-31 17:07:23 -06:00
commit a9b8c095c8
3 changed files with 306 additions and 266 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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 %}