From 185d1dbf49442c8ca7d4842dd01db52440502281 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 23 Feb 2022 17:16:26 +0100
Subject: [PATCH] Styling view page

---
 .../Resources/views/Charge/view.html.twig     | 65 +++++++++--------
 .../Resources/views/Element/index.html.twig   | 10 ++-
 .../Resources/views/Resource/view.html.twig   | 71 +++++++++++--------
 .../public/chill/scss/chill_variables.scss    |  2 +
 .../Resources/public/chill/scss/badge.scss    | 41 +++++++++++
 5 files changed, 124 insertions(+), 65 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig
index 43b200eba..ea0b6e9b7 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig
@@ -7,35 +7,44 @@
 {% block title title %}
 
 {% block personcontent %}
-<h1>{{ title }}</h1>
+<div class="budget-show">
+    <h1>{{ title }}</h1>
 
-<dl class="chill_view_data">
-    <dt>{{ 'Type'|trans }}</dt>
-    <dd>{{ element.type|budget_element_type_display('charge') }}</dd>
-
-    <dt>{{ 'Amount'|trans }}</dt>
-    <dd>{{ element.amount|format_currency('EUR') }}</dd>
-
-    <dt>{{ 'Validity period'|trans }}</dt>
-    <dd>
-        {% if element.endDate is not null %}
-            {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
-        {% else %}
-            {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
-        {% endif %}
-    </dd>
-
-    <dt>{{ 'Comment'|trans }}</dt>
-    <dd>
-        {%- if element.comment is not empty -%}
-        <blockquote class="chill-user-quote">
-            {{ element.comment }}
-        </blockquote>
-        {%- else -%}
-        <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
-        {%- endif -%}
-    </dd>
-</dl>
+    <div class="flex-table">
+        <div class="item-bloc">
+            <div class="item-row">
+                <h2 class="badge-title">
+                    <span class="title_label title_label_charge"></span>
+                    <span class="title_action title_action_charge">{{ element.type|budget_element_type_display('charge') }}</span>
+                </h2>
+            </div>
+            <div class="item-row separator">
+                <dl class="chill_view_data">
+                    <dt>{{ 'Amount'|trans }}</dt>
+                    <dd>{{ element.amount|format_currency('EUR') }}</dd>
+                    <dt>{{ 'Validity period'|trans }}</dt>
+                    <dd>
+                        {% if element.endDate is not null %}
+                            {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
+                        {% else %}
+                            {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
+                        {% endif %}
+                    </dd>
+                    <dt>{{ 'Comment'|trans }}</dt>
+                    <dd>
+                        {%- if element.comment is not empty -%}
+                        <blockquote class="chill-user-quote">
+                            {{ element.comment }}
+                        </blockquote>
+                        {%- else -%}
+                        <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                        {%- endif -%}
+                    </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+</div>
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
index 5d70d653c..2ac3bed87 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
@@ -9,8 +9,6 @@
     .subtitle {
         margin-top: 1rem;
         margin-bottom: 1rem;
-        background-color: #334d5c;
-        color: white;
         padding: 1rem;
     }
     .family-title {
@@ -20,10 +18,10 @@
         color: white;
     }
     .budget-table th.charge {
-        background-color: #df4949;
+        background-color: #e03851;
     }
     .budget-table th.resource {
-        background-color: #43b29d;
+        background-color: #5ba1c1;
     }
     .budget-table th, td {
         padding: 10px;
@@ -103,9 +101,9 @@
             <td class="column-small">{{ f.amount|format_currency('EUR') }}</td>
             <td class="column-small">
                 {% if f.endDate is not null %}
-                    {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': f.startDate|format_date('long'), '%endDate%': f.endDate|format_date('long') } ) }}
+                    {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': f.startDate|format_date('short'), '%endDate%': f.endDate|format_date('short') } ) }}
                 {% else %}
-                    {{ 'Valid since %startDate%'|trans( { '%startDate%': f.startDate|format_date('long') } ) }}
+                    {{ 'Valid since %startDate%'|trans( { '%startDate%': f.startDate|format_date('short') } ) }}
                 {% endif %}
             </td>
             <td class="column-small">
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig
index 5ea0193d7..daceb05de 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig
@@ -7,46 +7,55 @@
 {% block title title %}
 
 {% block personcontent %}
-<h1>{{ title }}</h1>
+<div class="budget-show">
+    <h1>{{ title }}</h1>
 
-<dl class="chill_view_data">
-    <dt>{{ 'Type'|trans }}</dt>
-    <dd>{{ element.type|budget_element_type_display('resource') }}</dd>
-
-    <dt>{{ 'Amount'|trans }}</dt>
-    <dd>{{ element.amount|format_currency('EUR') }}</dd>
-
-    <dt>{{ 'Validity period'|trans }}</dt>
-    <dd>
-        {% if element.endDate is not null %}
-            {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
-        {% else %}
-            {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
-        {% endif %}
-    </dd>
-
-    <dt>{{ 'Comment'|trans }}</dt>
-    <dd>
-        {%- if element.comment is not empty -%}
-        <blockquote class="chill-user-quote">
-            {{ element.comment }}
-        </blockquote>
-        {%- else -%}
-        <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
-        {%- endif -%}
-    </dd>
-</dl>
+    <div class="flex-table">
+        <div class="item-bloc">
+            <div class="item-row">
+                <h2 class="badge-title">
+                    <span class="title_label title_label_resource"></span>
+                    <span class="title_action title_action_resource">{{ element.type|budget_element_type_display('resource') }}</span>
+                </h2>
+            </div>
+            <div class="item-row separator">
+                <dl class="chill_view_data">
+                        <dt class="inline">{{ 'Amount'|trans }}</dt>
+                        <dd>{{ element.amount|format_currency('EUR') }}</dd>
+                        <dt class="inline">{{ 'Validity period'|trans }}</dt>
+                        <dd>
+                            {% if element.endDate is not null %}
+                                {{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
+                            {% else %}
+                                {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
+                            {% endif %}
+                        </dd>
+                        <dt class="inline">{{ 'Comment'|trans }}</dt>
+                        <dd>
+                            {%- if element.comment is not empty -%}
+                            <blockquote class="chill-user-quote">
+                                {{ element.comment }}
+                            </blockquote>
+                            {%- else -%}
+                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                            {%- endif -%}
+                        </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+</div>
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
         <a href="{{ path("chill_budget_elements_index", { 'id': person.id } ) }}" class="btn btn-cancel">
-           {{ 'Back to the list'|trans }}
+            {{ 'Back to the list'|trans }}
         </a>
     </li>
-    {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::UPDATE'), element) %}
+    {# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::UPDATE'), element) %} #}
         <li>
             <a href="{{ path('chill_budget_resource_edit', { 'id': element.id } ) }}" class="btn btn-edit">{{ 'Edit'|trans }}</a>
         </li>
-    {% endif %}
+    {# {% endif %} #}
 </ul>
 {% endblock %}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss
index 61d975b42..459386ffd 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss
@@ -11,3 +11,5 @@ $chill-household-context: #929d69;
 $social-issue-color: #4bafe8;
 $social-action-color: $orange;
 $activity-color: yellowgreen;
+$budget-resource-color: #5ba1c1;
+$budget-charge-color: #e03851;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index 365074d05..b359f84d6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -176,6 +176,47 @@ div[class*='activity-'] {
     }
 }
 
+div[class*='budget-'] {
+    div.dashboard,
+    h4.badge-title,
+    h3.badge-title,
+    h2.badge-title {
+        span.title_label {
+            // Calculate same color then border:groove
+            &_resource {
+                background-color: shade-color($budget-resource-color, 34%);
+            }
+            &_charge {
+                background-color: shade-color($budget-charge-color, 34%);
+            }
+            h3 {
+                color: $white;
+            }
+        }
+        span.title_action {
+            &_resource {
+                @include dashboard_like_badge($budget-resource-color);
+            }
+            &_charge {
+                @include dashboard_like_badge($budget-charge-color);
+            }
+        }
+        span.title_label {
+            div.duration {
+                font-size: 70%;
+                font-weight: 500;
+                p {
+                    margin-bottom: 0;
+                    text-align: right;
+                    abbr {
+                        text-decoration: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
 /*
 * Pill badge by entity
 */