From 576f46f845a458dbb1415b02208d94c45f2055b1 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 23 Feb 2022 15:58:06 +0100
Subject: [PATCH] styling of index page

style needs to be moved to correct file and changed scss
---
 .../Resources/views/Element/index.html.twig   | 163 +++++++++++++-----
 1 file changed, 119 insertions(+), 44 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
index aab741a6e..5d70d653c 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
@@ -4,6 +4,51 @@
 {% set title = 'Budget for %name%'|trans({ '%name%' : person.firstName ~ " " ~ person.lastName } ) %}
 {% block title title %}
 
+{% block css %}
+    <style>
+    .subtitle {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        background-color: #334d5c;
+        color: white;
+        padding: 1rem;
+    }
+    .family-title {
+        margin-bottom: 1rem !important;
+    }
+    .budget-table th {
+        color: white;
+    }
+    .budget-table th.charge {
+        background-color: #df4949;
+    }
+    .budget-table th.resource {
+        background-color: #43b29d;
+    }
+    .budget-table th, td {
+        padding: 10px;
+        text-align: left;
+    }
+
+    .budget-table td.column-wide {
+        width: 25%;
+    }
+
+    .budget-table td.column-small {
+        width: 15%;
+    }
+
+    .bold {
+        font-weight: 600;
+    }
+
+    .total {
+        margin-top: 1rem;
+        border-top: 1px dashed black;
+    }
+    </style>
+{% endblock %}
+
 {% set actualResources = [] %}
 {% set futureResources = [] %}
 {% set pastResources   = [] %}
@@ -38,13 +83,13 @@
 
 
 {% macro table_elements(elements, family) %}
-<table>
+<table class="budget-table">
     <thead>
         <tr>
-            <th>{{ 'Budget element type'|trans }}</th>
-            <th>{{ 'Amount'|trans }}</th>
-            <th>{{ 'Validity period'|trans }}</th>
-            <th>&nbsp;</th>
+            <th class="{{ family }}">{{ 'Budget element type'|trans }}</th>
+            <th class="{{ family }}">{{ 'Amount'|trans }}</th>
+            <th class="{{ family }}">{{ 'Validity period'|trans }}</th>
+            <th class="{{ family }}">&nbsp;</th>
         </tr>
     </thead>
     <tbody>
@@ -52,39 +97,39 @@
         {% for f in elements %}
         {% set total = total + f.amount %}
         <tr>
-            <td>
+            <td class="column-wide bold">
                 {{ f.type|budget_element_type_display(family) }}
             </td>
-            <td>{{ f.amount|format_currency('EUR') }}</td>
-            <td>
+            <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') } ) }}
                 {% else %}
                     {{ 'Valid since %startDate%'|trans( { '%startDate%': f.startDate|format_date('long') } ) }}
                 {% endif %}
             </td>
