Rework challenges

app/cells/decidim/challenges/challenge_cell.rb

@@ -8,6 +8,8 @@ class ChallengeCell < Decidim::ViewModel
       include Cell::ViewModel::Partial
 
       def show
+        @has_sdgs = current_component.participatory_space.components.where(manifest_name: "sdgs").where.not(published_at: nil).present?
+
         cell card_size, model, options
       end
 

app/cells/decidim/challenges/challenge_g/show.erb

@@ -1,47 +1,45 @@
-<%= link_to resource_path, class: classes[:default], id: resource_id do %>
-  <div class="<%= classes[:img] %>">
+<%= link_to resource_path, class: "card__list", id: resource_id do %>
+  <div class="card__list-image">
     <% if has_image? %>
-      <%= image_tag resource_image_url, alt: alt_title %>
+      <%= image_tag resource_image_url, class: "w-full h-full object-cover" %>
     <% else %>
-      <%= external_icon "media/images/placeholder-card-g.svg", class: "card__placeholder-g" %>
+      <div class="w-full h-full relative">
+        <div class="w-full h-full bg-primary opacity-10 absolute top-0 left-0 z-10">
+        </div>
+        <%= external_icon "media/images/placeholder-card-l.svg", class: "card__placeholder-l" %>
+      </div>
     <% end %>
   </div>
-  <div class="<%= classes[:text] %>">
-    <%= content_tag title_tag, title, class: title_class %>
-    <span class="challenge-status <%= resource_state %>"><%= t(resource_state, scope: 'decidim.challenges.states') %></span>
-    <%= description %>
 
-    <% if metadata_cell.present? %>
-      <div class="<%= classes[:metadata] %>">
-        <%= cell metadata_cell, resource, links: false, **options %>
-      </div>
+  <div class="card__list-content">
+    <%= content_tag title_tag, class: "h4 card__list-title" do %>
+      <%= title %>
     <% end %>
-
-    <div class="card__sdg">
-      <div class="card_text--sdg--image">
-        <div class="ods challenges">
-          <% if resource_sdg %>
-            <div class="text-container">
-              <p><%= t(resource_sdg + ".logo.line1", scope: "decidim.components.sdgs") %></p>
-              <p><%= t(resource_sdg + ".logo.line2", scope: "decidim.components.sdgs") %></p>
+    <div class="card__list-text">
+      <%= description %>
+      <% if has_sdgs? %>
+        <div class="card__sdg">
+          <div class="card_text--sdg--image">
+            <div class="ods challenges">
+              <% if resource_sdg_index %>
+                <%= image_pack_tag "media/images/ods-#{resource_sdg_index}.svg", alt: "Logo SDG #{resource_sdg_index}", class: "challenge--view" %>
+              <% end %>
             </div>
-          <% end %>
-          <% if resource_sdg_index %>
-            <%= image_pack_tag "media/images/ods-#{resource_sdg_index}.svg", alt: "Logo SDG #{resource_sdg_index}", class: "challenge--view" %>
-          <% end %>
+          </div>
+          <div class="card_text--sdg--text">
+            <% if resource_sdg %>
+              <strong><%= t_sdg(resource_sdg) %></strong>
+            <% end %>
+          </div>
         </div>
-      </div>
-      <div class="card_text--sdg--text">
-        <% if resource_sdg %>
-          <p><%= t('sdg', scope: "activemodel.attributes.challenge") %></p>
-          <strong><%= t_sdg(resource_sdg) %></strong>
-        <% end %>
+      <% end %>
+    </div>
+    <div class="card__list-metadata">
+      <div>
+        <span class="label challenge-status <%= resource_state %>">
+          <%= t(resource_state, scope: 'decidim.challenges.states') %>
+        </span>
       </div>
     </div>
   </div>
-  <div class="card__status">
-  </div>
-  <div class="card__footer">
-  </div>
 <% end %>
-</div>

app/cells/decidim/challenges/challenge_g_cell.rb

@@ -23,6 +23,12 @@ def has_image?
         @has_image ||= model.component.settings.allow_card_image && model.card_image.attached?
       end
 
+      def has_sdgs?
+        sdgs_component = model.participatory_space.components.where(manifest_name: "sdgs").where.not(published_at: nil)
+
+        sdgs_component.present?
+      end
+
       def resource_image_path
         @resource_image_path ||= has_image? ? model.attached_uploader(:card_image).path : nil
       end

app/controllers/decidim/challenges/challenges_controller.rb

@@ -9,15 +9,13 @@ class ChallengesController < Decidim::Challenges::ApplicationController
       include FilterResource
       include Paginable
       include OrderableChallenges
-      include ChallengesHelper
-      include Decidim::Sdgs::SdgsHelper
-      include Decidim::ShowFiltersHelper
 
       helper Decidim::CheckBoxesTreeHelper
       helper Decidim::Sdgs::SdgsHelper
       helper Decidim::ShowFiltersHelper
+      helper Decidim::Challenges::ChallengesHelper
 
-      helper_method :challenges
+      helper_method :challenges, :has_sdgs
 
       def index
         @challenges = search.result
@@ -34,17 +32,29 @@ def show
 
       private
 
+      def has_sdgs
+        sdgs_component = current_component.participatory_space.components.where(manifest_name: "sdgs").where.not(published_at: nil)
+
+        sdgs_component.present?
+      end
+
       def challenge_scope
         @challenge_scope ||= current_organization.scopes.find_by(id: @challenge.decidim_scope_id)
       end
 
       def default_filter_params
