decidim-core 0.28.1 → 0.29.0.rc1

data/app/packs/src/decidim/sticky_header.js

@@ -0,0 +1,87 @@
+// 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.
+
+import { screens } from "tailwindcss/defaultTheme"
+
+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;
+  }
+};
+
+// Fix the menu bar container margin top when there are multiple elements in the sticky header
+// As there could be different heights and we cannot know beforehand, we need to adjust this in a dynamic way
+// For instance we could have the omnipresent banner, the admin bar and the offline banner
+const fixMenuBarContainerMargin = () => {
+  if (!stickyHeader) {
+    return;
+  }
+
+  const isMaxScreenSize = (key) => {
+    return window.matchMedia(`(max-width: ${screens[key]})`).matches;
+  }
+
+  const menuBarContainer = document.querySelector("#menu-bar-container");
+  const marginTop = isMaxScreenSize("md")
+    ? stickyHeader.offsetHeight
+    : 0;
+
+  menuBarContainer.style.marginTop = `${marginTop}px`;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  fixMenuBarContainerMargin();
+});
+
+window.addEventListener("resize", () => {
+  fixMenuBarContainerMargin();
+});
+
+if (stickyHeader) {
+  document.addEventListener("scroll", () => {
+    fixMenuBarContainerMargin();
+
+    // if a subelement is not visible it has no offsetParent
+    const header = document.getElementById("main-bar").offsetParent;
+
+    if (header && window.getComputedStyle(stickyHeader).position === "fixed") {
+      let currentScroll = window.scrollY;
+      let goingDown = prevScroll > currentScroll;
+      let change = Math.abs(prevScroll - currentScroll);
+      if (change > 5) {
+        if (goingDown || currentScroll < stickyHeader.offsetHeight) {
+          stickyHeader.style.top = 0;
+        } else {
+          stickyHeader.style.top = `-${stickyHeader.offsetHeight}px`;
+        }
+        prevScroll = currentScroll;
+      }
+
+      adjustCtasButtons();
+    }
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+};

data/app/packs/src/decidim/sw/sw.js

@@ -8,9 +8,8 @@ import { NetworkFirst, NetworkOnly } from "workbox-strategies";
 import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { ExpirationPlugin } from "workbox-expiration";
 
-
 // https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#debugging_workbox
-self.__WB_DISABLE_DEV_LOGS = true
+self.__WB_DISABLE_DEV_LOGS = true;
 
 /**
  * This is a workaround to bypass a webpack compilation error
@@ -35,10 +34,12 @@ self.addEventListener("notificationclick", (event) => {
   // Get all the Window clients
   event.waitUntil(
     self.clients.matchAll({ type: "window" }).then((clientsArr) => {
-      const windowToFocus = clientsArr.find((windowClient) => windowClient.url === event.notification.data.url);
+      const windowToFocus = clientsArr.find(
+        (windowClient) => windowClient.url === event.notification.data.url
+      );
       if (windowToFocus) {
         // If a Window tab matching the targeted URL already exists, focus that
-        windowToFocus.focus()
+        windowToFocus.focus();
       } else {
         // Otherwise, open a new tab to the applicable URL and focus it
         self.clients.
@@ -51,7 +52,8 @@ self.addEventListener("notificationclick", (event) => {
 
 // avoid caching admin or users paths
 registerRoute(
-  ({ url }) => ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
+  ({ url }) =>
+    ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
   new NetworkOnly()
 );
 
@@ -69,7 +71,7 @@ registerRoute(
         maxAgeSeconds: 60 * 60
       })
     ]
-  }),
+  })
 );
 
 // common recipes

data/app/packs/src/decidim/tooltips.js

@@ -19,7 +19,7 @@ const getAbsolutePosition = (node, relativeParent) => {
   let [pageX, pageY] = [window.pageXOffset, window.pageYOffset]
   if (relativeParent) {
     // in order to calculate the relative parent position, we reuse this function,
-    // using the parent regarding the window and substracting the topLeft corner (its relative position [0,0])
+    // using the parent regarding the window and subtracting the topLeft corner (its relative position [0,0])
     const { topLeft: [parentX, parentY] } = getAbsolutePosition(relativeParent);
     [pageX, pageY] = [pageX - parentX, pageY - parentY]
   }

data/app/packs/stylesheets/decidim/_accordion.scss

@@ -4,10 +4,10 @@
 
 [data-component="accordion"]
   [id*="comment"][class="comment-reply"][aria-hidden="true"] {
-  display: block;
+  display: none;
 }
 
 [data-component="accordion"]
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
-  display: none;
+  display: block;
 }

data/app/packs/stylesheets/decidim/_cards.scss

@@ -134,7 +134,7 @@
     &-month,
     &-day,
     &-year {
-      @apply inline-flex items-center justify-evenly empty:[&>span]:hidden;
+      @apply inline-flex items-center justify-evenly empty:[&>div]:hidden;
     }
   }
 
@@ -143,7 +143,7 @@
   &__list-metadata {
     @apply mt-auto inline-flex flex-wrap gap-x-4 md:gap-0;
 
-    & > span {
+    & > div {
       @apply inline-flex items-center gap-1 px-0 md:px-6 border-gray-3 border-0 md:border-r first:pl-0 last:pr-0 last:border-r-0 text-sm text-gray-2;
 
       & > svg {

data/app/packs/stylesheets/decidim/_datepicker.scss

@@ -0,0 +1,193 @@
+.sc-wc-datepicker-h {
+  @apply absolute w-80 h-96 left-0;
+}
+
+.wc-datepicker {
+  @apply absolute w-80 h-96 z-20 text-sm;
+
+  &__header {
+    @apply px-0 py-0 pb-0 gap-0 h-14;
+  }
+
+  &__month-select,
+  &__year-select {
+    @apply h-10 mb-4 leading-normal;
+  }
+
+  &__month-select {
+    @apply pr-3;
+  }
+
+  &__year-select {
+    @apply max-w-fit;
+  }
+
+  &__previous-month-button,
+  &__next-month-button,
+  &__previous-year-button,
+  &__next-year-button {
+    @apply h-10 text-secondary bg-transparent;
+  }
+
+  &__date:focus > * {
+    @apply outline-1 outline-gray;
+  }
+
+  &__date--selected > * {
+    @apply bg-secondary border-solid border-2 border-gray;
+  }
+
+  &__date--selected:hover > * {
+    @apply bg-secondary;
+  }
+}
+
+.datepicker {
+  &__container {
+    @apply absolute w-80 h-96;
+  }
+
+  &__datepicker-row {
+    @apply flex gap-4;
+  }
+
+  &__time-row {
+    @apply flex top-6 absolute w-full;
+  }
+
+  &__date-column,
+  &__time-column {
+    @apply flex-1 w-1/2 relative;
+
+    > input {
+      @apply h-9;
+    }
+  }
+
+  &__hour-column,
+  &__minute-column {
+    @apply flex-1 h-20 relative my-2 mx-8 rounded border border-solid border-gray;
+  }
+
+  &__period-column {
+    @apply w-28 h-8 top-1 right-10 my-2 mx-1 absolute;
+  }
+
+  &__calendar-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__clock-button {
+    @apply h-8 rounded absolute top-4 mt-0.5 fill-gray-2 leading-3 right-2;
+  }
+
+  &__time-frame {
+    @apply w-52 max-w-lg h-40 bg-white absolute border border-solid border-[#f2f3f5] z-20;
+  }
+
+  &__hour-picker,
+  &__minute-picker {
+    @apply w-1/2 left-2.5 h-8 text-center text-sm absolute top-6;
+
+    &:hover {
+      @apply cursor-default;
+    }
+
+    &:focus-visible {
+      @apply outline-0;
+    }
+  }
+
+  &__close-calendar {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__pick-calendar {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+
+    &:disabled {
+      @apply bg-gray;
+    }
+  }
+
+  &__close-clock {
+    @apply absolute z-30 bottom-2 right-1;
+  }
+
+  &__reset-clock {
+    @apply absolute z-30 bottom-2 left-2;
+  }
+
+  &__select-clock {
+    @apply absolute z-30 bottom-2 right-16 mr-1;
+  }
+
+  &__hour-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__hour-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-up {
+    @apply absolute rounded-t w-full h-6;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__minute-down {
+    @apply absolute rounded-b w-full h-6 bottom-0;
+
+    &:hover {
+      @apply bg-gray-3;
+    }
+  }
+
+  &__period-am {
+    @apply ml-1 accent-secondary bg-secondary;
+  }
+
+  &__period-pm {
+    @apply ml-1;
+  }
+
+  &__label-row {
+    @apply absolute flex top-2 w-full text-sm font-semibold;
+  }
+
+  &__hour-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__minute-label-container {
+    @apply flex-1 text-center;
+  }
+
+  &__help-text-container {
+    @apply w-full h-10 relative;
+  }
+
+  &__help-date {
+    @apply w-1/2 relative inline-block;
+  }
+
+  &__help-time {
+    @apply w-1/2 relative inline-block left-2;
+  }
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}

data/app/packs/stylesheets/decidim/_dropdown.scss

@@ -33,6 +33,42 @@
   }
 }
 
+[data-target="dropdown-menu-language-chooser"] {
+  & > span {
+    @apply block font-semibold text-black text-xs;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
+[data-target="dropdown-menu-language-chooser-mobile"] {
+  & > span {
+    @apply block text-black font-normal text-sm;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
 .dropdown {
   @apply absolute border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
 

data/app/packs/stylesheets/decidim/_emoji.scss

@@ -0,0 +1,36 @@
+.emoji-picker {
+  &__popupContainer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+
+    & .emoji-picker__closeButton {
+      position: absolute;
+      border: none;
+      z-index: 1;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+      padding: 4px;
+      align-self: flex-end;
+      transform: translate(50%, -50%);
+      background: #999;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      &:hover {
+        background: #4f46e5;
+      }
+
+      & svg {
+        fill: white;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+  }
+}

data/app/packs/stylesheets/decidim/_filters.scss

@@ -1,5 +1,7 @@
 .filter {
-  @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  label {
+    @apply flex items-center gap-2 p-1.5 rounded cursor-pointer relative;
+  }
 
   &-container {
     @apply rounded border-4 border-background md:border-0;
@@ -69,7 +71,7 @@
   }
 
   &-search {
-    @apply w-full relative;
+    @apply w-full relative bg-gray;
 
     input {
       @apply w-full;

data/app/packs/stylesheets/decidim/_flash.scss

@@ -12,9 +12,9 @@
   }
 
   &__message {
-    @apply text-black font-semibold text-md;
+    @apply text-black font-medium text-md flex-col;
 
-    a {
+    a:not(.button) {
       @apply underline text-secondary;
 
       svg {

data/app/packs/stylesheets/decidim/_footer.scss

@@ -1,11 +1,9 @@
 footer {
-  @apply mb-16 lg:mb-0;
-
   .main-footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply flex flex-col lg:flex-row gap-8 container py-10;
+      @apply hidden flex flex-col lg:flex-row lg:block gap-8 container py-10;
     }
 
     &__down {

data/app/packs/stylesheets/decidim/_forms.scss

@@ -1,3 +1,11 @@
+#form-search-mobile {
+  @apply py-1.5 px-4 bg-gray-5 rounded-lg border border-gray outline outline-1 outline-transparent;
+
+  input[type="text"] {
+    @apply bg-gray-5;
+  }
+}
+
 .form-defaults {
   /* text-like inputs */
   input[type="date"],
@@ -154,7 +162,7 @@
   }
 
   button {
-    @apply absolute right-2 top-8;
+    @apply absolute ltr:right-2 rtl:left-2 top-8;
   }
 }