jason/ja.son-williams.ca
jason/ja.son-williams.ca
1
0
Fork 0
Code Issues 23 Pull Requests Projects 1 Wiki Activity

Adjusting markup for feed cards to use the same elements regardless of size, and then use CSS classes to set the size as appropriate. Fixes #36

Browse Source
This commit is contained in:
Jason Williams 2020-10-31 17:35:56 -06:00
parent a9b8c095c8
commit 623d54f307
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/themes/jason-williamsca/assets/css/theme.css
View File

@ -166,6 +166,10 @@ html::-webkit-scrollbar-thumb {
font-size: 1.2rem;
}
.giant, .card p.giant, .card ul.giant {
font-size: 1.5rem;
}
.col-container {
margin: 0 -15px;
}

84
www/themes/jason-williamsca/partials/feed/template.htm
View File

@ -1,45 +1,43 @@
==
{% if feeditemclass is empty %}
{% set feeditemclass = 'masonry-item' %}
{% else %}
{% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
{% endif %}
{% if posts is empty %}
<p>No feed items have been found.</p>
{% endif %}
{% for post in posts %}
<div class="{{ feeditemclass }}">
<div class="card">
{% if post.extra.img %}
<img class="card-img-top" src="{{ post.extra.img }}">
{% elseif post.extra.lat %}
<!--<div>MAP!</div>
<img class="card-img-top" src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/{{ post.extra.lng }},{{ post.extra.lat }},14,0/725x400@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">-->
<img class="card-img-top" src="https://api.mapbox.com/styles/v1/jason32dev/ckgehopjc2o1y19o09aqs4x11/static/pin-l+B05C71({{ post.extra.lng }},{{ post.extra.lat }})/{{ post.extra.lng }},{{ post.extra.lat }},14,0/545x300@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">
{% endif %}
<div class="card-body">
{% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %}
{% if post.title | striptags | length < 100 %}
<h2 class="card-title">{{ post.title | raw | nl2br }}</h2>
{% elseif post.title | striptags | length < 150 %}
<p class="card-text main">{{ post.title | raw | nl2br }}</p>
{% else %}
<p class="card-text">{{ post.title | raw | nl2br }}</p>
{% endif %}
{% elseif post.channel.slug == 'foursquare' %}
{% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %}
<h2 class="card-title mb-1">{{ post.title }}</h2>
<p class="card-text">{{ post.extra.address }}</p>
{% endif %}
<div class="feedcard-footer">
<p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
{% if post.channel.slug == 'twitter' and post.extra.opuser %}
<p class="float-left feedcard-attribution"><i class="fas fa-retweet"></i> <a href="https://twitter.com/{{ post.extra.opuser }}">{{ post.extra.opname }}</a> <img src="{{ post.extra.opimg }}"></p>
{% endif %}
</div>
</div>
</div>
</div>
{% if feeditemclass is empty %}
{% set feeditemclass = 'masonry-item' %}
{% else %}
{% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
{% endif %}
{% if posts is empty %}
<p>No feed items have been found.</p>
{% endif %}
{% for post in posts %}
<div class="{{ feeditemclass }}">
<div class="card">
{% if post.extra.img %}
<img class="card-img-top" src="{{ post.extra.img }}">
{% elseif post.extra.lat %}
<img class="card-img-top" src="https://api.mapbox.com/styles/v1/jason32dev/ckgehopjc2o1y19o09aqs4x11/static/pin-l+B05C71({{ post.extra.lng }},{{ post.extra.lat }})/{{ post.extra.lng }},{{ post.extra.lat }},14,0/545x300@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">
{% endif %}
<div class="card-body">
{% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %}
{% if post.title | striptags | length < 100 %}
<p class="card-text giant">{{ post.title | raw | nl2br }}</h2>
{% elseif post.title | striptags | length < 150 %}
<p class="card-text main">{{ post.title | raw | nl2br }}</p>
{% else %}
<p class="card-text">{{ post.title | raw | nl2br }}</p>
{% endif %}
{% elseif post.channel.slug == 'foursquare' %}
{% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %}
<h2 class="card-title mb-1">{{ post.title }}</h2>
<p class="card-text">{{ post.extra.address }}</p>
{% endif %}
<div class="feedcard-footer">
<p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
{% if post.channel.slug == 'twitter' and post.extra.opuser %}
<p class="float-left feedcard-attribution"><i class="fas fa-retweet"></i> <a href="https://twitter.com/{{ post.extra.opuser }}">{{ post.extra.opname }}</a> <img src="{{ post.extra.opimg }}"></p>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}