T3011 mc2 visual improvements

my_compassion/static/src/css/child_profile_timeline.css

@@ -90,14 +90,15 @@
     align-items: center;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    width: 40px;
-    height: 40px;
+    width: 50px;
+    height: 50px;
+    margin-left: -5px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 }
 .cd-timeline__img .pictogram {
-    width: 45px;
-    height: 45px;
+    width: 55px;
+    height: 55px;
 }
 @media (min-width: 64rem) {
     .cd-timeline__img {
@@ -126,6 +127,11 @@
     padding: 1.25em;
     box-shadow: 0 3px 0 hsl(205, 38%, 89%);
 }
+
+.cd-timeline__content > p.text-muted {
+    margin-bottom: 0;
+}
+
 .cd-timeline__content::before {
     content: "";
     position: absolute;
@@ -164,6 +170,11 @@
         border-left-color: hsl(0, 0%, 100%);
     }
 }
+
+.cd-timeline__date {
+    font-size: 16px;
+}
+
 @media (min-width: 64rem) {
     .cd-timeline__date {
         position: absolute;

my_compassion/static/src/css/my2_children_card.css

@@ -9,3 +9,12 @@
     object-fit: cover;
     object-position: 50% 0;
 }
+
+.children-card {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.children-card .pending {
+    font-size: 1.2rem;
+}

my_compassion/static/src/css/my2_dashboard.css

@@ -18,10 +18,17 @@
 
 .dashboard-banner h1 {
     font-family: "NeighbourSans Medium";
+    font-size: 2rem;
 }
 
 .dashboard-grid button,
 .dashboard-grid a {
     margin-top: 1.5rem;
     width: 100%;
 }
+
+@media screen and (max-width: 639px) {
+    .grid-item-container {
+        min-width: min(100%, 300px);
+    }
+}

my_compassion/static/src/css/my2_donation_item.css

@@ -1,5 +1,4 @@
 .donation-item-container {
-    border-left: 5px solid;
     container-type: inline-size;
     container-name: donation-item-container;
     font-size: 18px;
@@ -16,6 +15,8 @@
 
 .donation-item-container .action-button {
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 .donation-item-container .action-button:hover span {

my_compassion/templates/components/my2_children_card.xml

@@ -20,7 +20,8 @@
         <t t-set="sponsorship_type" t-value="sponsorship_type or 'standard'" />
         <t t-set="show_status" t-value="not show_status == False" />
         <div class="children-card text-center mb-3 mt-3">
-            <div class="p-4 d-flex flex-column align-items-center bg-high-eggshell">
+            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell position-relative rounded-pill">
+                <a t-attf-href="/my2/children/{{child.id}}" class="stretched-link" aria-label="Child profile" />
                 <!-- Child Image -->
                 <img
                     class="rounded-circle img-fluid mb-2"
@@ -31,7 +32,7 @@
                 <div class="h2 mb-0">
                     <t t-esc="child.preferred_name" />
                 </div>
-                <div class="small" t-if="sponsorship and sponsorship.state in ('draft', 'waiting', 'mandate')">
+                <div class="pending" t-if="sponsorship and sponsorship.state in ('draft', 'waiting', 'mandate')">
                     <span
                         class="badge bg-low-yellow"
                         title="Your sponsorship is being confirmed and will become active soon"

my_compassion/templates/components/my2_donation_item.xml

@@ -37,16 +37,25 @@
     <!-- DONATION ITEM BUTTON -->
     <template id="DonationItemButton" name="Donation Item Button">
         <t t-set="color" t-value="button.get('color') or 'dark-blue'" />
-        <t t-if="button.get('action') == 'link'" t-set="onclick" t-valuef="location.href='#{button.get('href')}'" />
+        <t
+            t-if="button.get('action') == 'link'"
+            t-set="onclick"
+            t-valuef="event.stopPropagation(); location.href='#{button.get('href')}'"
+        />
         <t
             t-elif="button.get('action') == 'event'"
             t-set="onclick"
-            t-valuef="this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
+            t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
         />
         <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick">
-            <i t-if="button.get('icon')" t-attf-class="tiny-text icon-#{button.get('icon')} text-#{color}" />
-            <i t-if="button.get('pictogram')" t-attf-class="tiny-text #{button.get('pictogram')} text-#{color}" />
-            <span t-if="button.get('label')" t-attf-class="tiny-text bold text-#{color}">
+            <i
+                t-if="button.get('icon')"
+                t-attf-class="{{'' if large_icon else 'tiny-text'}} icon-#{button.get('icon')} text-#{color}"
+            />
+            <span
+                t-if="button.get('label')"
+                t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}"
+            >
                 <t t-esc="button.get('label')" />
             </span>
         </div>
@@ -72,22 +81,31 @@
                 t-attf-style="--image_url: url('#{image}');"
             />
         </t>
+        <t t-set="redirect_link" t-value="redirect_link or ''" />
+        <t t-set="redirect_label" t-value="redirect_label or ''" />
+        <!-- Donation item container -->
         <div
-            t-attf-class="donation-item-container p-2 d-flex rounded-lg bg-#{bg_color} border-#{accent_color} #{top_class}"
+            t-attf-class="donation-item-container d-flex bg-#{bg_color} border-#{accent_color} #{top_class} position-relative rounded-pill padding-pill"
             t-attf-style="min-width: #{min_width}"
         >
+            <t t-if="redirect_link">
+                <a t-attf-href="{{redirect_link}}" class="stretched-link" t-attf-aria-label="{{redirect_label}}" />
+            </t>
             <div
                 t-attf-class="thumbnail responsive-lg mr-3 flex-shrink-0 rounded-lg #{not image and image_fallback_pictogram or ''}"
                 t-attf-style="--image_url: url('#{image}');"
             />
+            <!-- Donation details -->
             <t t-if="not primary_button" t-raw="small_thumbnail_content" />
             <div class="w-100 d-flex flex-column justify-content-between">
+                <!-- Donation Title -->
                 <div class="d-flex align-items-start">
                     <t t-if="primary_button" t-raw="small_thumbnail_content" />
                     <div class="flex-grow-1 d-flex flex-column">
                         <div t-attf-class="text-#{title_color} body-large bold">
                             <t t-esc="name" />
                         </div>
+                        <!-- Donation recipient -->
                         <div t-if="recipient" t-attf-class="text-#{recipient_color} body-small bold">
                             To
                             <t t-esc="recipient" />
@@ -102,11 +120,13 @@
                         </t>
                     </t>
                 </div>
+                <!-- Donation edit -->
                 <div t-attf-class="mt-2 d-flex justify-content-#{'between' if primary_button else 'end'}">
                     <t t-if="primary_button" t-call="my_compassion.DonationItemButton">
                         <t t-set="button" t-value="primary_button" />
                     </t>
-                    <div t-attf-class="text-#{price_color} ">
+                    <!-- Donation price -->
+                    <div t-attf-class="text-#{price_color} lead">
                         <t t-esc="currency_name" />
                         <t t-if="price % 1 == 0" t-set="price" t-value="'{0}.-'.format(int(price))" />
                         <t t-else="" t-set="price" t-value="'{0:.2f}'.format(price)" />
@@ -122,84 +142,59 @@
         </div>
     </template>
     <template id="SponsorshipDonationItem" name="Sponsorship Donation Item">
-        <t t-set="label_see_profile">See profile</t>
-        <t t-set="label_see_more">See more</t>
-        <t t-if="sponsorship.type == 'CSP'">
-            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
-            <t t-if="product_template">
-                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />
-                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />
-                <t t-set="csp_default_name">Compassion survival program</t>
-                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />
-                <t
-                    t-set="image_fallback_pictogram"
-                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"
-                />
-                <t t-if="product_template.is_published">
-                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />
-                    <t
-                        t-set="primary_button_data"
-                        t-value="{
-                'label': label_see_more,
-                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',
-                'action': 'link',
-                'href': '/my2/gifts/' + str(product_template.id),
-                'color': 'low-blue'
-            }"
-                    />
-                </t>
-                <t
-                    t-set="secondary_buttons_data"
-                    t-value="[
-                {
-                    'icon': 'download01',
-                    'color': 'low-blue',
-                    'action': 'link',
-                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),
-                }
-            ]"
-                />
-            </t>
-        </t>
-        <t t-else="">
-            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />
-            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />
-            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />
-            <t
-                t-set="primary_button_data"
-                t-value="{
-            'label': label_see_profile,
-            'pictogram': 'pictogram-child-sponsorship',
-            'action': 'link',
-            'href': '/my2/children/' + str(sponsorship.child_id.id),
-            'color': 'low-blue'
-        }"
-            />
+        <t t-set="is_csp" t-value="sponsorship.type == 'CSP'" />
+        <!-- is Compassion Survival Program ? -->
+        <t t-set="pt" t-value="is_csp and sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
+        <!-- product template -->
+        <t
+            t-set="name"
+            t-value="pt.my_compassion_name or pt.thanks_name or 'Compassion survival program' if is_csp else sponsorship.child_id.preferred_name"
+        />
+        <t
+            t-set="image"
+            t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"
+        />
+        <t
+            t-set="pictogram"
+            t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"
+        />
+        <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id" />
+        <!-- donations page or child profile page -->
+        <t t-call="my_compassion.DonationItemComponent">
+            <t t-set="image_fallback_pictogram" t-value="pictogram" />
+            <t t-set="name" t-value="name" />
+            <t t-set="image" t-value="image if not is_csp else ''" />
+            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
+            <t t-set="price" t-value="sponsorship.total_amount" />
             <t
