Styling view page

src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig

@@ -7,15 +7,21 @@
 {% block title title %}
 
 {% block personcontent %}
+<div class="budget-show">
     <h1>{{ title }}</h1>
 
+    <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>{{ '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 %}
@@ -24,7 +30,6 @@
                             {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
                         {% endif %}
                     </dd>
-
                     <dt>{{ 'Comment'|trans }}</dt>
                     <dd>
                         {%- if element.comment is not empty -%}
@@ -36,6 +41,10 @@
                         {%- endif -%}
                     </dd>
                 </dl>
+            </div>
+        </div>
+    </div>
+</div>
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">

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">

src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig

@@ -7,16 +7,22 @@
 {% block title title %}
 
 {% block personcontent %}
+<div class="budget-show">
     <h1>{{ title }}</h1>
 
+    <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>{{ 'Type'|trans }}</dt>
+                        <dt class="inline">{{ 'Amount'|trans }}</dt>
-    <dd>{{ element.type|budget_element_type_display('resource') }}</dd>
-
-    <dt>{{ 'Amount'|trans }}</dt>
                         <dd>{{ element.amount|format_currency('EUR') }}</dd>
-
+                        <dt class="inline">{{ 'Validity period'|trans }}</dt>
-    <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') } ) }}
@@ -24,8 +30,7 @@
                                 {{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
                             {% endif %}
                         </dd>
-
+                        <dt class="inline">{{ 'Comment'|trans }}</dt>
-    <dt>{{ 'Comment'|trans }}</dt>
                         <dd>
                             {%- if element.comment is not empty -%}
                             <blockquote class="chill-user-quote">
@@ -36,6 +41,10 @@
                             {%- endif -%}
                         </dd>
                 </dl>
+            </div>
+        </div>
+    </div>
+</div>
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
@@ -43,10 +52,10 @@
             {{ '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 %}

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;

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
 */