decidim-core 0.29.2 → 0.30.0.rc2

data/app/packs/src/decidim/utilities/dom.js

@@ -0,0 +1,148 @@
+import confirmAction from "src/decidim/confirm"
+import { getMessages } from "src/decidim/i18n"
+
+const { Rails } = window;
+
+const createUnloadPreventer = () => {
+  const preventUnloadConditions = [];
+
+  const confirmMessage = getMessages("confirmUnload") || "Are you sure you want to leave this page?";
+
+  const canUnload = (event) => !preventUnloadConditions.some((condition) => condition(event));
+
+  // TLDR:
+  // The beforeunload event does not work during tests due to the deprecation of
+  // the unload event and ChromeDriver automatically accepting these dialogs.
+  // ---
+  //
+  // Even when there are custom listeners on links and forms, the beforeunload
+  // event is to ensure that the user does not accidentally reload the page or
+  // close the browser or the tab. Note that this does not work during the tests
+  // with ChromeDriver due to the deprecation of the unload event and
+  // ChromeDriver automatically accepting these dialogs. For the time being,
+  // this should work when a real user interacts with the browser along with the
+  // "Permissions-Policy" header set by the backend. For more information about
+  // the header, see Decidim::Headers::BrowserFeaturePermissions).
+  const unloadListener = (event) => {
+    if (canUnload(event)) {
+      return;
+    }
+
+    // According to:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+    //
+    // > [...] best practice is to trigger the dialog by invoking
+    // > preventDefault() on the event object, while also setting returnValue to
+    // > support legacy cases.
+    event.preventDefault();
+    event.returnValue = true;
+  };
+
+  // The beforeunload event listener has to be registered AFTER a user
+  // interaction which is why it is wrapped around the next click event that
+  // happens after the first unload listener was registered. Otherwise it might
+  // not work due to the deprecation of the unload APIs in Chromium based
+  // browsers and possibly in the web standards in the future.
+  //
+  // According to:
+  // https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the_beforeunload_event
+  //
+  // > Never add a beforeunload listener unconditionally or use it as an
+  // > end-of-session signal. Only add it when a user has unsaved work, and
+  // > remove it as soon as that work has been saved.
+  const registerBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.addEventListener("beforeunload", unloadListener);
+  };
+
+  const disableBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.removeEventListener("beforeunload", unloadListener);
+  };
+
+  const linkClickListener = (ev) => {
+    const link = ev.target?.closest("a");
+    if (!link) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      return;
+    }
+
+    window.exitUrl = link.href;
+
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, link).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      link.click();
+    });
+  };
+
+  const formSubmitListener = (ev) => {
+    const source = ev.target?.closest("form");
+    if (!source) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      return;
+    }
+
+    const button = source.closest(Rails.formSubmitSelector);
+    if (!button) {
+      return;
+    }
+
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, button).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      source.submit();
+    });
+  };
+
+  const registerPreventUnloadListeners = () => {
+    window.addEventListener("click", registerBeforeUnload);
+    document.addEventListener("click", linkClickListener);
+    document.addEventListener("submit", formSubmitListener);
+  };
+
+  return {
+    addPreventCondition: (condition) => {
+      if (typeof condition !== "function") {
+        return;
+      }
+
+      if (preventUnloadConditions.length < 1) {
+        // The unload listeners are global, so only the first call to this
+        // function should result to registering these listeners.
+        registerPreventUnloadListeners();
+      }
+
+      preventUnloadConditions.push(condition);
+    }
+  };
+};
+
+const unloadPreventer = createUnloadPreventer();
+
+export const preventUnload = (condition) => unloadPreventer.addPreventCondition(condition);

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

@@ -11,3 +11,33 @@
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
   display: block;
 }
+
+.card-accordion {
+  @apply border-b border-gray-3 mt-6;
+
+  &-title {
+    @apply text-primary font-semibold text-xl inline-block;
+  }
+
+  &-divider-button {
+    @apply flex items-center justify-between items-end w-full;
+
+    svg {
+      @apply inline-block w-6 h-6 fill-primary;
+    }
+
+    &[aria-expanded="true"] {
+      svg {
+        @apply rotate-180 transition-transform;
+      }
+    }
+  }
+
+  &-section {
+    @apply pb-8;
+
+    ul {
+      @apply mb-0;
+    }
+  }
+}

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

