From 01915865ef588eac45f4649143c71608f080fe9c Mon Sep 17 00:00:00 2001
From: krmax44 <hi@krmax44.de>
Date: Tue, 15 Mar 2022 13:36:08 +0100
Subject: [PATCH] clean up section and detail views a bit

---
 .../templates/froide_govplan/base.html        |   4 +-
 .../templates/froide_govplan/detail.html      | 181 +++++++++---------
 .../froide_govplan/plugins/card_cols.html     |  20 +-
 .../templates/froide_govplan/section.html     |  20 +-
 froide_govplan/templatetags/govplan.py        |   5 +
 5 files changed, 118 insertions(+), 112 deletions(-)

diff --git a/froide_govplan/templates/froide_govplan/base.html b/froide_govplan/templates/froide_govplan/base.html
index 2c16cee..e5dfbef 100644
--- a/froide_govplan/templates/froide_govplan/base.html
+++ b/froide_govplan/templates/froide_govplan/base.html
@@ -3,7 +3,9 @@
 {% load cms_tags %}
 {% load menu_tags %}
 
-{% block navbar %}{% endblock %}
+{% block navbar %}
+  {% include "header_reduced.html" %}
+{% endblock %}
 
 {% block body %}
   <nav class="breadcrumb-container" aria-label="breadcrumb">
diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index 3ff3ede..26d6b54 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -1,9 +1,10 @@
-{% extends CMS_TEMPLATE %}
+{% extends "froide_govplan/base.html" %}
 
 {% load i18n %}
 {% load markup %}
 {% load cms_tags %}
 {% load follow_tags %}
+{% load govplan %}
 
 {% block title %}{{ object.title }}{% endblock %}
 
@@ -14,53 +15,54 @@
 {% endblock %}
 
 {% block app_body %}
-<div class="container mb-5">
-  <div class="row justify-content-center mb-5">  
-    <div class="col col-lg-8 mt-md-n5">
-      <div class="box-card border-yellow md:shadow-yellow bg-white">
-        <div>
-          <div class="flex-grow-1 tight-margin p-3 p-md-4 p-lg-5">
-            <h1 class="mt-0 h3">
-              {{ object.title }}
-            </h1>
+<div class="container">
+  <div class="box-card border-yellow md:shadow-yellow bg-white mb-5">
+    <div>
+      <div class="flex-grow-1 tight-margin p-3 p-md-4 p-lg-5">
+        <h1 class="mt-0 h3">
+          {{ object.title }}
+        </h1>
 
-            <div class="d-md-flex my-3 align-items-center">
-              <ul class="list-unstyled d-flex m-0">
-                <li>
-                  <span class="badge badge-{{ object.get_status_css }} mr-2">
-                    {{ object.get_status_display }}
-                  </span>
-                </li>
-                {% for cat in object.categories.all %}
-                <li>
-                  <a href="{{ section.get_absolute_url }}">
-                    <span class="badge badge-light mr-2">{{ cat.name }}</span>
-                  </a>
-                </li>
-                {% endfor %}
-              </ul>
+        <div class="d-md-flex my-4 align-items-center">
+          <ul class="list-unstyled d-flex m-0">
+            <li>
+              <span class="badge badge-{{ object.get_status_css }} mr-2">
+                {{ object.get_status_display }}
+              </span>
+            </li>
+            {% for cat in object.categories.all %}
+            <li>
+              <a href="{{ section.get_absolute_url }}" class="badge badge-light mr-2">
+                {{ cat.name }}
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
 
-              <div class="ml-auto">
-                {% show_follow "govplan" object %}
-              </div>
-            </div>
+          <div class="ml-auto">
+            {% show_follow "govplan" object %}
+          </div>
+        </div>
 
+        <div class="row">
+          <div class="col col-12 col-md-7 col-lg-8 order-md-2 offset-lg-1">
             {% if object.quote %}
-              <blockquote> 
-                {{ object.quote | markdown }}
+              <blockquote>
+                {{ object.quote | addquotes | markdown }}
               </blockquote>
             {% endif %}
-
             {% with refs=object.get_reference_links %}
               {% if refs %}
-                <p class="small">
+                <p>
+                  <span class="small">
                   {% if refs|length > 1 %}
                     Quellen:
                   {% else %}
                     Quelle:
                   {% endif %}
+                  </span>
                   {% for ref in refs %}
