diff --git a/decidim-budgets/config/locales/en.yml b/decidim-budgets/config/locales/en.yml
index a8f174dfc4aba..ee8f2ac008192 100644
--- a/decidim-budgets/config/locales/en.yml
+++ b/decidim-budgets/config/locales/en.yml
@@ -172,7 +172,7 @@ en:
back_to: Back to %{component_name}
close_modal: Close modal
continue: Continue
- more_information: More information
+ more_information: More information about budget
budgets_list:
budgets: Budgets
cancel_order:
diff --git a/decidim-budgets/spec/system/orders_spec.rb b/decidim-budgets/spec/system/orders_spec.rb
index be2575f3710f6..b0f288d89502f 100644
--- a/decidim-budgets/spec/system/orders_spec.rb
+++ b/decidim-budgets/spec/system/orders_spec.rb
@@ -109,7 +109,7 @@
it "displays total budget" do
within ".budget-summary", match: :first do
- expect(page).to have_content("Budget\n€0")
+ expect(page).to have_content("€0\nBudget")
end
end
end
@@ -129,7 +129,7 @@
expect(page).to have_css ".budget-list__data--added", count: 1
within ".budget-summary__progressbar-marks", match: :first do
- expect(page).to have_content(/Assigned\s€25,000,000/)
+ expect(page).to have_content(/€25,000,000\sAssigned/)
end
within ".budget__list--header" do
expect(page).to have_content(/Added\s1/)
@@ -162,7 +162,7 @@
expect(page).to have_css ".budget-list__data--added", count: 1
within ".budget-summary__progressbar-marks", match: :first do
- expect(page).to have_content(/Assigned\s€25,000,000/)
+ expect(page).to have_content(/€25,000,000\sAssigned/)
end
within ".budget__list--header" do
expect(page).to have_content(/Added\s1/)
@@ -278,7 +278,7 @@
visit_budget
within ".budget-summary__progressbar-marks", match: :first do
- expect(page).to have_content(/Assigned\s€25,000,000/)
+ expect(page).to have_content(/€25,000,000\sAssigned/)
end
within ".budget__list--header" do
expect(page).to have_content(/Added\s1/)
@@ -289,7 +289,7 @@
end
within ".budget-summary__progressbar-marks", match: :first do
- expect(page).to have_content(/Assigned\s€0/)
+ expect(page).to have_content(/€0\sAssigned/)
end
within ".budget__list--header" do
expect(page).to have_content(/Added\s0/)
diff --git a/decidim-core/app/cells/decidim/progress_bar/show.erb b/decidim-core/app/cells/decidim/progress_bar/show.erb
index 91f460fec3c2c..2a099ae79b66e 100644
--- a/decidim-core/app/cells/decidim/progress_bar/show.erb
+++ b/decidim-core/app/cells/decidim/progress_bar/show.erb
@@ -4,11 +4,13 @@
<%= content_tag :span, total if total != 0 %>
diff --git a/decidim-core/app/packs/src/decidim/sticky_header.js b/decidim-core/app/packs/src/decidim/sticky_header.js
index 335ab1cd903e2..57459ed94d4ba 100644
--- a/decidim-core/app/packs/src/decidim/sticky_header.js
+++ b/decidim-core/app/packs/src/decidim/sticky_header.js
@@ -1,14 +1,37 @@
-// This script implements a sticky header that hides when participants scroll down and shows when they scroll up.
-// Sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page.
-// They increase the discoverability of the elements in the header.
+// This script implements the sticky header and the sticky buttons. The sticky header hides when participants scroll down and shows when they scroll up.
+// Sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
+// The sticky buttons in the other hand, those are some of the main Call to Actions (CTAs) that remain accessible on the screen as the user scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets components.
+
let prevScroll = window.scrollY;
const stickyHeader = document.querySelector("[data-sticky-header]");
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelectorAll("[data-sticky-buttons]");
+
+const isElementInViewport = (element) => {
+ const rect = element.getBoundingClientRect();
+ return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+};
+
+const adjustCtasButtons = () => {
+ if (!stickyButtons || !stickyButtons.length) {
+ return;
+ }
+
+ let visibleButtons = Array.from(stickyButtons).filter(isElementInViewport);
+
+ if (visibleButtons.length > 0) {
+ const marginBottom = Math.max(...visibleButtons.map((ctasButton) => ctasButton.offsetHeight));
+ footer.style.marginBottom = `${marginBottom}px`;
+ } else {
+ footer.style.marginBottom = 0;
+ }
+};
if (stickyHeader) {
document.addEventListener("scroll", () => {
// if a subelement is not visible it has no offsetParent
const header = document.getElementById("main-bar").offsetParent;
- if (header) {
+ if (header && window.getComputedStyle(stickyHeader).position === "fixed") {
let currentScroll = window.scrollY;
let goingDown = prevScroll > currentScroll;
let change = Math.abs(prevScroll - currentScroll);
@@ -20,6 +43,12 @@ if (stickyHeader) {
}
prevScroll = currentScroll;
}
+
+ adjustCtasButtons();
}
});
+
+ document.addEventListener("on:toggle", () => {
+ adjustCtasButtons();
+ });
};
diff --git a/decidim-core/app/packs/stylesheets/decidim/_flash.scss b/decidim-core/app/packs/stylesheets/decidim/_flash.scss
index be68d8d442071..1c02977fafbfa 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_flash.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_flash.scss
@@ -12,7 +12,7 @@
}
&__message {
- @apply text-black font-medium text-md;
+ @apply text-black font-medium text-md flex-col;
a {
@apply underline text-secondary;
diff --git a/decidim-core/app/packs/stylesheets/decidim/_layout.scss b/decidim-core/app/packs/stylesheets/decidim/_layout.scss
index d268b413691ea..7dbdf4614ff76 100644
--- a/decidim-core/app/packs/stylesheets/decidim/_layout.scss
+++ b/decidim-core/app/packs/stylesheets/decidim/_layout.scss
@@ -105,3 +105,16 @@
.layout-main__buttons {
@apply flex gap-x-1 items-center;
}
+
+.layout-aside__ctas-buttons {
+ @apply fixed md:relative inset-x-0 bottom-0 z-30 md:z-0 flex flex-row-reverse md:flex-col items-center md:items-stretch last:[&>button]:font-semibold first:[&>button]:text-lg justify-around bg-white md:bg-transparent gap-4 md:gap-0 p-4 md:p-0 shadow-inner md:shadow-none first:[&>*]:grow md:first:[&>*]:grow-0 last:[&>*]:w-1/2 md:last:[&>*]:w-auto h-20 md:h-fit first:[&>button]:py-3;
+
+ .meeting__aside-progress,
+ .proposals__aside-progress {
+ @apply flex flex-col-reverse md:flex-col md:w-auto;
+ }
+}
+
+.survey-section-buttons {
+ @apply flex-row last:[&>button]:font-semibold md:[&>button]:font-normal last:[&>button]:text-lg md:last:[&>button]:text-sm md:first:[&>button]:text-sm last:[&>button]:py-3 md:last:[&>button]:py-1.5 md:first:[&>button]:py-1.5;
+}
diff --git a/decidim-core/app/views/layouts/decidim/header/_main_links_mobile_search.html.erb b/decidim-core/app/views/layouts/decidim/header/_main_links_mobile_search.html.erb
new file mode 100644
index 0000000000000..4902b66b3150d
--- /dev/null
+++ b/decidim-core/app/views/layouts/decidim/header/_main_links_mobile_search.html.erb
@@ -0,0 +1,13 @@
+