@@ -98,3 +98,22 @@
     @apply rounded-full bg-secondary text-white inline-grid place-items-center h-[18px] w-[18px] ml-2 text-xs;
   }
 }
+
+.layout-main__buttons {
+  .button {
+    &__sm {
+      @apply text-2xl [&:not([class*="button\\_\\_text"])]:px-1.5 [&:not([class*="button\\_\\_text"])]:py-1.5 gap-1.5
+      lg:text-sm lg:[&:not([class*="button\\_\\_text"])]:px-4;
+
+      span {
+        @apply hidden lg:flex;
+      }
+    }
+
+    &__transparent {
+      &-secondary {
+        @apply p-0 border-0 lg:border lg:border-secondary;
+      }
+    }
+  }
+}

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

@@ -19,7 +19,7 @@
   }
 
   > svg {
-    @apply w-8 h-8 flex-none text-secondary fill-current;
+    @apply w-6 h-6 flex-none text-secondary fill-current;
   }
 
   &[aria-expanded="false"] > svg:last-of-type,

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

@@ -2,44 +2,50 @@
   @apply space-y-3 opacity-0 -translate-y-full invisible transition-all absolute;
 
   &__text {
-    @apply text-sm text-gray-2;
+    @apply text-md text-gray-2 ml-4 leading-normal;
+
+    a {
+      @apply text-md;
+    }
   }
 
   &__grid {
     @apply flex flex-wrap gap-y-3;
   }
 
