Merge pull request #1541 from laws-africa/article-img

Images and social media in article
laws-africa · Sep 25, 2023 · 6dcebcc · 6dcebcc
2 parents 8095795 + a168506
commit 6dcebcc
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/peachjam/templates/peachjam/_article_list.html b/peachjam/templates/peachjam/_article_list.html
@@ -2,7 +2,7 @@
 {% for article in articles %}
   <div class="mb-3">
     <div class="row">
-      <div class="col-3 col-lg-2">
+      <div class="col-md-3 col-lg-2 mb-1">
         {% if article.image %}
           <a href="{{ article.get_absolute_url }}">
             <img src="{{ article.image.url }}"
@@ -11,7 +11,7 @@
           </a>
         {% endif %}
       </div>
-      <div class="col-9 col-lg-10">
+      <div class="col-md-9 col-lg-10">
         <h5>
           <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
         </h5>

diff --git a/peachjam/templates/peachjam/_recent_article_list.html b/peachjam/templates/peachjam/_recent_article_list.html
@@ -0,0 +1,33 @@
+{% load i18n peachjam %}
+{% for article in articles %}
+  <div class="rounded-0 p-2 mb-3">
+    <div class="my-1">
+      <div>
+        {% if article.image %}
+          <a href="{{ article.get_absolute_url }}">
+            <img src="{{ article.image.url }}"
+                 alt="{{ article.title }}"
+                 class="img-fluid"/>
+          </a>
+        {% endif %}
+      </div>
+      <div>
+        <h5>
+          <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
+        </h5>
+        <ul class="text-muted list-inline text-muted">
+          <li class="list-inline-item">{{ article.date }}</li>
+          <li class="list-inline-item">
+            <a href={% url 'user_profile' article.author.username %}>{% user_name article.author %}</a>
+          </li>
+          {% for topic in article.topics.all %}
+            <li class="list-inline-item">
+              <a href="{% url 'article_topic_list' topic.slug %}">{{ topic }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+        {% if article.summary %}<p>{{ article.summary }}</p>{% endif %}
+      </div>
+    </div>
+  </div>
+{% endfor %}
diff --git a/peachjam/templates/peachjam/article_detail.html b/peachjam/templates/peachjam/article_detail.html
@@ -35,6 +35,23 @@ <h1>{{ article.title }}</h1>
                 </li>
               {% endfor %}
             </ul>
+            <div class="d-flex align-items-center">
+              <a href="https://api.whatsapp.com/send?text={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-whatsapp whatsapp-forecolor share-icon"></i>
+              </a>
+              <a href="https://twitter.com/intent/tweet?text={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-twitter twitter-forecolor share-icon"></i>
+              </a>
+              <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"
+                 class="btn btn-link share-link"
+                 target="_blank">
+                <i class="bi bi-facebook facebook-forecolor share-icon"></i>
+              </a>
+            </div>
           </header>
           {% if article.summary %}<p class="lead">{{ article.summary }}</p>{% endif %}
           <div class="article-body">{{ article.body|safe }}</div>
@@ -67,7 +84,7 @@ <h5 class="card-title">
         {% if more_articles %}
           {% user_name article.author as username %}
           <h4>{% blocktrans trimmed %}Recent articles by {{ username }}{% endblocktrans %}</h4>
-          {% include 'peachjam/_article_list.html' with articles=more_articles %}
+          {% include 'peachjam/_recent_article_list.html' with articles=more_articles %}
         {% endif %}
       </div>
     </div>