custom participatory budget view for mobile

openpoke · Jun 7, 2024 · d86810e · d86810e
1 parent cf83f1a
commit d86810e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/decidim-budgets/app/packs/stylesheets/budgets.scss b/decidim-budgets/app/packs/stylesheets/budgets.scss
@@ -40,17 +40,13 @@
       }
 
       &--minimum {
-        @apply absolute h-2;
-
-        .progress-meter--minimum-mark {
-          @apply h-2 ml-auto w-[2px] bg-black block;
-        }
+        @apply absolute h-2 bg-gray-3 rounded-s;
       }
 
       &--meter {
         background-color: var(--success);
 
-        @apply h-[20px] rounded;
+        @apply h-2 rounded-s absolute;
       }
     }
 
@@ -240,6 +236,10 @@
       @apply w-5 h-5;
     }
   }
+
+  p {
+    @apply text-gray-4 font-normal text-[13px];
+  }
 }
 
 .progressbox-fixed-wrapper {

diff --git a/decidim-budgets/app/views/decidim/budgets/projects/_order_progress_summary_content.html.erb b/decidim-budgets/app/views/decidim/budgets/projects/_order_progress_summary_content.html.erb
@@ -22,7 +22,6 @@
     <div class="budget-summary__progressbar">
       <div class="budget-progress" role="progressbar" aria-label="<%= t("budget", scope: "decidim.budgets.projects.order_progress") %>" aria-valuenow="<%= current_order_budget_percent %>" aria-valuetext="<%= current_order_budget_percent %> %" aria-valuemin="0" aria-valuemax="100">
         <div class="budget-summary__progressbar--minimum" style="width: <%= current_order_budget_percent_minimum %>%">
-          <span class="progress-meter--minimum-mark"></span>
         </div>
         <div class="budget-summary__progressbar--meter" style="width: <%= current_order_budget_percent %>%"> </div>
       </div>
@@ -64,7 +63,6 @@
       <div class="budget-summary__progressbox layout-item__main">
         <div class="budget-progress relative" role="progressbar" aria-valuenow="<%= current_order_budget_percent %>" aria-valuetext="<%= current_order_budget_percent %>%" aria-valuemin="0" aria-valuemax="100">
           <div class="budget-summary__progressbar--minimum" style="width: <%= current_order_budget_percent_minimum %>%">
-            <span class="progress-meter--minimum-mark"></span>
           </div>
           <div class="budget-summary__progressbar--meter" style="width: <%= current_order_budget_percent %>%">
           </div>
@@ -90,18 +88,18 @@
     </div>
   </div>
 </div>
-  <div class="budget-summary__button-modal">
-    <button type="button" data-dialog-open="budget-modal-info" aria-haspopup="dialog" tabindex="0" class="button button__text button__xs ml-2.5">
-      <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
-    </button>
-  </div>
-  <div class="budget-summary__button-dropdown">
-    <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element" class="budget-summary__button-dropdown_text">
-      <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
-      <%= icon "arrow-down-s-line" %>
-      <%= icon "arrow-up-s-line" %>
-    </button>
-    <ul id="dropdown-menu-element">
-      <li>dropdown info</li>
-    </ul>
-  </div>
+<div class="budget-summary__button-modal">
+  <button type="button" data-dialog-open="budget-modal-info" aria-haspopup="dialog" tabindex="0" class="button button__text button__xs ml-2.5">
+    <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
+  </button>
+</div>
+<div class="budget-summary__button-dropdown">
+  <button id="dropdown-trigger-button-dropdown" data-component="dropdown" data-target="dropdown-menu-button-dropdown" class="budget-summary__button-dropdown_text">
+    <%= t("more_information", scope: "decidim.budgets.budget_information_modal") %>
+    <%= icon "arrow-down-s-line" %>
+    <%= icon "arrow-up-s-line" %>
+  </button>
+  <p id="dropdown-menu-button-dropdown">
+      <%= cell('decidim/budgets/budget_information_modal', @budget).(:more_information) %>
+  </p>
+</div>
diff --git 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;