-                    <a href="{{ ref }}" target="_blank">
+                    <a href="{{ ref }}" class="badge badge-light mr-2" target="_blank">
                       {{ forloop.counter }}
                     </a>
                   {% endfor %}
@@ -68,80 +70,71 @@
               {% endif %}
             {% endwith %}
 
-            {% if object.organization %}
-              <p>
-                Dieses Vorhaben wird beobachtet von 
-                <a href="{{ object.organization.website }}">
-                  {{ object.organization.name }}
-                </a>
-              </p>
+            {% if object.description %}
+              <div class="mt-5">
+                {{ object.description | safe }}
+              </div>
             {% endif %}
           </div>
+          <div class="col col-12 col-md-5 col-lg-3 mt-5 mt-md-0">
+            <dl>
+              {% if object.rating %}
+                <dt>Bewertung</dt>
+                <dd>{{ object.get_rating_display }}</dd>
+              {% endif %}
+              {% if object.measure %}
+                <dt>Art der Umsetzung</dt>
+                <dd>{{ object.measure }}</dd>
+              {% endif %}
+              {% if object.due_date %}
+                <dt>Frist</dt>
+                <dd>{{ object.due_date|date:"SHORT_DATE_FORMAT" }}</dd>
+              {% endif %}
+              {% if object.responsible_publicbody %}
+                <dt>Federführung</dt>
+                <dd>
+                  <a href="{{ object.responsible_publicbody.get_absolute_url }}">
+                    {{ object.responsible_publicbody.name }}
+                  </a>
+                </dd>
+              {% endif %}
+              {% if object.organization %}
+                <dt>Beobachtet von</dt>
+                <dd>
+                  <a href="{{ object.organization.website }}">
+                    <img src="{{ object.organization.logo.url }}" class="img-sm" alt="{{ object.organization.name }}">
+                  </a>
+                </dd>
+              {% endif %}
+            </dl>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
+  {% for update in updates %}
+    <h4>{{ update.title }}</h4>
 
-<div class="container">
-    <dl>
-      {% if object.rating %}
-        <dt>Bewertung</dt>
-        <dd>{{ object.get_rating_display }}</dd>
-      {% endif %}
-      {% if object.measure %}
-        <dt>Art der Umsetzung</dt>
-        <dd>{{ object.measure }}</dd>
-      {% endif %}
-      {% if object.due_date %}
-        <dt>Frist</dt>
-        <dd>{{ object.due_date|date:"SHORT_DATE_FORMAT" }}</dd>
-      {% endif %}
-    </dl>
+    <time>{{ update.timestamp|date:"DATE_FORMAT" }}</time>
 
-    <div>
-      {{ object.description | safe }}
-    </div>
+    <small>von {% if update.user %}{{ update.user.get_full_name }}{% endif %}{% if update.organization %}({{ update.organization.name }}){% endif %}
+    </small>
 
-    
+    {{ update.content|markdown }}
 
-    
+    {% if update.url %}
+      <a href="{{ update.url }}">Mehr lesen</a>
+    {% endif %}
 
-    {% if object.responsible_publicbody %}
+    {% if update.foirequest %}
       <p>
-        Federführung:
-        <a href="{{ object.responsible_publicbody.get_absolute_url }}">
-          {{ object.responsible_publicbody.name }}
+        Relevante Anfrage:
+        <a href="{{ update.foirequest.get_absolute_url }}">
+          {{ update.foirequest.title }}
         </a>
       </p>
     {% endif %}
-
-    <h3>Neueste Entwicklungen</h3>
-    {% for update in updates %}
-      <h4>{{ update.title }}</h4>
-
-      <time>{{ update.timestamp|date:"DATE_FORMAT" }}</time>
-
-      <small>von {% if update.user %}{{ update.user.get_full_name }}{% endif %}{% if update.organization %}({{ update.organization.name }}){% endif %}
-      </small>
-
-      {{ update.content|markdown }}
-
-      {% if update.url %}
-        <a href="{{ update.url }}">Mehr lesen</a>
-      {% endif %}
-
-      {% if update.foirequest %}
-        <p>
-          Relevante Anfrage:
-          <a href="{{ update.foirequest.get_absolute_url }}">
-            {{ update.foirequest.title }}
-          </a>
-        </p>
-      {% endif %}
-    {% empty %}
-      Keine Entwicklungen
-    {% endfor %}
-  </div>
+  {% endfor %}
+</div>
 {% endblock %}
