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

Update styling of authentication feed card for logged out users (#9762) [deploy]

Browse source 
* Update styling of authentication feed card for logged out users

* Update app/views/stories/_sign_in_invitation.html.erb

Co-authored-by: Fernando Valverde <fernando@visualcosita.com>

* Update test

* Update app/assets/stylesheets/signin.scss

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>

Co-authored-by: Fernando Valverde <fernando@visualcosita.com>
Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
This commit is contained in:
Lisa Sy 2020-08-14 07:40:18 -07:00 • committed by GitHub
parent a081810946
commit df8ac96524
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 94 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/assets/stylesheets/articles.scss
View file

@ -140,62 +140,6 @@
}
}
// Feed Card: Signup CTA
.feed-cta {
background: lighten($purple, 6%) !important;
border: 1px solid darken($bold-blue, 5%) !important;
box-shadow: 5px 6px 0px darken($bold-blue, 15%) !important;
margin: 0.8em 0;
.cta-container {
padding: calc(1vw + 7px) 9px;
margin-bottom: 15px;
}
h2 {
text-align: center;
margin-right: 9px;
padding-right: 9px;
font-size: 1.5em;
}
h3 {
text-align: center;
margin-right: 9px;
padding-right: 9px;
font-size: 17px !important;
}
.button-container {
margin-top: 40px;
text-align: center;
margin-right: 9px;
padding-right: 9px;
}
img.secondary-logo {
width: 190px;
height: 190px;
margin: 18px auto 35px;
border-radius: 22px;
display: block;
transform: rotate(6deg);
}
.cta-button {
text-align: center;
margin: 5px;
padding: 12px 5px;
min-width: 230px;
font-size: 1.1em;
display: inline-block;
height: auto;
text-align: center;
font-weight: bold;
border-radius: 100px;
background-color: $bold-blue;
color: white !important;
}
.feed-cta-sub {
margin-top: 20px;
font-size: 15px;
}
}
// MOBILE ONLY navigation to switch between tabs (these on top of the feed).
// Although it uses different markup :/.
.narrow-nav-menu {

71
app/assets/stylesheets/signin.scss
View file

@ -1,4 +1,75 @@
@import 'variables';
@import 'config/import';
.authentication-feed {
&__card {
display: grid;
grid-gap: var(--su-6);
padding: var(--su-6);
margin: var(--su-3);
@include generate-box(
$level: 1,
$bg: #f5f6fe,
$border: var(--accent-brand),
$color: var(--card-color)
);
@media (min-width: $breakpoint-s) {
padding: var(--su-7);
}
}
&__container {
@media (min-width: $breakpoint-s) {
display: flex;
grid-gap: var(--su-7);
flex-direction: row;
align-items: center;
}
}
&__logo {
border-radius: var(--radius);
height: var(--su-8);
margin-bottom: var(--su-2);
transform: rotate(-10deg);
width: var(--su-8);
@media (min-width: $breakpoint-s) {
margin: 0 auto;
height: 80px;
width: 80px;
}
}
&__title {
color: var(--card-color);
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
@media (min-width: $breakpoint-s) {
font-size: var(--fs-3xl);
}
}
&__description {
color: var(--card-color-secondary);
}
&__actions {
display: grid;
grid-gap: var(--su-1);
@media (min-width: $breakpoint-s) {
display: flex;
flex-direction: column;
width: max-content;
justify-self: center;
}
}
}
#page-content.registrations {
.devise-container {
min-height: 480px;

42
app/views/stories/_sign_in_invitation.html.erb
View file

@ -1,24 +1,24 @@
<div class="single-article single-article-small-pic feed-cta" id="in-feed-cta">
<div class="cta-container" id="cta-content">
<img class="secondary-logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
alt="Secondary <%= community_name %> logo" />
<h2>
<a href="/"><%= community_name %></a> is a community of <br />
<%= number_with_delimiter User.registered.estimated_count %> amazing <%= community_members_label %>
</h2>
<h3>
Create your profile to customize your experience and get involved.
</h3>
<div class="button-container">
<a href="/enter" class="cta cta-button" aria-label="Sign up.">
Join Now
</a>
<div class="feed-cta-sub">
<em>We require social login to prevent abuse.</em>
</div>
<div class="authentication-feed__card" id="in-feed-cta">
<div class="authentication-feed__container">
<img class="authentication-feed__logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
alt="Secondary <%= community_name %> logo" />
<div class="authentication-feed__content">
<h2 class="authentication-feed__title">
<a href="/"><%= community_name %></a> is a community of <br />
<%= number_with_delimiter User.registered.estimated_count %> amazing <%= community_members_label %>
</h2>
<p class="authentication-feed__description">
Log in to customize your experience and get involved.
</p>
</div>
</div>
<div class="authentication-feed__actions">
<a href="/enter" class="crayons-btn" aria-label="Create new account">
Create new account
</a>
<a href="/enter" class="crayons-btn crayons-btn--ghost-brand" aria-label="Log in">
Log in
</a>
</div>
</div>

4
spec/system/articles/user_visits_articles_by_timeframe_spec.rb
View file

@ -72,7 +72,7 @@ RSpec.describe "User visits articles by timeframe", type: :system do
it "shows correct articles and cta count", :aggregate_failures do
shows_correct_articles_count(5)
shows_main_article
expect(page).to have_selector(".feed-cta", count: 1)
expect(page).to have_selector(".authentication-feed__card", count: 1)
within("#articles-list") do
expect(page).to have_text(article.title)
@ -90,7 +90,7 @@ RSpec.describe "User visits articles by timeframe", type: :system do
it "shows correct articles and cta-count", :aggregate_failures do
shows_correct_articles_count(5)
shows_main_article
expect(page).to have_selector(".feed-cta", count: 1)
expect(page).to have_selector(".authentication-feed__card", count: 1)
within("#articles-list") do
expect(page).to have_text(article.title)