From 07adb7eab92296993c0349de4969fecfdc6d350a Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Fri, 21 Aug 2020 15:56:48 +0200
Subject: [PATCH] Sponsors fix (#9905)

* .

* .

* responsiveness

* spacing
---
 .../stylesheets/components/stories.scss       |  4 +-
 app/assets/stylesheets/components/tags.scss   |  2 +-
 app/assets/stylesheets/crayons.scss           |  1 +
 app/assets/stylesheets/views/sponsors.scss    | 44 +++++++++
 app/views/pages/_sponsor_image.html.erb       |  2 -
 app/views/pages/sponsors.html.erb             | 90 ++++++++++---------
 6 files changed, 94 insertions(+), 49 deletions(-)
 create mode 100644 app/assets/stylesheets/views/sponsors.scss
 delete mode 100644 app/views/pages/_sponsor_image.html.erb

diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index 11a98c79d..3ce394cbf 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/app/assets/stylesheets/components/stories.scss
@@ -140,14 +140,14 @@
     font-weight: normal;
     font-family: var(--ff-monospace);
     font-size: 0.6em;
-    padding: 0.35em 0.3em 0.3em 0.3em;
+    padding: 0.3em;
     vertical-align: middle;
     position: relative;
     top: -2px;
     line-height: 1em;
     display: inline-block;
     border-radius: var(--radius);
-    letter-spacing: -0.025em;
+    letter-spacing: -0.05em;
     background: var(--base-60);
     margin-right: var(--su-1);
     color: var(--base-inverted);
diff --git a/app/assets/stylesheets/components/tags.scss b/app/assets/stylesheets/components/tags.scss
index e7fd53794..37bca4d11 100644
--- a/app/assets/stylesheets/components/tags.scss
+++ b/app/assets/stylesheets/components/tags.scss
@@ -8,7 +8,7 @@
   border-radius: var(--radius);
   padding: var(--su-1);
   display: inline-block;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.05em;
 
   @media (min-width: $breakpoint-s) {
     font-size: var(--fs-s);
diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss
index 66dd3ff41..0f126af6e 100644
--- a/app/assets/stylesheets/crayons.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -31,3 +31,4 @@
 @import 'views/article-form';
 @import 'views/listings';
 @import 'views/dashboard';
+@import 'views/sponsors';
diff --git a/app/assets/stylesheets/views/sponsors.scss b/app/assets/stylesheets/views/sponsors.scss
new file mode 100644
index 000000000..b696af27a
--- /dev/null
+++ b/app/assets/stylesheets/views/sponsors.scss
@@ -0,0 +1,44 @@
+@import '../config/import';
+
+.sponsors {
+  display: block;
+  margin-bottom: var(--su-6);
+
+  @media (min-width: $breakpoint-m) {
+    display: grid;
+    grid-template-columns: 33% 1fr;
+    grid-gap: var(--su-4);
+  }
+
+  @media (min-width: $breakpoint-l) {
+    grid-template-columns: 25% 1fr;
+    grid-gap: var(--su-6);
+  }
+
+  &__label {
+    background: var(--base-0);
+    padding: var(--su-4);
+    border-radius: var(--radius);
+    margin-bottom: var(--su-4);
+
+    @media (min-width: $breakpoint-m) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__items {
+    display: grid;
+    grid-gap: var(--su-6);
+  }
+
+  &__logo {
+    border-radius: var(--radius);
+    background: white;
+    padding: var(--su-4);
+    margin-bottom: var(--su-4);
+    max-width: 250px;
+    height: auto;
+    display: block;
+    border: 1px solid var(--base-20);
+  }
+}
diff --git a/app/views/pages/_sponsor_image.html.erb b/app/views/pages/_sponsor_image.html.erb
deleted file mode 100644
index 6dc250347..000000000
--- a/app/views/pages/_sponsor_image.html.erb
+++ /dev/null
@@ -1,2 +0,0 @@
-<img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy" class="partner-image-light-mode">
-<img src="<%= cloudinary((sponsorship.organization.dark_nav_image_url || sponsorship.organization.nav_image_url), 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy" class="partner-image-dark-mode">
diff --git a/app/views/pages/sponsors.html.erb b/app/views/pages/sponsors.html.erb
index 0c4370cb9..4f857cba8 100644
--- a/app/views/pages/sponsors.html.erb
+++ b/app/views/pages/sponsors.html.erb
@@ -6,58 +6,60 @@
   <meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">
 <% end %>
 
-<style>
-  .sponsor-level-headline {
-    padding:5px 18px;
-    border-radius: 3px;
-  }
-</style>
-
 <div class="crayons-layout crayons-layout--limited">
   <div class="crayons-card text-styles text-padding">
     <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-0 mt-0">Thank you! ♥️</h1>
-    <h2 class="fs-2xl s:fs-3xl l:fs-4xl fw-medium s:fw-bold lh-tight mb-4 mt-0">for supporting our community</h2>
+    <h2 h2 class="fs-2xl s:fs-3xl l:fs-4xl fw-medium s:fw-bold lh-tight mb-4 mt-0">for supporting our community</h2>
 
-        <h4>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="golden badge">
-      <span class="sponsor-level-headline" style="background-color: #fefa87;">Gold Sponsors</span>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="golden badge">
-    </h4>
-    <div id="gold-sponsors">
-      <% Sponsorship.gold.live.includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
-        <a href="<%= sponsorship.url %>"><%= render "sponsor_image", sponsorship: sponsorship %></a>
-        <p>
-          <%= sponsorship.blurb_html&.html_safe %>
-        </p>
-        <hr />
-      <% end %>
+    <div class="sponsors">
+      <div class="sponsors__label">
+        <h3 class="p-0 m-0 fs-xl fw-medium">🥇 Gold Sponsors</h3>
+      </div>
+      <div class="sponsors__items">
+        <% Sponsorship.gold.live.includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
+          <div>
+            <a href="<%= sponsorship.url %>" class="sponsor__logo">
+              <img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
+            </a>
+            <p>
+              <%= sponsorship.blurb_html&.html_safe %>
+            </p>
+          </div>
+        <% end %>
+      </div>
     </div>
 
-    <h4>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="silver badge">
-      <span class="sponsor-level-headline" style="background-color: #d8e1f0;">Silver Sponsors</span>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="silver badge">
-    </h4>
-    <div id="silver-sponsors">
-      <% Sponsorship.where(status: "live", level: "silver").where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
-        <a href="<%= sponsorship.url %>"><%= render "sponsor_image", sponsorship: sponsorship %></a>
-        <p>
-          <%= sponsorship.blurb_html&.html_safe %>
-        </p>
-        <hr />
-      <% end %>
+    <div class="sponsors">
+      <div class="sponsors__label">
+        <h3 class="p-0 m-0 fs-xl fw-medium">🥈 Silver Sponsors</h3>
+      </div>
+      <div class="sponsors__items">
+        <% Sponsorship.where(status: "live", level: "silver").where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
+          <div>
+            <a href="<%= sponsorship.url %>" class="sponsor__logo">
+              <img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
+            </a>
+            <p>
+              <%= sponsorship.blurb_html&.html_safe %>
+            </p>
+          </div>
+        <% end %>
+      </div>
     </div>
 
-    <h4>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="bronze badge">
-      <span class="sponsor-level-headline" style="background-color: #fcd6bb;">Bronze Sponsors</span>
-      <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="bronze badge">
-    </h4>
-    <div id="bronze-sponsors">
-      <% Sponsorship.bronze.live.where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).find_each do |sponsorship| %>
-        <a href="<%= sponsorship.url %>"><%= render "sponsor_image", sponsorship: sponsorship %></a>
-        <hr />
-      <% end %>
+    <div class="sponsors">
+      <div class="sponsors__label">
+        <h3 class="p-0 m-0 fs-xl fw-medium">🥉 Bronze Sponsors</h3>
+      </div>
+      <div class="sponsors__items">
+        <% Sponsorship.bronze.live.where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).find_each do |sponsorship| %>
+          <div>
+            <a href="<%= sponsorship.url %>" class="sponsor__logo">
+              <img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
+            </a>
+          </div>
+        <% end %>
+      </div>
     </div>
 
     <div class="crayons-notice">