From ded2318c392dd442fadb015e786b92331aca6785 Mon Sep 17 00:00:00 2001 From: Daniel Gergely Date: Fri, 17 Apr 2026 14:52:33 +0200 Subject: [PATCH 1/5] FEAT: new mobile navigation menu v1 --- .gitignore | 1 + my_compassion/__manifest__.py | 1 + my_compassion/views/my2_bottom_nav.xml | 62 ++++++++ .../static/src/img/pictograms/GiftBasket.svg | 23 +++ .../static/src/img/pictograms/Profile.svg | 17 +++ .../static/src/scss/layout/_header.scss | 138 ++++++++++++++++++ 6 files changed, 242 insertions(+) create mode 100644 my_compassion/views/my2_bottom_nav.xml create mode 100644 theme_compassion_2025/static/src/img/pictograms/GiftBasket.svg create mode 100644 theme_compassion_2025/static/src/img/pictograms/Profile.svg diff --git a/.gitignore b/.gitignore index 335434320..71f7c5f2d 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,4 @@ sms_sponsorship/webapp/build sms_sponsorship/webapp/.idea /sbc_compassion/FPDF/.idea/ /sbc_compassion/FPDF/stderr.txt +*.DS_Store diff --git a/my_compassion/__manifest__.py b/my_compassion/__manifest__.py index 5a976c5a5..a31861c90 100644 --- a/my_compassion/__manifest__.py +++ b/my_compassion/__manifest__.py @@ -59,6 +59,7 @@ "views/correspondence_view.xml", "views/correspondence_prewritten_letter.xml", "views/my2_header_menu.xml", + "views/my2_bottom_nav.xml", "data/signup_email_confirmation.xml", "data/communication_config.xml", "data/dynamic_stylesheets.xml", diff --git a/my_compassion/views/my2_bottom_nav.xml b/my_compassion/views/my2_bottom_nav.xml new file mode 100644 index 000000000..8b794f86c --- /dev/null +++ b/my_compassion/views/my2_bottom_nav.xml @@ -0,0 +1,62 @@ + + + + \ No newline at end of file diff --git a/theme_compassion_2025/static/src/img/pictograms/GiftBasket.svg b/theme_compassion_2025/static/src/img/pictograms/GiftBasket.svg new file mode 100644 index 000000000..1a0614ac5 --- /dev/null +++ b/theme_compassion_2025/static/src/img/pictograms/GiftBasket.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_compassion_2025/static/src/img/pictograms/Profile.svg b/theme_compassion_2025/static/src/img/pictograms/Profile.svg new file mode 100644 index 000000000..da0188c6e --- /dev/null +++ b/theme_compassion_2025/static/src/img/pictograms/Profile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/theme_compassion_2025/static/src/scss/layout/_header.scss b/theme_compassion_2025/static/src/scss/layout/_header.scss index 8f416753e..a8183aa95 100644 --- a/theme_compassion_2025/static/src/scss/layout/_header.scss +++ b/theme_compassion_2025/static/src/scss/layout/_header.scss @@ -30,3 +30,141 @@ } } } + +/* App-Style Bottom Navigation for /my2/ Portal */ +@include media-breakpoint-down(sm) { + .my2-bottom-nav { + position: fixed !important; + bottom: 0 !important; + left: 0 !important; + width: 100% !important; + + z-index: $zindex-fixed + 100; + /* Remove padding-bottom from the nav itself so the cutout aligns perfectly */ + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important; + background-color: #ffffff; + + /* Ensure flex layout for the tabs ignores the absolute indicator */ + display: flex; + justify-content: space-between; + + .nav-tab { + position: relative; + z-index: 1; + width: 16.666%; /* 6 icons */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 40px; + text-align: center; + padding-bottom: env(safe-area-inset-bottom); + + i, .vignette-icon { + position: relative; + font-size: 1.75rem; + margin-top: -20px; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s; + } + + span { + position: absolute; + bottom: env(safe-area-inset-bottom); + left: 50%; + transform: translateX(-50%); + font-size: 0.6rem; + font-weight: 600; + white-space: nowrap; + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + + sup { + background-color: var(--core-blue); + position: absolute; + top: -10px; + right: -8px; + font-size: 0.6rem; + } + + /* --- ACTIVE STATE --- */ + &.active { + i, .vignette-icon { + /* Jump up into the floating bubble and turn white */ + transform: translateY(-20px) scale(1.1); + color: #ffffff !important; + margin-top: 0; + } + + span { + opacity: 1; + } + + sup { + top: -20px; + right: -12px; + background-color: var(--low-yellow); + } + } + } + + /* --- THE CUTOUT ILLUSION --- */ + .indicator-wrapper { + position: absolute; + top: 0; + left: 0; + width: 16.666%; + height: 100%; + z-index: 0; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + pointer-events: none; + + .indicator { + position: absolute; + width: 60px; + height: 60px; + top: -22px; + left: 50%; + transform: translateX(-50%); + background: var(--compassion-blue); + border-radius: 50%; + border: 6px solid var(--pure-white); + } + } + + /* --- THE SHIFTING LOGIC --- */ + /* Moves the indicator wrapper by 100% of its own width for each slot */ + .nav-tab:nth-child(1).active ~ .indicator-wrapper { + transform: translateX(0); + } + + .nav-tab:nth-child(2).active ~ .indicator-wrapper { + transform: translateX(100%); + } + + .nav-tab:nth-child(3).active ~ .indicator-wrapper { + transform: translateX(200%); + } + + .nav-tab:nth-child(4).active ~ .indicator-wrapper { + transform: translateX(300%); + } + + .nav-tab:nth-child(5).active ~ .indicator-wrapper { + transform: translateX(400%); + } + + .nav-tab:nth-child(6).active ~ .indicator-wrapper { + transform: translateX(500%); + } + } + + /* Prevent content from hiding behind the bar */ + body { + margin-bottom: calc(5rem + env(safe-area-inset-bottom)) !important; + } +} + +#bottom_nav_spacer { + height:75px; +} From 06727d2ba4f463ea824432e749954b832d6b69a9 Mon Sep 17 00:00:00 2001 From: Daniel Gergely Date: Mon, 20 Apr 2026 08:09:53 +0200 Subject: [PATCH 2/5] FEAT: new pictograms --- theme_compassion_2025/data/pictograms.xml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/theme_compassion_2025/data/pictograms.xml b/theme_compassion_2025/data/pictograms.xml index b5d2ce243..74b0c0b21 100644 --- a/theme_compassion_2025/data/pictograms.xml +++ b/theme_compassion_2025/data/pictograms.xml @@ -81,6 +81,10 @@ Food + + GiftBasket + + GiftDonationGeneral @@ -145,6 +149,10 @@ Neighbourhood + + Profile + + UnsponsoredChildren From 530a459a2638fcd90db4ac34ad3dcf2007f48852 Mon Sep 17 00:00:00 2001 From: Daniel Gergely Date: Thu, 23 Apr 2026 09:46:04 +0200 Subject: [PATCH 3/5] FEAT: added writing icon --- my_compassion/templates/pages/my2_child_letters.xml | 4 ++++ theme_compassion_2025/data/pictograms.xml | 4 ++++ .../static/src/img/pictograms/Writing.svg | 7 +++++++ 3 files changed, 15 insertions(+) create mode 100644 theme_compassion_2025/static/src/img/pictograms/Writing.svg diff --git a/my_compassion/templates/pages/my2_child_letters.xml b/my_compassion/templates/pages/my2_child_letters.xml index ae5bf4158..19e367a57 100644 --- a/my_compassion/templates/pages/my2_child_letters.xml +++ b/my_compassion/templates/pages/my2_child_letters.xml @@ -338,6 +338,10 @@ + +
+ +
diff --git a/theme_compassion_2025/data/pictograms.xml b/theme_compassion_2025/data/pictograms.xml index 74b0c0b21..a8cbe7e5e 100644 --- a/theme_compassion_2025/data/pictograms.xml +++ b/theme_compassion_2025/data/pictograms.xml @@ -169,5 +169,9 @@ WhereMostNeeded + + Writing + + diff --git a/theme_compassion_2025/static/src/img/pictograms/Writing.svg b/theme_compassion_2025/static/src/img/pictograms/Writing.svg new file mode 100644 index 000000000..26e8f5819 --- /dev/null +++ b/theme_compassion_2025/static/src/img/pictograms/Writing.svg @@ -0,0 +1,7 @@ + + + + + + + From e8009abe0058043dd31ac6ca82b3e873a5b13d86 Mon Sep 17 00:00:00 2001 From: NoeBerdoz Date: Wed, 6 May 2026 14:20:52 +0200 Subject: [PATCH 4/5] [T3166] FIX: enhancements and fixes on bottom nav - Fix broken write button on letters page - Implement conditional rendering of Sponsorships and Letters tabs - Render cart badge only when cart is non-empty - Refactor the blue color to use the new core one - Fix pre-commit --- .../templates/pages/my2_child_letters.xml | 13 ++- my_compassion/views/my2_bottom_nav.xml | 88 ++++++++++++------- .../static/src/scss/layout/_header.scss | 31 +++++-- 3 files changed, 91 insertions(+), 41 deletions(-) diff --git a/my_compassion/templates/pages/my2_child_letters.xml b/my_compassion/templates/pages/my2_child_letters.xml index 19e367a57..c38b454c5 100644 --- a/my_compassion/templates/pages/my2_child_letters.xml +++ b/my_compassion/templates/pages/my2_child_letters.xml @@ -338,10 +338,15 @@ - -
- -
+ + + + diff --git a/my_compassion/views/my2_bottom_nav.xml b/my_compassion/views/my2_bottom_nav.xml index 8b794f86c..a6aab23b4 100644 --- a/my_compassion/views/my2_bottom_nav.xml +++ b/my_compassion/views/my2_bottom_nav.xml @@ -1,62 +1,88 @@ - \ No newline at end of file + diff --git a/theme_compassion_2025/static/src/scss/layout/_header.scss b/theme_compassion_2025/static/src/scss/layout/_header.scss index a8183aa95..781af96c7 100644 --- a/theme_compassion_2025/static/src/scss/layout/_header.scss +++ b/theme_compassion_2025/static/src/scss/layout/_header.scss @@ -51,7 +51,8 @@ .nav-tab { position: relative; z-index: 1; - width: 16.666%; /* 6 icons */ + /* Width adapts to --tab-count set on the nav (4 for non-sponsors, 6 for sponsors) */ + width: calc(100% / var(--tab-count, 6)); display: flex; flex-direction: column; align-items: center; @@ -113,7 +114,7 @@ position: absolute; top: 0; left: 0; - width: 16.666%; + width: calc(100% / var(--tab-count, 6)); height: 100%; z-index: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -126,7 +127,7 @@ top: -22px; left: 50%; transform: translateX(-50%); - background: var(--compassion-blue); + background: var(--core-blue); border-radius: 50%; border: 6px solid var(--pure-white); } @@ -159,12 +160,30 @@ } } + /* Floating round "write a letter" shortcut button on the per-child letters page */ + #write_button { + position: fixed; + right: 1rem; + bottom: calc(5rem + env(safe-area-inset-bottom) + 0.75rem); + width: 56px; + height: 56px; + border-radius: 50%; + background: var(--core-blue); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); + z-index: $zindex-fixed + 101; + + .vignette-icon { + font-size: 1.6rem; + color: var(--pure-white); + } + } + /* Prevent content from hiding behind the bar */ body { margin-bottom: calc(5rem + env(safe-area-inset-bottom)) !important; } -} -#bottom_nav_spacer { - height:75px; + #bottom_nav_spacer { + height: 75px; + } } From 663422743080c4e6676ec865aa9bcfa0c6cbb92c Mon Sep 17 00:00:00 2001 From: NoeBerdoz Date: Wed, 6 May 2026 16:03:33 +0200 Subject: [PATCH 5/5] [T3166] FIX: force scope on bottom_nav_spacer and remove duplicate spacing on body --- my_compassion/views/my2_bottom_nav.xml | 4 +--- theme_compassion_2025/static/src/scss/layout/_header.scss | 8 ++------ 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/my_compassion/views/my2_bottom_nav.xml b/my_compassion/views/my2_bottom_nav.xml index a6aab23b4..590146c1b 100644 --- a/my_compassion/views/my2_bottom_nav.xml +++ b/my_compassion/views/my2_bottom_nav.xml @@ -15,11 +15,9 @@ separator=" " /> - -
- +