Changed shecoded preview template (#6475)

* Changed shecoded preview template

* Added a test for social preview template with multiple campaign tags

* feat: update some css properties to make it closer to the design (i think)

* Update to relative units

* Update spec

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

app/views/social_previews/articles/shecoded.html.erb

@@ -1,47 +1,132 @@
 <style>
   body {
-    <% if @article.cached_tag_list.include?("theycoded") %>
-      background-color: #cabde6;
-    <% else %>
-      background: url(<%= asset_path "SheCodedBackground.png" %>);
-      background-color: #cabde6;
-      background-repeat: repeat;
-    <% end %>
+    background-image: url(<%= asset_path "shecoded-background.jpg" %>);
+    background-size: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
   }
+
   .preview-div-wrapper {
-    background: white;
-    width: 80vw;
-    height: 35vw;
-    margin: 2.5vw auto 2.5vw;
-    padding: 4vw;
+    overflow: hidden;
+    position: relative;
   }
-  .avatar {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 2.5vw;
-    width: 12vw;
+
+  .preview-div {
+    background: #fff;
+    border: 0.25vw solid #8220B0;
+    box-shadow: 0.8vw 1vw 0px #8220B0;
+    width: 94vw;
+    height: 45vw;
+    margin: 2.25vw auto 5vw;
+    overflow: hidden;
+    position: relative;
+    border-radius: 0.3vw;
+    border-top-left-radius: 2.3vw;
+    border-top-right-radius: 2.3vw;
   }
-  img {
-    border-radius: 12vw;
-    border: .75vw solid #70589b;
-    height: 12vw;
-    width: 12vw;
+
+  .preview-info-header {
+    color: #8220B0;
+    margin: 2vw 2.5vw 0vw;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Roboto", monospace;
+    font-size: 3.5vw;
+    width: 92%;
   }
-  .title {
-    font-size: <%= 7 - @article.title.size / 40 %>vw;
-    margin: auto;
-    width: 80%;
-    color: #70589b;
-    text-align: center;
-    font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", "Roboto Condensed", sans-serif;
+
+  .preview-info-header img {
+    height: 2.5vw;
+    vertical-align: -0.15vw;
+    margin-left: 1vw;
+    margin-right: 0.5vw;
+  }
+  .title-area {
+    position: absolute;
+    bottom: 12vw;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+  h1 {
+    color: #8220B0;
+    width: 94%;
+    margin: 1vw auto;
+    position: absolute;
+    padding-left: 2.5%;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    line-height: 1.05em;
+  }
+
+  .preview-user {
+    font-size: 3vw;
+    position: absolute;
+    color: #8220B0;
+    left: 1.5vw;
+    bottom: 1.25vw;
+    padding: 0.8vw 2vw;
+    padding-left: 0.8vw;
+    font-weight: 500;
+  }
+
+  .preview-user img {
+    border-radius: 100vw;
+    height: 4.5vw;
+    width: 4.5vw;
+    vertical-align: -1.3vw;
+    border: 0.25vw solid #8220B0;
+  }
+
+  .badge-images {
+    position: absolute;
+    bottom: 1.4vw;
+    right: 1.5vw;
+    text-align: right;
+  }
+
+  .badge-images img {
+    height: 6vw;
+    right: 6vw;
+    fill: #8220B0;
+    margin-left: 0.5vw;
+    transform: rotate(5deg);
   }
 </style>
-
 <div class="preview-div-wrapper">
-  <div class="avatar">
-    <img src="<%= ProfileImage.new(@article.user).get(width: 320) %>" alt="<%= @article.user.name %> profile image">
-  </div>
-  <div class="title">
-    <strong><%= @article.title %></strong>
+  <div class="preview-div">
+    <% if @article.title.size < 15 %>
+      <% font_size = 12 %>
+    <% elsif @article.title.size < 30 %>
+      <% font_size = 9.2 %>
+    <% elsif @article.title.size < 50 %>
+      <% font_size = 8.3 %>
+    <% else %>
+      <% font_size = 15 - (((@article.title.size**0.92) + 85) / 16) %>
+    <% end %>
+    <style>
+      .title-area {
+        top: 4.5vw;
+      }
+    </style>
+    <% font_size *= 0.9 %>
+    <div class="preview-info-header">
+      <%= (@article.tag_list & SiteConfig.campaign_featured_tags).map { |tag| "##{tag}" }.join(" ") %>
+    </div>
+    <div class="title-area">
+      <h1 style="font-size:<%= font_size %>vw;"><%= @article.title %></h1>
+    </div>
+    <div class="preview-user">
+      <img src="<%= ProfileImage.new(@article.user).get(width: 90) %>" />
+      <%= truncate @article.user.name, length: 28 %>・<%= @article.readable_publish_date %>
+    </div>
+    <div class="badge-images">
+      <% @tag_badges.each do |badge| %>
+        <%# Use a seed in Random so we don't break cache on every render %>
+        <% not_so_rand = Random.new(badge.id + @article.id) %>
+        <img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= not_so_rand.rand(-6..6) %>deg);" />
+      <% end %>
+      <img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
+    </div>
   </div>
 </div>

spec/requests/social_previews_spec.rb

@@ -42,6 +42,18 @@ RSpec.describe "SocialPreviews", type: :request do
       expect(response.body).to include CGI.escapeHTML(she_coded_article.title)
     end
 
+    it "includes campaign tags when tagged with 2 campaign tags" do
+      create(:tag, name: "shecoded", social_preview_template: "shecoded")
+      create(:tag, name: "theycoded", social_preview_template: "shecoded")
+
+      she_coded_article = create(:article, tags: "shecoded, theycoded")
+      SiteConfig.campaign_featured_tags = "shecoded,theycoded"
+
+      get "/social_previews/article/#{she_coded_article.id}"
+
+      expect(response.body).to include("#shecoded #theycoded")
+    end
+
     it "renders an image when requested and redirects to image url" do
       get "/social_previews/article/#{article.id}.png"