-        {
-          search_text_cont: "",
-          with_any_state: %w(proposal execution finished),
-          with_any_scope: nil,
-          with_any_sdgs_codes: [],
-        }
+        if has_sdgs
+          {
+            search_text_cont: "",
+            with_any_state: %w(proposal execution finished),
+            with_any_sdgs_codes: [],
+          }
+        else
+          {
+            search_text_cont: "",
+            with_any_state: %w(proposal execution finished),
+          }
+        end
       end
 
       def challenges

app/helpers/decidim/challenges/challenges_helper.rb

@@ -6,11 +6,16 @@ module Challenges
     #
     module ChallengesHelper
       def filter_sections
-        [
-          { method: :with_any_state, collection: filter_challenges_state_values, label_scope: "decidim.shared.filters", id: "state" },
-          { method: :with_any_scope, collection: filter_global_scopes_values, label_scope: "decidim.shared.participatory_space_filters.filters", id: "scope" },
-          { method: :with_any_sdgs_codes, collection: filter_sdgs_values, label_scope: "decidim.shared.filters", id: "sdgs" },
-        ].reject { |item| item[:collection].blank? }
+        if has_sdgs
+          [
+            { method: :with_any_state, collection: filter_challenges_state_values, label_scope: "decidim.shared.filters", id: "state" },
+            { method: :with_any_sdgs_codes, collection: filter_sdgs_values, label_scope: "decidim.shared.filters", id: "sdgs" },
+          ].reject { |item| item[:collection].blank? }
+        else
+          [
+            { method: :with_any_state, collection: filter_challenges_state_values, label_scope: "decidim.shared.filters", id: "state" },
+          ].reject { |item| item[:collection].blank? }
+        end
       end
 
       def filter_challenges_state_values

app/packs/stylesheets/decidim/challenges/challenges.scss

@@ -1,94 +1,60 @@
-@import "stylesheets/decidim/sdgs/ods.scss";
 @import "stylesheets/decidim/sdgs/sdgs_filter/button.scss";
 @import "stylesheets/decidim/sdgs/sdgs_filter/modal.scss";
 
-.card__highlight-text {
-  .proposal {
-    color: rgb(254, 174, 2);
-  }
-
-  .executing {
-    color: rgb(0, 163, 144);
-  }
-
-  .finished {
-    color: rgb(0, 188, 255);
-  }
-
-  .card_text--sdg--image {
-    display: inline-block;
-    width: 20%;
-
-    img {
-      vertical-align: bottom;
-    }
+.card__list {
+  .card__list-content {
+    width: 100%;
   }
-
-  .card__sdg {
-    display: inline-flex;
+  
+  .card__list-image {
+    margin-right: 14px;
   }
-
-  .card_text--sdg--text {
-    display: inline-block;
-    width: 75%;
-    padding-left: 5px;
-
+
+  .card__list-text {
+    display: flex;
+
     p {
-      margin-bottom: 8px;
+      width: 650px;
+      min-width: 650px;
+    }
+
+    .card__sdg {
+      margin-right: 20px;
+    }
+
+    .card_text--sdg--image {
+      width: 48px;
+
+      img {
+        vertical-align: bottom;
+      }
+    }
+
+    .card_text--sdg--text {
+      font-size: 12px;
     }
   }
-
-  .card__text--paragraph--status {
-    font-weight: bold;
-    display: inline;
-    text-transform: uppercase;
-    padding-right: 5px;
-  }
-
-  .card__text--paragraph p:first-of-type {
-    display: inline;
+
+  .card__list-metadata {
+    .label.proposal {
+      background-color: rgb(254, 174, 2);
+      color: rgb(86, 59, 1);
+    }
+
+    .label.executing {
+      background-color: rgb(0, 163, 144);
+      color: rgb(0, 49, 43);
+    }
+
+    .label.finished {
+      background-color: rgb(0, 188, 255);
+      color: rgb(0, 49, 43);
+    }
   }
 }
 
-.challenge-status {
-  text-transform: uppercase;
-  font-weight: bold;
-}
-
-.defininition-data__title {
-  text-transform: uppercase;
-}
-
-.definition-data__image {
-  padding-top: 0.1em;
-}
-
-.section p.tags{
-  color: #D04040;
-  font-weight: 600;
-}
-
-.ods.challenges {
-  display: flex;
-  justify-content: center;
-  cursor: default;
-  &:hover {
-    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
-    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
-    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
-    transition: all 0.0s ease;
-  }
-
-  img.challenge--view {
-    width: 100%;
-    max-width: 100px;
+.layout-item__aside {
+  .ods.challenges {
+    width: 150px;
   }
 }
-
-.card-associated-problem {
-  padding: 5px 10px;
-}
-
-.card-proposed-solution {
-  padding: 5px 10px;
-}

app/views/decidim/challenges/challenges/_challenge.html.erb

@@ -1,3 +1 @@
-<div class="column">
-    <%= card_for challenge, highlight: true, size: :g %>
-</div>
+<%= card_for challenge, highlight: true, size: :g, has_sdgs: %>

app/views/decidim/challenges/challenges/_challenges.html.erb

@@ -5,9 +5,7 @@
 
   <%= order_selector available_orders, i18n_scope: "decidim.challenges.challenges.orders" %>
 
-  <div class="card__list-list">
-    <%= render @challenges %>
-  </div>
+  <%= render @challenges, locals: { has_sdgs: } %>
 
   <%= decidim_paginate @challenges %>
 <% end %>