maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sponsors fix (#9905)

Browse source 
* .

* .

* responsiveness

* spacing
This commit is contained in:
ludwiczakpawel 2020-08-21 15:56:48 +02:00 • committed by GitHub
parent bb41666c2d
commit 07adb7eab9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/components/stories.scss
View file

@ -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);

2
app/assets/stylesheets/components/tags.scss
View file

@ -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);

1
app/assets/stylesheets/crayons.scss
View file

@ -31,3 +31,4 @@
@import 'views/article-form';
@import 'views/listings';
@import 'views/dashboard';
@import 'views/sponsors';

44
app/assets/stylesheets/views/sponsors.scss Normal file
View file

@ -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);
}
}

2
app/views/pages/_sponsor_image.html.erb
View file

@ -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">

90
app/views/pages/sponsors.html.erb
View file

@ -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">