diff --git a/froide_govplan/templates/froide_govplan/plugins/card_cols.html b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
index 9ea2966..ba9bb2b 100644
--- a/froide_govplan/templates/froide_govplan/plugins/card_cols.html
+++ b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
@@ -1,5 +1,6 @@
 {% load thumbnail %}
 {% load i18n %}
+{% load govplan %}
 
 {% if object_list|length == 0 %}
   <p>
@@ -10,21 +11,28 @@
   {% for object in object_list %}
     <div class="col col-12 col-md-6 col-lg-4 d-flex mb-3">
       <a href="{{ object.get_absolute_url }}" class="d-flex w-100 text-body text-decoration-none">
-        <div class="box-card border-blue w-100 shadow-blue">
+        <div class="box-card border-blue w-100 bg-white shadow-blue">
           <div class="box-card-header p-3 bg-blue-20">
             <h3 class="h6 m-0">
               {{ object.title }}
             </h3>
           </div>
-          <div class="p-3 tight-margin">
+          <div class="p-3 tight-margin d-flex flex-column flex-1 h-100">
             {% if object.quote %}
             <blockquote>
-              „{{ object.quote|striptags|truncatewords:20 }}“
+              {{ object.quote|striptags|truncatewords:20|addquotes }}
             </blockquote>
             {% endif %}
-            <span class="badge badge-{{ object.get_status_css }} mt-auto">
-              {{ object.get_status_display }}
-            </span>
+            <div class="d-flex mt-auto">
+              <span href="{{ object.get_absolute_url }}" class="action-link text-blue-600">
+                → mehr lesen
+              </span>
+              <div class="ml-auto">
+                <span class="badge badge-{{ object.get_status_css }}">
+                  {{ object.get_status_display }}
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </a>
diff --git a/froide_govplan/templates/froide_govplan/section.html b/froide_govplan/templates/froide_govplan/section.html
index dc60b2a..7071d96 100644
--- a/froide_govplan/templates/froide_govplan/section.html
+++ b/froide_govplan/templates/froide_govplan/section.html
@@ -1,4 +1,4 @@
-{% extends CMS_TEMPLATE %}
+{% extends "froide_govplan/base.html" %}
 
 {% load i18n %}
 {% load markup %}
@@ -15,9 +15,9 @@
 {% endblock %}
 
 {% block app_body %}
-<div class="container mb-5">
-  <div class="row justify-content-center mb-5">  
-    <div class="col col-lg-8 mt-md-n5">
+<div class="container">
+  <div class="row justify-content-center mb-3">  
+    <div class="col col-lg-12">
       <div class="box-card {% comment %} box-card-has-image-lg {% endcomment %} border-yellow md:shadow-yellow bg-white">
         <div>
           {% comment %} <div class="box-card-image overlap-right text-center">
@@ -47,26 +47,24 @@
           </div> {% endcomment %}
 
           <div class="flex-grow-1 tight-margin p-3 p-md-4 p-lg-5">
-            <h1 class="mt-0">
+            <h1 class="mt-0 h2">
               {{ object.title }}
             </h1>
 
-            <p>
+            <p class="col-lg-8 px-0">
               {% blocktranslate with section=object.title %}
               Here you can find all plans of the section "{{section}}", which the coalition constituted in their agreement. On the curresponding detail pages, you'll get more information, stay up to date with news or submit changes.
               {% endblocktranslate %}
             </p>
 
-            {% page_url 'koalitionstracker' as base_url %}
-            <a href="{{ base_url }}" class="action-link">zurück zu allen Kategorien</a>
+            <!-- {% page_url 'koalitionstracker' as base_url %}
+            <a href="{{ base_url }}" class="action-link">zurück zu allen Kategorien</a> -->
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-
-<div class="container">
+    
   {% include "froide_govplan/plugins/card_cols.html" with object_list=plans %}
 </div>
 {% endblock %}
diff --git a/froide_govplan/templatetags/govplan.py b/froide_govplan/templatetags/govplan.py
index bd4789f..72b51be 100644
--- a/froide_govplan/templatetags/govplan.py
+++ b/froide_govplan/templatetags/govplan.py
@@ -41,3 +41,8 @@ def get_plan_progress(object_list):
 @register.inclusion_tag("froide_govplan/plugins/progress.html")
 def get_section_progress(section):
     return {"object_list": section.get_plans()}
+
+
+@register.filter
+def addquotes(text):
+    return f"„{str.strip(text)}“"