Progress

devplacepy/templates/news_detail.html

@@ -0,0 +1,51 @@
+{% extends "base.html" %}
+{% block extra_head %}
+<link rel="stylesheet" href="/static/css/news.css">
+<link rel="stylesheet" href="/static/css/post.css">
+{% endblock %}
+{% block content %}
+<div class="news-detail">
+    <article class="news-detail-card">
+        {% if image_url %}
+        <div class="news-detail-image">
+            <img src="{{ image_url }}" alt="" loading="lazy" class="image-fallback">
+        </div>
+        {% endif %}
+
+        <div class="news-detail-body">
+            <div class="news-detail-meta">
+                <span class="news-source">{{ article['source_name'] }}</span>
+                {% if grade >= 9 %}
+                <span class="news-grade news-grade-top">Grade {{ grade }}</span>
+                {% elif grade >= 7 %}
+                <span class="news-grade news-grade-high">Grade {{ grade }}</span>
+                {% else %}
+                <span class="news-grade">Grade {{ grade }}</span>
+                {% endif %}
+                <span class="news-time">{{ time_ago }}</span>
+            </div>
+
+            <h1 class="news-detail-title">{{ article['title'] }}</h1>
+
+            {% if article.get('description') %}
+            <p class="news-detail-desc">{{ article['description'] }}</p>
+            {% endif %}
+
+            {% if article.get('content') %}
+            <div class="news-detail-content rendered-content" data-render>{{ article['content'] }}</div>
+            {% endif %}
+
+            <div class="news-detail-actions">
+                <a href="{{ article['url'] }}" target="_blank" rel="noopener" class="news-detail-read-link">
+                    Read on {{ article['source_name'] }} &#x2197;
+                </a>
+                <a href="/news" class="news-detail-back">&larr; Back to News</a>
+            </div>
+        </div>
+    </article>
+
+    {% with target_uid=article['uid'], target_type="news", comments=comments %}
+    {% include "_comment_section.html" %}
+    {% endwith %}
+</div>
+{% endblock %}