Change sidebar campaign view (#6228) [deploy]

* Changed sidebar campaign view

* feat: update the hml of the campaign sidebar config (do not show broken image if the link has not been set)

* feat: update the html and css to make it look like Figma

* chore: revert the classname change as we use write elsewhere

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

app/assets/stylesheets/preact/sidebar-widget.scss

@@ -73,5 +73,28 @@
         }
       }
     }
+    .widget-image {
+      margin: auto -16px; // offset the padding of the widget for img full width.
+    }
+
+    .widget-button {
+      display: block;
+      text-align: center;
+      padding: 8px 16px;
+      margin: auto -16px;
+      border-radius: 3px;
+    }
+
+    .write {
+      margin: 8px -16px;
+      @include themeable(background, theme-top-bar-write-background, #1ab3a6);
+      @include themeable(color, theme-opposite-color, white);
+    }
+
+    .all-stories {
+      @include themeable(border, theme-border, 2px solid $outline-color);
+      @include themeable(color, theme-color, $black);
+      @include themeable(background, theme-opposite-color, white);
+    }
   }
 }

app/controllers/internal/configs_controller.rb

@@ -23,6 +23,7 @@ class Internal::ConfigsController < Internal::ApplicationController
       default_site_email social_networks_handle
       campaign_hero_html_variant_name campaign_background_color
       campaign_text_color campaign_sidebar_enabled campaign_featured_tags
+      campaign_sidebar_image
       main_social_image favicon_url logo_svg
       rate_limit_follow_count_daily
       ga_view_id ga_fetch_rate

app/controllers/stories_controller.rb

@@ -63,10 +63,12 @@ class StoriesController < ApplicationController
   end
 
   def get_latest_campaign_articles
-    @latest_campaign_articles = Article.tagged_with(SiteConfig.campaign_featured_tags, any: true).
+    campaign_articles_scope = Article.tagged_with(SiteConfig.campaign_featured_tags, any: true).
       where("published_at > ?", 2.weeks.ago).where(approved: true).
-      order("hotness_score DESC").
-      pluck(:path, :title, :comments_count, :created_at)
+      order("hotness_score DESC")
+
+    @campaign_articles_count = campaign_articles_scope.count
+    @latest_campaign_articles = campaign_articles_scope.limit(3).pluck(:path, :title, :comments_count, :created_at)
   end
 
   def redirect_to_changed_username_profile

app/models/site_config.rb

@@ -19,6 +19,7 @@ class SiteConfig < RailsSettings::Base
   field :campaign_text_color, type: :string, default: "000000"
   field :campaign_featured_tags, type: :array, default: %w[]
   field :campaign_sidebar_enabled, type: :boolean, default: 0
+  field :campaign_sidebar_image, type: :string, default: nil
 
   # images
   field :main_social_image, type: :string, default: "https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png"

app/views/articles/_sidebar_campaign.html.erb

@@ -1,16 +1,19 @@
 <div class="widget">
+  <% if SiteConfig.campaign_sidebar_image %>
+    <img src="<%= SiteConfig.campaign_sidebar_image %>" class="widget-image" />
+  <% end %>
   <header>
     <h4>
-      <% SiteConfig.campaign_featured_tags.each do |t| %>
-        <%= link_to("##{t}", "/t/#{t}") %>
-      <% end %>
+      <%= link_to "Stories (#{@campaign_articles_count})", "/t/#{SiteConfig.campaign_featured_tags.first}" %>
     </h4>
   </header>
   <div class="widget-body">
     <div class="widget-link-list">
       <% @latest_campaign_articles.each do |plucked_article| %>
-        <%= render "articles/widget_list_item", plucked_article: plucked_article, show_comment_count: false %>
+        <%= render "articles/widget_list_item", plucked_article: plucked_article, show_comment_count: true %>
       <% end %>
     </div>
   </div>
+  <%= link_to "Share your story", "/new/#{SiteConfig.campaign_featured_tags.first}", class: "widget-button write" %>
+  <%= link_to "See all stories", "/t/#{SiteConfig.campaign_featured_tags.first}", class: "widget-button all-stories" %>
 </div>

app/views/internal/configs/show.html.erb

@@ -81,6 +81,22 @@
               <div class="alert alert-info">Campaign sidebar enabled or not</div>
             </div>
 
+            <div class="form-group">
+              <%= f.label :campaign_sidebar_image %>
+              <% if SiteConfig.campaign_sidebar_image %>
+                <div class="row mt-2">
+                  <div class="col-12">
+                    <img alt="Campaign sidebar image" class="img-fluid" src="<%= SiteConfig.campaign_sidebar_image %>" />
+                  </div>
+                </div>
+              <% end %>
+              <%= f.text_field :campaign_sidebar_image,
+                               class: "form-control",
+                               value: SiteConfig.campaign_sidebar_image,
+                               placeholder: "https://image.url" %>
+              <div class="alert alert-info">Used at the top of the campaign sidebar</div>
+            </div>
+
             <div class="form-group">
               <%= f.label :campaign_featured_tags %>
               <%= f.text_field :campaign_featured_tags,