-            <td>
+            <td class="column-small">
                 <ul class="record_actions">
                     {# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::SHOW'), f) %} #}
                         <li>
-                            <a href="{{ path('chill_budget_' ~ family ~ '_view', { 'id': f.id } ) }}" class="btn btn-show"></a>
+                            <a href="{{ path('chill_budget_' ~ family ~ '_view', { 'id': f.id } ) }}" class="btn btn-sm btn-show"></a>
                         </li>
                     {# {% endif %} #}
                     {# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::UPDATE'), f) %} #}
                         <li>
-                            <a href="{{ path('chill_budget_' ~ family ~'_edit', { 'id': f.id } ) }}" class="btn btn-edit"></a>
+                            <a href="{{ path('chill_budget_' ~ family ~'_edit', { 'id': f.id } ) }}" class="btn btn-sm btn-edit"></a>
                         </li>
                     {# {% endif %} #}
                     {# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::DELETE'), f) %} #}
                         <li>
-                            <a href="{{ path('chill_budget_' ~ family ~ '_delete', { 'id': f.id } ) }}" class="btn btn-delete"></a>
+                            <a href="{{ path('chill_budget_' ~ family ~ '_delete', { 'id': f.id } ) }}" class="btn btn-sm btn-delete"></a>
                         </li>
                     {# {% endif %} #}
                 </ul>
             </td>
         </tr>
         {% endfor %}
-        <tr>
+        <tr class="total">
             <td>
                 {{ 'Total'|trans }}
             </td>
@@ -130,32 +175,46 @@
 {% block personcontent %}
 <h1>{{ title }}</h1>
 
-<h2>{{ 'Actual budget'|trans }}</h2>
+<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2>
 
 {% if resources|length == 0 and charges|length == 0 %}
     <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
 {% else %}
-    <h3>{{ 'Actual resources'|trans }}</h3>
 
-    {% if actualResources|length > 0 %}
-        {{ m.table_elements(actualResources, 'resource') }}
-    {% else %}
-        <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
-    {% endif %}
+    <div class="flex-table">
+        <h3 class="family-title">{{ 'Actual resources'|trans }}</h3>
 
-    <h3>{{ 'Actual charges'|trans }}</h3>
+        {% if actualResources|length > 0 %}
+        <div class="item-bloc">
+            {{ m.table_elements(actualResources, 'resource') }}
+        </div>
+        {% else %}
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
+        </div>
+        {% endif %}
+    </div>
 
-    {% if actualCharges|length > 0 %}
-        {{ m.table_elements(actualCharges, 'charge') }}
-    {% else %}
-        <span class="chill-no-data-statement">{{ 'No charges registered'|trans }}</span>
-    {% endif %}
+    <div class="flex-table">
+        <h3 class="family-title">{{ 'Actual charges'|trans }}</h3>
 
-    {% if results|length > 0 %}
-        <h2>{{ 'Budget calculator'|trans }}</h2>
+        {% if actualCharges|length > 0 %}
+        <div class="item-bloc">
+            {{ m.table_elements(actualCharges, 'charge') }}
+        </div>
+        {% else %}
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No charges registered'|trans }}</span>
+        </div>
+        {% endif %}
 
-        {{ m.table_results(results) }}
-    {% endif %}
+        {% if results|length > 0 %}
+            <h2>{{ 'Budget calculator'|trans }}</h2>
+            <div class="item-bloc">
+                {{ m.table_results(results) }}
+            </div>
+        {% endif %}
+    </div>
 
     {# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::CREATE'), person) %} #}
     <ul class="record_actions">
@@ -171,42 +230,58 @@
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h2>{{ 'Past budget'|trans }}</h2>
+    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
 
-    <h3>{{ 'Past resources'|trans }}</h3>
+    <h3 class="family-title">{{ 'Past resources'|trans }}</h3>
 
     {% if pastResources|length > 0 %}
-        {{ m.table_elements(pastResources, 'resource') }}
+        <div class="item-bloc">
+            {{ m.table_elements(pastResources, 'resource') }}
+        </div>
     {% else %}
-        <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
+        <div class="item-bloc">
     {% endif %}
 
-    <h3>{{ 'Past charges'|trans }}</h3>
+    <h3 class="family-title">{{ 'Past charges'|trans }}</h3>
 
     {% if pastCharges|length > 0 %}
-        {{ m.table_elements(pastCharges, 'charge') }}
+        <div class="item-bloc">
+            {{ m.table_elements(pastCharges, 'charge') }}
+        </div>
     {% else %}
-        <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
+        </div>
     {% endif %}
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h2>{{ 'Future budget'|trans }}</h2>
+    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
 
-    <h3>{{ 'Future resources'|trans }}</h3>
+    <h3 class="family-title">{{ 'Future resources'|trans }}</h3>
 
     {% if futureResources|length > 0 %}
-        {{ m.table_elements(futureResources, 'resource') }}
+        <div class="item-bloc">
+            {{ m.table_elements(futureResources, 'resource') }}
+        </div>
     {% else %}
-        <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
+        </div>
     {% endif %}
 
-    <h3>{{ 'Future charges'|trans }}</h3>
+    <h3 class="family-title">{{ 'Future charges'|trans }}</h3>
 
     {% if futureCharges|length > 0 %}
-        {{ m.table_elements(futureCharges, 'charge') }}
+        <div class="item-bloc">
+            {{ m.table_elements(futureCharges, 'charge') }}
+        </div>
     {% else %}
-        <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
+        <div class="item-bloc">
+            <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
+        </div>
     {% endif %}
 {% endif %}