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; font-size: 1.2rem;
} }
.giant, .card p.giant, .card ul.giant {
font-size: 1.5rem;
}
.col-container { .col-container {
margin: 0 -15px; margin: 0 -15px;
} }

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

@ -1,45 +1,43 @@
== ==
{% if feeditemclass is empty %} {% if feeditemclass is empty %}
{% set feeditemclass = 'masonry-item' %} {% set feeditemclass = 'masonry-item' %}
{% else %} {% else %}
{% set feeditemclass = 'masonry-item ' ~ feeditemclass %} {% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
{% endif %} {% endif %}
{% if posts is empty %} {% if posts is empty %}
<p>No feed items have been found.</p> <p>No feed items have been found.</p>
{% endif %} {% endif %}
{% for post in posts %} {% for post in posts %}
<div class="{{ feeditemclass }}"> <div class="{{ feeditemclass }}">
<div class="card"> <div class="card">
{% if post.extra.img %} {% if post.extra.img %}
<img class="card-img-top" src="{{ post.extra.img }}"> <img class="card-img-top" src="{{ post.extra.img }}">
{% elseif post.extra.lat %} {% elseif post.extra.lat %}
<!--<div>MAP!</div> <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">
<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">--> {% endif %}
<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"> <div class="card-body">
{% endif %} {% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %}
<div class="card-body"> {% if post.title | striptags | length < 100 %}
{% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %} <p class="card-text giant">{{ post.title | raw | nl2br }}</h2>
{% if post.title | striptags | length < 100 %} {% elseif post.title | striptags | length < 150 %}
<h2 class="card-title">{{ post.title | raw | nl2br }}</h2> <p class="card-text main">{{ post.title | raw | nl2br }}</p>
{% elseif post.title | striptags | length < 150 %} {% else %}
<p class="card-text main">{{ post.title | raw | nl2br }}</p> <p class="card-text">{{ post.title | raw | nl2br }}</p>
{% else %} {% endif %}
<p class="card-text">{{ post.title | raw | nl2br }}</p> {% elseif post.channel.slug == 'foursquare' %}
{% endif %} {% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %}
{% elseif post.channel.slug == 'foursquare' %} <h2 class="card-title mb-1">{{ post.title }}</h2>
{% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %} <p class="card-text">{{ post.extra.address }}</p>
<h2 class="card-title mb-1">{{ post.title }}</h2> {% endif %}
<p class="card-text">{{ post.extra.address }}</p> <div class="feedcard-footer">
{% endif %} <p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
<div class="feedcard-footer"> {% if post.channel.slug == 'twitter' and post.extra.opuser %}
<p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p> <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>
{% if post.channel.slug == 'twitter' and post.extra.opuser %} {% endif %}
<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> </div>
{% endif %} </div>
</div> </div>
</div> </div>
</div>
</div>
{% endfor %} {% endfor %}