From 8eff200bebff1b637e903266c2f84de13cb88fe8 Mon Sep 17 00:00:00 2001
From: krmax44 <hi@krmax44.de>
Date: Wed, 16 Mar 2022 09:55:12 +0100
Subject: [PATCH] clean up section page

---
 .../templates/froide_govplan/detail.html      |  2 +-
 .../templates/froide_govplan/section.html     | 50 ++++++-------------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index 2ef614e..84b210d 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -1,6 +1,6 @@
 {% extends "froide_govplan/base.html" %}
 
-{% load i18n %}
+{% load i18n %} {# TODO: i18n for all strings #}
 {% load markup %}
 {% load cms_tags %}
 {% load follow_tags %}
diff --git a/froide_govplan/templates/froide_govplan/section.html b/froide_govplan/templates/froide_govplan/section.html
index 7071d96..625ed67 100644
--- a/froide_govplan/templates/froide_govplan/section.html
+++ b/froide_govplan/templates/froide_govplan/section.html
@@ -16,51 +16,33 @@
 
 {% block app_body %}
 <div class="container">
-  <div class="row justify-content-center mb-3">  
+  <div class="row justify-content-center mb-5">  
     <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">
-            {% with picture=object.image %}
-              <picture>
-                {% if ".svg" not in picture.url %}
-                  {% thumbnail picture 280x0 crop=smart subject_location=picture.subject_location as thumb %}
-                  <source
-                    media="(min-width: 992px)"
-                    srcset="{{ thumb.url }}"
-                  />
-                  <source
-                    media="(min-width: 992px)"
-                    srcset="{{ thumb.url }}.avif"
-                    type="image/avif"
-                  />
-                  {% thumbnail picture 200x0 crop=smart subject_location=picture.subject_location as thumb %}
-                  <source
-                    srcset="{{ thumb.url }}.avif"
-                    type="image/avif"
-                  />
-                {% endif %}
-                <img class="img-lg z-index-10" width="{{ thumb.width }}" height="{{ thumb.height }}" src="{{ thumb.url }}"
-                    {% if picture.default_alt_text and not attributes.alt %} alt="{{ picture.default_alt_text }}"{% endif %}>
-              </picture>
-            {% endwith %}
-          </div> {% endcomment %}
-
-          <div class="flex-grow-1 tight-margin p-3 p-md-4 p-lg-5">
+      <div class="box-card border-yellow md:shadow-yellow bg-white p-3 p-md-4 p-lg-5 tight-margin">
+        <div class="row mx-0">
+          <div class="col col-12 col-md-12 pl-0 tight-margin">
             <h1 class="mt-0 h2">
               {{ object.title }}
             </h1>
 
-            <p class="col-lg-8 px-0">
+            <p>
               {% 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> -->
           </div>
         </div>
+
+        <div class="mt-5">
+          {% include "froide_govplan/plugins/progress.html" with object_list=plans %}
+          <p class="small text-gray-700 mt-3">
+            <i class="fa fa-circle text-success"></i> umgesetzt
+            <i class="fa fa-circle text-warning ml-1"></i> teilweise umgesetzt
+            <i class="fa fa-circle text-danger ml-1"></i> verschoben
+            <i class="fa fa-circle text-primary ml-1"></i> begonnen
+            <i class="fa fa-circle text-light ml-1"></i> nicht begonnen
+          </p>          
+        </div>
       </div>
     </div>
   </div>