-  &__avatar,
-  &__counter {
+  &__avatar {
     @apply rounded-full overflow-hidden border border-white inline-grid w-6 h-6;
   }
 
-  &__counter {
-    @apply bg-background place-items-center text-secondary text-xs font-semibold transition;
-  }
-
   &__button {
     @apply block ml-auto text-right text-xs text-secondary cursor-pointer;
   }
 
-  &__trigger {
-    @apply flex justify-start -space-x-4;
-  }
-
-  &__trigger:hover &__counter,
-  &__trigger[aria-expanded="true"] &__counter {
-    @apply text-white bg-secondary border-secondary;
-  }
-
-  &__trigger[data-target*="dropdown"] {
-    @apply p-0 w-auto;
+  &__container {
+    @apply w-full flex justify-start -space-x-4 p-0 gap-2;
 
     > span {
       @apply inline-grid;
     }
   }
 
-  &[id*="dropdown-menu"][aria-hidden="false"] {
-    @apply opacity-100 visible translate-y-0 transition-all relative;
+  &__modal {
+    .list-item__author {
+      @apply flex w-full justify-between;
+
+      .author__avatar-container {
+        @apply w-8 h-8;
+      }
+
+      .button {
+        @apply [&>svg]:hidden;
+      }
+    }
+
+    .list-item__author + .list-item__author {
+      --vertical-spacing: 1rem;
+
+      @apply mt-[var(--vertical-spacing)];
+    }
   }
 }

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

@@ -79,10 +79,10 @@
 }
 
 .form__wrapper {
-  @apply flex flex-col py-10 gap-10 last:pb-0;
+  @apply flex flex-col pt-10 pb-4 gap-10 last:pb-0;
 
   &-block {
-    @apply py-10 last:pb-0 border-t-2 border-background flex flex-col gap-4 only:[&_*]:ml-auto [&_p]:text-gray-2;
+    @apply py-10 last:pb-0 border-background flex flex-col gap-4 [&_p]:text-gray-2;
   }
 
   &-checkbox-label {

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

@@ -0,0 +1,5 @@
+.hashtags {
+  > label {
+    @apply ml-4;
+  }
+}

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

@@ -115,7 +115,7 @@ header {
       @apply fixed bottom-0 left-0 z-40 bg-white w-full px-4 py-3 flex justify-between text-secondary shadow-[0_-4px_6px_rgba(198,198,198,0.25)];
 
       &__trigger {
-        @apply flex flex-col items-center text-secondary cursor-pointer pl-4 border-l border-gray-3;
+        @apply flex flex-col items-center text-secondary cursor-pointer md:pl-4 md:border-l border-gray-3;
 
         svg {
           @apply w-6 h-6 fill-current;
@@ -175,14 +175,16 @@ header {
       }
 
       &__login {
-        @apply w-20 h-full flex flex-row items-center relative text-secondary gap-1;
+        @apply w-auto h-full flex flex-row items-center relative text-secondary gap-1 pl-2 pr-2;
 
         svg {
           @apply w-8 h-6 fill-current;
         }
 
         svg + span {
-          @apply text-sm first-letter:uppercase pr-4 w-16;
+          @apply text-sm first-letter:uppercase w-auto;
+
+          flex-shrink: 0;
         }
       }
     }

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

@@ -51,7 +51,7 @@
 }
 
 .layout-item {
-  @apply container grid grid-cols-1 lg:grid-cols-12 py-4 lg:py-24 gap-12 lg:gap-x-0;
+  @apply container grid grid-cols-1 lg:grid-cols-12 py-4 lg:py-24 gap-12 lg:gap-x-0 pt-12;
 
   &__main {
     @apply xl:col-start-2 lg:col-span-8 xl:col-span-7 relative;
@@ -59,6 +59,10 @@
 
   &__aside {
     @apply lg:col-start-10 xl:col-start-10 lg:col-span-3 xl:col-span-2;
+
+    &--footer {
+      @apply order-last;
+    }
   }
 
   &__back {
@@ -92,10 +96,36 @@
 
 .layout-main__heading {
   @apply space-y-8;
+
+  .layout-author.has_status {
+    @apply mt-6;
+
+    &:last-of-type {
+      @apply mt-2;
+    }
+  }
 }
 
 .layout-author {
   @apply flex items-center gap-4;
+
+  /* overwrite default dropdown styles */
+  [data-target*="dropdown"] {
+    @apply w-auto cursor-pointer text-secondary text-2xl flex;
+  }
+
+  /* overwrite default dropdown styles */
+  [id*="dropdown-menu"][aria-hidden="true"] {
+    @apply md:hidden;
+  }
+
+  .dropdown__bottom {
+    @apply [&>li]:pl-0;
+
+    .button {
+      @apply [&>svg]:order-1 [&>span]:order-2;
+    }
+  }
 }
 
 .layout-aside__buttons {
@@ -103,7 +133,7 @@
 }
 
 .layout-main__buttons {
-  @apply flex gap-x-1 items-center;
+  @apply flex gap-x-4 items-center;
 }
 
 .layout-aside__ctas-buttons {

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

@@ -1,6 +1,11 @@
+$facebook_background: #0866ff;
+$facebook_background_hover: #155cba; // 30% opacity
+$google_background: #f2f2f2;
+$google_background_hover: #dcdcdc; // 30% opacity
+
 .login {
   &__info {
-    @apply text-gray-2 text-lg space-y-4 mb-10 prose-a:text-secondary prose-a:underline;
+    @apply text-gray-2 text-lg space-y-4 mt-10 prose-a:text-secondary prose-a:underline;
   }
 
   &__info-required {
@@ -12,18 +17,50 @@
   }
 
   &__omniauth {
-    @apply flex flex-col items-center gap-8 text-gray-2 font-semibold w-fit mx-auto mt-10;
+    @apply flex flex-row items-center gap-8 text-gray-2 font-semibold w-fit mx-auto mt-10 [&>a]:w-auto;
 
     &-button {
-      @apply button button__xl border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg w-full;
+      @apply button__lg border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg w-full rounded;
 
       svg {
-        @apply w-6 h-6 fill-current flex-none;
+        @apply w-6 h-6 flex-none fill-white;
+      }
+
+      span {
+        @apply hidden 2xl:inline;
+      }
+
+      &--developer {
+        @apply flex;
+      }
+
+      &--facebook {
+        @apply flex flex-row text-white border border-background;
+
+        background-color: $facebook_background;
+      }
+
+      &--facebook:hover {
+        background-color: $facebook_background_hover;
+      }
+
+      &--x {
+        @apply flex flex-row text-white bg-black;
+      }
+
+      &--google {
+        @apply flex flex-row text-black border border-background;
+
+        background-color: $google_background;
+      }
+
+      &--google:hover {
+        background-color: $google_background_hover;
       }
     }
 
     &-separator {
-      @apply mt-10 flex items-center justify-center gap-12 after:content-[''] before:content-[''] after:h-px before:h-px after:bg-background before:bg-background after:grow before:grow;
+      @apply mt-10 flex items-center justify-center gap-8 after:content-[''] before:content-[''] after:h-0.5 before:h-0.5 after:bg-background before:bg-background after:grow before:grow;
     }
 
     &__horizontal {
@@ -32,7 +69,7 @@
   }
 
   &__links {
-    @apply flex flex-col gap-4 py-10 border-t-2 border-background;
+    @apply flex flex-col gap-4 pb-10 border-background items-center;
 
     a {
       @apply w-fit text-secondary hover:underline;
@@ -40,10 +77,20 @@
   }
 
   &__modal {
+    @apply p-8;
+
     &-links {
       @apply flex flex-col md:flex-row gap-4 justify-between items-start md:items-center [&>a]:text-secondary;
     }
 
+    &-remember {
+      @apply flex flex-row justify-between;
+
+      a {
+        @apply underline;
+      }
+    }
+
     [data-announcement] {
       @apply mt-4;
     }

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

@@ -42,4 +42,46 @@
       @apply w-full md:w-auto;
     }
   }
+
+  &[data-drawer] {
+    & > * {
+      @apply h-full max-h-full w-0 inset-0 translate-x-0 translate-y-0 right-0 left-auto max-w-[90%] lg:max-w-[900px] transition-none transition-[width] duration-500 overflow-visible;
+    }
+
+    &[aria-hidden="false"] {
+      > * {
+        @apply w-[60%];
+      }
+    }
+
+    [data-dialog-container] {
+      @apply grid-cols-none;
+
+      &.layout-content {
+        @apply bg-white;
+
+        > .spinner-container {
+          @apply sticky h-screen;
+        }
+      }
+    }
+
+    [data-dialog-closable] {
+      @apply absolute top-0 right-auto -left-10 p-4 py-2 bg-white rounded-bl;
+    }
+
+    .form-defaults {
+      h1 {
+        @apply text-2xl font-semibold text-black my-10 mx-4 border-b border-gray border-b-[1px] pb-8;
+
+        > .button {
+          @apply text-sm float-right;
+        }
+      }
+    }
+
+    .card {
+      @apply p-4 my-4 bg-background-2;
+    }
+  }
 }

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

@@ -3,4 +3,8 @@
   [data-dialog-actions] {
     @apply flex-nowrap;
   }
+
+  a {
+    @apply underline text-secondary;
+  }
 }

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

@@ -19,6 +19,52 @@
     > [id^="html-block"] {
       @apply w-full prose max-w-none [&+*]:border-t-0;
     }
+
+    .content-block {
+      @apply gap-0;
+
+      &__title {
+        @apply pb-8;
+      }
+
+      .documents {
+        &__container > div {
+          @apply border-b border-[#D3D5D9] border-t-0 pb-4 pt-6;
+        }
+
+        &__dropdown-container {
+          @apply border-b border-[#D3D5D9];
+        }
+
+        &__collection-trigger {
+          @apply bg-transparent max-w-full mt-0 pb-4 pt-6 px-0 rounded-none;
+
+          .documents-details {
+            @apply flex flex-col gap-2.5;
+
+            span {
+              @apply flex items-center text-lg leading-6 text-[var(--secondary)] font-semibold gap-1.5;
+            }
+          }
+        }
+
+        &__collection-content {
+          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+
+          p {
+            @apply pt-4;
+          }
+
+          & > .documents__container {
+            @apply border-t-0 pt-0 mt-0;
+
+            & > :last-child {
+              @apply border-b-0;
+            }
+          }
+        }
+      }
+    }
   }
 
   &__content-block {

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

@@ -166,7 +166,7 @@
       }
 
       &-container {
-        @apply w-12 h-12 relative flex-none;
+        @apply w-20 h-20 relative flex-none mr-4;
       }
 
       &-badge {

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

@@ -0,0 +1,64 @@
+.success-image {
+  --success: #28a745;
+
+  width: 100px;
+  height: 100px;
+  margin: auto;
+
+  .animation-success__checkmark {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 5;
+    stroke: var(--success);
+    stroke-miterlimit: 10;
+    box-shadow: inset 0 0 0 #4bb71b;
+    animation: fill 0.4s ease-in-out 0.4s forwards,
+      scale 0.3s ease-in-out 0.09s both;
+    position: relative;
+    top: 5px;
+    right: 5px;
+    margin: 0 auto;
+  }
+
+  .animation-success__checkmark__circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-width: 5;
+    stroke-miterlimit: 10;
+    stroke: var(--success);
+    fill: #fff;
+    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+
+  .animation-success__checkmark__check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+  }
+
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+
+  @keyframes fill {
+    100% {
+      box-shadow: inset 0 0 0 30 var(--success);
+    }
+  }
+}