From 2b14c132d5f36dd576ae4243d70b4ce163424d30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 19 Feb 2024 13:36:11 +0100
Subject: [PATCH] Homogenize the styling between vuejs module and twig
 templates

New CSS styles are applied to news module for better layout. Relevant templates are updated to use the new styles. Also, entry point is added in webpack configuration file to import the CSS file through index.js.
---
 .../Resources/public/module/news/index.js             |  1 +
 .../Resources/public/module/news/index.scss           |  7 +++++++
 .../Resources/views/NewsItem/_show.html.twig          |  4 +++-
 .../views/NewsItem/news_items_history.html.twig       | 11 +++++++++--
 .../Resources/views/NewsItem/show.html.twig           |  5 +++++
 .../Resources/views/NewsItem/view_admin.html.twig     |  5 +++++
 src/Bundle/ChillMainBundle/chill.webpack.config.js    |  1 +
 7 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/module/news/index.js
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/module/news/index.scss

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/news/index.js b/src/Bundle/ChillMainBundle/Resources/public/module/news/index.js
new file mode 100644
index 000000000..67aac616f
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/news/index.js
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/news/index.scss b/src/Bundle/ChillMainBundle/Resources/public/module/news/index.scss
new file mode 100644
index 000000000..7b65cda80
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/news/index.scss
@@ -0,0 +1,7 @@
+div.flex-table {
+    .news-content {
+        p {
+            margin-top: 1rem;
+        }
+    }
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/_show.html.twig b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/_show.html.twig
index ed11908ec..5cd830bbc 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/_show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/_show.html.twig
@@ -8,6 +8,8 @@
         </p>
     </div>
     <div class="item-bloc">
-        {{ entity.content|chill_markdown_to_html }}
+        <div class="news-content">
+            {{ entity.content|chill_markdown_to_html }}
+        </div>
     </div>
 </div>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/news_items_history.html.twig b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/news_items_history.html.twig
index 134135791..8a2956333 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/news_items_history.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/news_items_history.html.twig
@@ -4,6 +4,11 @@
     {{ 'news.title'|trans }}
 {% endblock title %}
 
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_news') }}
+{% endblock %}
+
 {% block content %}
     <div class="col-md-10 asideactivity-list">
         <h2>{{ 'news.title'|trans }}</h2>
@@ -42,12 +47,14 @@
                         </div>
 
                         <div class="item-row separator">
-                            {{ entity.content|u.truncate(350, '… [' ~ ('news.read_more'|trans) ~ '](' ~ chill_path_add_return_path('chill_main_single_news_item', { 'id': entity.id } ) ~ ')', false)|chill_markdown_to_html }}
+                            <div>
+                                {{ entity.content|u.truncate(350, '… [' ~ ('news.read_more'|trans) ~ '](' ~ chill_path_add_return_path('chill_main_single_news_item', { 'id': entity.id } ) ~ ')', false)|chill_markdown_to_html }}
+                            </div>
                         </div>
                         <div class="item-row">
                             <ul class="record_actions">
                                 <li>
-                                    <a href="{{ chill_path_add_return_path('chill_main_single_news_item', { 'id': entity.id } ) }}" class="btn btn-show btn-mini"></a>
+                                    <a href="{{ chill_path_add_return_path('chill_main_single_news_item', { 'id': entity.id } ) }}" class="btn btn-show btn-sm read-more">{{ 'news.read_more'|trans }}</a>
                                 </li>
                             </ul>
                         </div>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/show.html.twig b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/show.html.twig
index abd596918..a718a2121 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/show.html.twig
@@ -2,6 +2,11 @@
 
 {% block title 'news.show_details'|trans %}
 
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_news') }}
+{% endblock %}
+
 {% block content %}
     <div class="col-md-10 col-xxl">
         <div class="news-item-show">
diff --git a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/view_admin.html.twig b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/view_admin.html.twig
index b9cee97cf..92ed2c235 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/NewsItem/view_admin.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/NewsItem/view_admin.html.twig
@@ -4,6 +4,11 @@
     {% include('@ChillMain/CRUD/_view_title.html.twig') %}
 {% endblock %}
 
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_news') }}
+{% endblock %}
+
 {% block admin_content %}
 
     <div class="col-md-10 col-xxl">
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 792d0a27e..7e0060892 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -76,6 +76,7 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_pick_postal_code', __dirname + '/Resources/public/module/pick-postal-code/index.js');
     encore.addEntry('mod_pick_rolling_date', __dirname + '/Resources/public/module/pick-rolling-date/index.js');
     encore.addEntry('mod_address_details', __dirname + '/Resources/public/module/address-details/index');
+    encore.addEntry('mod_news', __dirname + '/Resources/public/module/news/index.js');
 
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');