-                t-set="secondary_buttons_data"
-                t-value="[
-            {
+                t-set="secondary_buttons"
+                t-value="[{
                 'icon': 'download01',
                 'color': 'low-blue',
                 'action': 'link',
-                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),
-            }
-        ]"
+                'href': ('/my/download/csp_bvr?csp_id=%s' % sponsorship.id) if is_csp else ('/my/download/gift_bvr?child_id=%s' % sponsorship.child_id.id),
+            }]"
             />
-        </t>
-        <t t-call="my_compassion.DonationItemComponent">
-            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />
-            <t t-set="name" t-value="displayed_title" />
-            <t t-set="image" t-value="displayed_image" />
-            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
-            <t t-set="price" t-value="sponsorship.total_amount" />
-            <t t-set="primary_button" t-value="primary_button_data" />
-            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />
             <t t-set="monthly_noabbr" t-value="True" />
             <t t-set="bg_color" t-value="'light-blue'" />
             <t t-set="accent_color" t-value="'low-blue'" />
             <t t-set="title_color" t-value="'low-blue'" />
             <t t-set="price_color" t-value="'low-blue'" />
+            <t t-set="large_icon" t-value="True" />
+            <t t-if="not is_csp">
+                <t
+                    t-set="primary_button"
+                    t-value="{
+                'label': 'Click to see profile',
+                'pictogram': pictogram,
+                'action': 'link',
+                'href': href,
+                'color': 'low-blue'
+                }"
+                />
+                <t t-set="redirect_link" t-value="href" />
+                <t t-set="redirect_label" t-value="'See child profile'" />
+            </t>
         </t>
     </template>
 </odoo>

