From 623d54f30726df94223951185d95b40de4f2b238 Mon Sep 17 00:00:00 2001
From: Jason Williams <jason@jnf.me>
Date: Sat, 31 Oct 2020 17:35:56 -0600
Subject: [PATCH] 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

---
 .../jason-williamsca/assets/css/theme.css     |  4 +
 .../partials/feed/template.htm                | 84 +++++++++----------
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/www/themes/jason-williamsca/assets/css/theme.css b/www/themes/jason-williamsca/assets/css/theme.css
index bc9f02c..161316b 100644
--- a/www/themes/jason-williamsca/assets/css/theme.css
+++ b/www/themes/jason-williamsca/assets/css/theme.css
@@ -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;
 }
diff --git a/www/themes/jason-williamsca/partials/feed/template.htm b/www/themes/jason-williamsca/partials/feed/template.htm
index eb22113..f59b1ea 100644
--- a/www/themes/jason-williamsca/partials/feed/template.htm
+++ b/www/themes/jason-williamsca/partials/feed/template.htm
@@ -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 %}
\ No newline at end of file