decidim-core 0.28.6 → 0.29.0.rc1

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

@@ -20,8 +20,26 @@ header {
     }
   }
 
+  #flash-messages-container {
+    @apply mt-28 md:mt-0;
+  }
+
+  &.with-admin-bar {
+    #flash-messages-container {
+      @apply mt-40 md:mt-0;
+    }
+
+    #menu-bar-container {
+      @apply mt-[140px] md:mt-0;
+    }
+  }
+
+  #sticky-header-container {
+    @apply fixed w-full top-0 shadow-lg z-40 bg-white md:relative transition-top duration-300;
+  }
+
   .main-bar {
-    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5;
+    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5 h-24;
 
     &__container {
       @apply relative w-full;
@@ -31,6 +49,14 @@ header {
       @apply col-span-3 xl:col-span-2 prose prose-img:max-h-16 prose-img:my-0;
     }
 
+    &__logo-desktop {
+      @apply hidden lg:block;
+    }
+
+    &__logo-mobile {
+      @apply lg:hidden;
+    }
+
     &__search {
       @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;
 
@@ -43,10 +69,14 @@ header {
       }
 
       button[type="submit"] {
-        @apply absolute right-2 inset-y-2 text-secondary;
+        @apply absolute ltr:right-2 rtl:left-2 inset-y-2 text-secondary;
       }
     }
 
+    &__menu-mobile {
+      @apply lg:hidden flex flex-row-reverse items-center;
+    }
+
     &__links-desktop,
     > *:last-child {
       @apply col-span-1 md:col-start-8 lg:col-start-8 lg:col-span-5 justify-self-end;
@@ -61,6 +91,10 @@ header {
         &-wrapper {
           @apply flex gap-x-4 xl:gap-x-6;
         }
+
+        &-account {
+          @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
+        }
       }
 
       /* overwrite default dropdown styles */
@@ -81,10 +115,10 @@ 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 md:pl-4 md:border-l border-gray-3;
+        @apply flex flex-col items-center text-secondary cursor-pointer pl-4 border-l border-gray-3;
 
         svg {
-          @apply w-5 h-5 fill-current;
+          @apply w-6 h-6 fill-current;
         }
 
         span {
@@ -96,6 +130,10 @@ header {
         @apply absolute top-full left-0 z-30 bg-white;
       }
 
+      &__dropdown-before {
+        @apply before:block before:absolute before:-top-10 before:right-12 before:content-[""] before:bg-white before:w-24 before:h-12 before:-mt-8;
+      }
+
       &__account {
         @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
 
@@ -118,60 +156,33 @@ header {
         .main-bar__avatar {
           @apply w-12 h-12;
         }
-      }
-
-      &__search {
-        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
-
-        &-block {
-          @apply container h-full flex flex-col justify-center;
-        }
-
-        .main-bar {
-          @apply border-b border-gray;
-        }
 
-        label {
-          @apply block mb-4 text-black;
+        .main-bar__avatar-name {
+          @apply w-12 h-12 text-2xl;
         }
 
-        form {
-          @apply relative;
+        .account-container {
+          @apply before:block before:absolute before:top-16 before:right-14 before:content-[""] before:bg-white before:w-2 before:h-12 before:-mt-8;
         }
       }
 
-      &__login {
-        @apply w-auto h-full flex flex-row items-center relative text-secondary gap-1 pl-2 pr-2;
-
-        svg {
-          @apply w-8 h-8 fill-current;
-        }
-
-        svg + span {
-          @apply text-sm first-letter:uppercase w-auto;
+      &__item {
+        @apply relative;
+      }
 
-          flex-shrink: 0;
-        }
+      &__search {
+        @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
       }
 
-      &__item {
-        @apply w-1/4 flex flex-col items-center relative;
+      &__login {
+        @apply w-20 h-full flex flex-row items-center relative text-secondary gap-1;
 
         svg {
-          @apply w-8 h-8 fill-current;
+          @apply w-8 h-6 fill-current;
         }
 
         svg + span {
-          @apply text-sm first-letter:uppercase;
-        }
-
-        /* overwrite default dropdown styles */
-        &[data-target*="dropdown"] {
-          @apply p-0 gap-0;
-
-          > span {
-            @apply block font-normal text-sm first-letter:uppercase;
-          }
+          @apply text-sm first-letter:uppercase pr-4 w-16;
         }
       }
     }
@@ -193,11 +204,11 @@ header {
     }
 
     &__notification {
-      @apply w-2.5 h-2.5 rounded-full block absolute -top-0.5 right-0 bg-primary;
+      @apply w-2.5 h-2.5 rounded-full block absolute -top-0.5 right-1.5 bg-primary;
     }
 
     &__avatar {
-      @apply block w-8 h-8 rounded-full border border-secondary overflow-hidden;
+      @apply block w-6 h-6 rounded-full border border-secondary overflow-hidden mr-2;
 
       span {
         @apply w-full h-full rounded-full overflow-hidden;
@@ -208,6 +219,10 @@ header {
       }
     }
 
+    &__avatar-name {
+      @apply w-6 h-6 flex items-center justify-center bg-secondary text-white rounded-full text-xs font-bold mr-2;
+    }
+
     /* overwrite default dropdown styles */
     [id*="dropdown-menu"] {
       @apply py-0 mx-0 w-full;
@@ -216,14 +231,10 @@ header {
         @apply md:hidden;
       }
     }
-
-    [data-target*="dropdown"] {
-      @apply last-of-type:[&>svg]:block;
-    }
   }
 
   .menu-bar {
-    @apply container h-full flex justify-between items-center lg:relative;
+    @apply container h-full flex justify-between items-center lg:relative last-of-type:[&>svg]:hidden;
 
     &__container {
       @apply bg-primary relative h-14;
@@ -249,10 +260,10 @@ header {
       }
 
       &__dropdown-content {
-        @apply absolute z-20 top-full left-8 cursor-auto;
+        @apply absolute z-20 top-full cursor-auto;
 
         &-secondary {
-          @apply absolute z-20 top-[calc(100%+12px)] left-0;
+          @apply absolute z-20 top-[calc(100%+12px)];
         }
       }
 
@@ -356,22 +367,17 @@ header {
       }
     }
 
+    &__language-chooser {
+      @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
+    }
+
     &__main-dropdown {
-      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px];
+      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
       &__bottom,
       &__top {
         @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
 
-        &-left {
-          @apply w-full md:w-1/2;
-
-          /* Overwrite default size */
-          .card__highlight-text {
-            @apply text-md;
-          }
-        }
-
         &-right {
           @apply hidden md:block md:w-1/2;
         }
@@ -426,12 +432,8 @@ header {
         @apply h4 md:h3;
       }
 
-      nav {
-        @apply w-full md:w-1/4;
-      }
-
       &__menu {
-        @apply w-full bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
+        @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
 
         > * {
           @apply py-3 md:py-3.5;

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

@@ -37,7 +37,7 @@
     @apply mb-6 md:mb-8 flex flex-col md:flex-row gap-y-6 md:gap-y-0 gap-x-1 items-start md:items-center;
 
     .button {
-      @apply md:ml-auto;
+      @apply ltr:md:ml-auto rtl:md:mr-auto;
     }
   }
 

data/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;
+}

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

@@ -2,7 +2,7 @@
   @apply invisible opacity-0 fixed z-50 inset-0 bg-[rgba(0,0,0,0.25)] transition duration-300;
 
   & > * {
-    @apply absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] lg:max-w-[900px] max-h-[95vh] h-fit overflow-y-auto p-6 bg-white z-50 rounded shadow-[0_4px_6px_rgba(211,211,211,0.25)];
+    @apply absolute inset-1/2 ltr:-translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 w-[90%] lg:max-w-[900px] max-h-[95vh] h-fit overflow-y-auto p-6 bg-white z-50 rounded shadow-[0_4px_6px_rgba(211,211,211,0.25)];
 
     & > svg:only-child {
       @apply w-8 h-8 mx-auto text-gray-2 fill-current animate-spin;

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

@@ -6,12 +6,8 @@
       @apply py-14;
     }
 
-    &.is-disabled label.button__secondary {
-      @apply text-gray-2 bg-background-3 border border-gray-2 cursor-not-allowed;
-    }
-
     &-container {
-      @apply mt-4 md:mt-12 space-y-4;
+      @apply space-y-4;
     }
 
     &-placeholder {

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

@@ -20,6 +20,10 @@
       @apply prose-a:font-semibold hover:prose-a:underline prose-a:text-secondary;
     }
 
+    &-actions {
+      @apply pt-4;
+    }
+
     &-resource {
       @apply text-sm text-gray-2 flex items-center gap-1;
 

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

@@ -45,7 +45,7 @@
 
   &__actions {
     &-main {
-      @apply w-fit mx-auto gap-x-4 gap-y-6 md:gap-4;
+      @apply w-fit grid grid-cols-2 md:grid-cols-1 mx-auto gap-x-4 gap-y-6 md:gap-4;
 
       &__dropdown {
         @apply divide-y divide-gray-3 z-20 w-64;

data/app/packs/stylesheets/decidim/_progress-bar.scss

@@ -29,7 +29,7 @@
   }
 
   &__sm {
-    @apply w-16 pt-2;
+    @apply w-16;
   }
 
   &__sm &__number {

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

@@ -6,13 +6,17 @@
   }
 
   &[aria-expanded="true"],
-  &:hover {
+  &:hover[disabled="false"] {
     @apply text-secondary border-secondary;
 
     svg {
       @apply text-secondary;
     }
   }
+
+  &[disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
 }
 
 .tabs-1 {

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

@@ -1,16 +1,6 @@
 [role="tooltip"] {
   @apply absolute bg-black z-10 px-4 py-2 w-max max-w-xs rounded text-left text-white;
 
-  /*
-    NOTE: the calculated value is the sum of the arrow offset position plus the half of the arrow size:
-    - offset position: 20%
-    - arrow size: 16px
-  */
-  --arrow-offset: 20%;
-  --arrow-size: 16px;
-  --arrow-visible-size: var(--arrow-size) * 0.5;
-  --arrow-margin: var(--arrow-visible-size) * 1.4142135623730951; // due to the rotation, the margin is SQRT2 times the visible size
-
   & > * {
     @apply relative z-20;
   }
@@ -51,6 +41,16 @@
     }
   }
 
+  /*
+    NOTE: the calculated value is the sum of the arrow offset position plus the half of the arrow size:
+    - offset position: 20%
+    - arrow size: 16px
+  */
+  --arrow-offset: 20%;
+  --arrow-size: 16px;
+  --arrow-visible-size: var(--arrow-size) * 0.5;
+  --arrow-margin: var(--arrow-visible-size) * 1.4142135623730951; // due to the rotation, the margin is SQRT2 times the visible size
+
   &.top {
     @apply -translate-x-[calc(100%-var(--arrow-offset))] -translate-y-[calc(100%+var(--arrow-margin))] before:content-[''] before:absolute before:-z-10 before:right-[calc(var(--arrow-offset)-var(--arrow-visible-size))] before:-bottom-[var(--arrow-visible-size)] before:w-[var(--arrow-size)] before:h-[var(--arrow-size)] before:rotate-45 before:bg-black before:rounded-br;
   }

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

@@ -57,9 +57,12 @@
   @import "stylesheets/decidim/_toggle_switch.scss";
   @import "stylesheets/decidim/_hero.scss";
   @import "stylesheets/decidim/_actions.scss";
-  @import "stylesheets/decidim/_hashtags.scss";
+  @import "stylesheets/decidim/_emoji.scss";
 }
 
+@import "stylesheets/decidim/vendor/datepicker_light.scss";
+@import "stylesheets/decidim/datepicker.scss";
+
 // On the other hand, the following styles match with specific routes
 @import "stylesheets/decidim/_header.scss";
 @import "stylesheets/decidim/_footer.scss";

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

@@ -21,7 +21,7 @@
 }
 
 .editor-container {
-  @apply editor-props editor-suggestions-props flex flex-col mt-4 border editor-border;
+  @apply editor-props editor-suggestions-props flex flex-col mb-6 border editor-border;
 
   &.editor-disabled {
     .editor-input .ProseMirror {

data/app/packs/stylesheets/decidim/legacy/conference-diploma.scss

@@ -37,6 +37,7 @@
 }
 
 .conference-diploma .diploma__logo {
+  border: 1px solid #333;
   padding: 2rem;
 }
 
@@ -46,12 +47,10 @@
     max-height: 100%;
     max-width: 100%;
     margin: 0;
-    padding-top: 10%;
   }
 
   .conference-diploma .diploma__border {
     margin: 0;
-    margin-top: 15%;
     -moz-border-image: url("../images/decidim/pattern.png") 20 repeat;
     -webkit-border-image: url("../images/decidim/pattern.png") 20 repeat;
     -o-border-image: url("../images/decidim/pattern.png") 20 repeat;

data/app/packs/stylesheets/decidim/legacy/leaflet.scss

@@ -43,7 +43,7 @@
   display: block;
 }
 
-/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container svg: reset svg max-width declaration shipped in Joomla! (joomla.org) 3.x */
 
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
 .leaflet-container .leaflet-overlay-pane svg {

data/app/packs/stylesheets/decidim/vendor/_datepicker_light.scss

@@ -0,0 +1,228 @@
+// Extracted from wc-datepicker
+// https://github.com/Sqrrl/wc-datepicker
+// Copyright @Sqrrl (c) 2022 - MIT License
+
+.sc-wc-datepicker-h,
+.sc-wc-datepicker-h *,
+.sc-wc-datepicker-h *::before,
+.sc-wc-datepicker-h *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.sc-wc-datepicker-h {
+  display: inline-flex;
+}
+
+.wc-datepicker {
+  display: block;
+  width: min-content;
+  min-width: 17rem;
+  max-width: 24rem;
+  border: 0.0625rem solid #f2f3f5;
+  color: #111;
+  background-color: #fff;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.wc-datepicker--disabled *:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.wc-datepicker--disabled .wc-datepicker__weekday {
+  color: #767676;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:focus > * {
+  outline: none;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:hover > * {
+  background-color: transparent;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--in-range:hover > * {
+  background-color: #f2f3f5;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--selected:hover > * {
+  color: #fff;
+  background-color: #00f;
+}
+
+.wc-datepicker__header {
+  display: flex;
+  padding: 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wc-datepicker__current-month {
+  display: flex;
+  flex-grow: 1;
+  gap: 0.5rem;
+}
+
+.wc-datepicker__month-select,
+.wc-datepicker__year-select {
+  display: flex;
+  height: 2rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  align-items: center;
+  border: none;
+  border-radius: 0.25rem;
+  color: #111;
+  background: #f2f3f5;
+  font: inherit;
+  line-height: 1.125;
+}
+
+.wc-datepicker__month-select {
+  flex-grow: 1;
+  cursor: pointer;
+  appearance: none;
+}
+
+.wc-datepicker__year-select {
+  max-width: 5rem;
+}
+
+.wc-datepicker__previous-month-button,
+.wc-datepicker__next-month-button,
+.wc-datepicker__previous-year-button,
+.wc-datepicker__next-year-button {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 0.25rem;
+  color: #111;
+  background-color: transparent;
+  background-color: #f2f3f5;
+  cursor: pointer;
+}
+
+.wc-datepicker__body {
+  padding-right: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.wc-datepicker__calendar {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.wc-datepicker__weekday > span {
+  display: flex;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  aspect-ratio: 1;
+}
+
+.wc-datepicker__date {
+  padding: 0.125rem;
+  text-align: center;
+  cursor: pointer;
+}
+
+.wc-datepicker__date:focus {
+  outline: none;
+}
+
+.wc-datepicker__date:focus > * {
+  outline: 0.125rem solid #00f;
+}
+
+.wc-datepicker__date:hover > * {
+  background-color: #f2f3f5;
+}
+
+.wc-datepicker__date > * {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  aspect-ratio: 1;
+}
+
+.wc-datepicker__date--today > * {
+  font-weight: 700;
+  font-style: normal;
+}
+
+.wc-datepicker__date--in-range > * {
+  background-color: #f2f3f5;
+}
+
+.wc-datepicker__date--selected > *,
+.wc-datepicker__date--selected:hover > * {
+  color: #fff;
+  background-color: #00f;
+  font-weight: 500;
+}
+
+.wc-datepicker__date--disabled {
+  color: #767676;
+  cursor: default;
+}
+
+.wc-datepicker__date--disabled:not(.wc-datepicker__date--selected):not(
+    .wc-datepicker__date--in-range
+  ):hover
+  > * {
+  background-color: transparent;
+}
+
+.wc-datepicker__date--disabled.wc-datepicker__date--in-range:not(
+    .wc-datepicker__date--selected
+  ):not(.wc-datepicker__date--in-range)
+  > * {
+  background-color: transparent;
+}
+
+.wc-datepicker__footer {
+  display: flex;
+  padding-right: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wc-datepicker__clear-button,
+.wc-datepicker__today-button {
+  display: inline-flex;
+  height: 2rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 0.25rem;
+  color: #111;
+  background-color: #f2f3f5;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}

data/app/permissions/decidim/default_permissions.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Decidim
-  # Default permissions class for all components and spaces. It disauthorizes all
+  # Default permissions class for all components and spaces. It deauthorizes all
   # actions by any kind of user. Also works as a default implementation so other
-  # components can inherit from it and get some cenvenience methods.
+  # components can inherit from it and get some convenience methods.
   class DefaultPermissions
     def initialize(user, permission_action, context = {})
       @user = user