my_compassion/templates/components/my2_letter_card.xml

@@ -13,7 +13,9 @@
     <template id="my2_letter_card_component" name="Letter Card Component">
         <t t-set="child" t-value="letter.child_id" />
         <link rel="stylesheet" href="/my_compassion/static/src/css/letter_card.css" />
-        <div class="position-relative d-flex shadow-sm rounded-4 h-100">
+        <div
+            t-attf-class="position-relative d-flex shadow rounded-4 h-100 {{'bg-high-green' if letter.direction == 'Supporter To Beneficiary' else 'bg-high-blue'}}"
+        >
             <!-- Icon at the left -->
             <div>
                 <div
@@ -52,9 +54,7 @@
             <div class="flex-grow-1 d-flex flex-column ml-2 mr-2 mb-2 mt-4">
                 <!-- Top row: Title (left) and Dropdown (right) -->
                 <div class="d-flex justify-content-between align-items-start mb-4">
-                    <div
-                        t-attf-class="h5 #{'text-core-blue' if letter.direction != 'Supporter To Beneficiary' else ''}"
-                    >
+                    <div t-attf-class="h5 #{'text-off-black'}">
                         <t t-if="letter.direction != 'Supporter To Beneficiary'">
                             <span>From</span>
                             <t t-esc="child.preferred_name" />
@@ -67,7 +67,7 @@
                     <!-- Dots button & dropdown menu -->
                     <div class="dropdown">
                         <button
-                            class="btn btn-link p-0 border-0"
+                            t-attf-class="btn btn-link p-0 border-0 {{'text-low-blue' if letter.direction != 'Supporter To Beneficiary' else 'text-low-green'}}"
                             type="button"
                             t-att-id="'dropdownMenuButton' + str(letter.id)"
                             data-toggle="dropdown"
@@ -121,7 +121,7 @@
                     </div>
                 </div>
                 <!-- Letter date -->
-                <div class="mt-auto align-self-end tiny-text text-mid-grey">
+                <div class="mt-auto align-self-end tiny-text text-low-grey">
                     <span t-field="letter.create_date" t-options='{"widget": "date","format": "dd MMM. yyyy"}' />
                 </div>
             </div>