Redesigned home feed auth CTA (#18681)
* Redesigned home auth CTA * Nit fixes * Nit fixes * Updated test * Applied review changes * Applied review changes * Refractored login path code * Added aria-label
This commit is contained in:
Rajat Talesra
GitHub
parent
a3dbf5d5e3
commit
768eb219ef
6 changed files with 42 additions and 89 deletions
|
|
@ -3,78 +3,17 @@
|
|||
|
||||
// Authentication Card in Feed
|
||||
.authentication-feed {
|
||||
&__card {
|
||||
display: grid;
|
||||
grid-gap: var(--su-6);
|
||||
padding: var(--su-6);
|
||||
margin: var(--su-3);
|
||||
background: rgba(var(--brand), 0.1);
|
||||
color: var(--card-color);
|
||||
&__image {
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(var(--brand), 0.1);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
padding: var(--su-7);
|
||||
margin: 0 0 var(--su-3) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
width: var(--su-8);
|
||||
height: var(--su-8);
|
||||
margin-bottom: var(--su-2);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-right: var(--su-7);
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
border-radius: var(--radius);
|
||||
transform: rotate(-10deg);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: var(--card-color);
|
||||
font-size: var(--fs-2xl);
|
||||
line-height: var(--lh-tight);
|
||||
|
||||
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-widget {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
<a href="<%= sign_up_path(state: "new-user") %>" data-tracking-id="ca_feed_home_page" data-tracking-source="feed_card" class="crayons-btn" aria-label="<%= t("views.auth.create.aria_label") %>" data-no-instant>
|
||||
<%= t("views.auth.create.text") %>
|
||||
</a>
|
||||
<a href="<%= sign_up_path %>" class="crayons-btn crayons-btn--ghost-brand" aria-label="<%= t("views.auth.login.aria_label") %>">
|
||||
<%= t("views.auth.login.text") %>
|
||||
</a>
|
||||
<div>
|
||||
<div class="align-center">
|
||||
<a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn w-75" aria-label="<%= t("views.auth.create.aria_label") %>" data-tracking-id="ca_feed_home_page" data-tracking-source="feed_card" data-no-instant>
|
||||
<%= t("views.auth.create.text") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="align-center mt-4">
|
||||
<span>
|
||||
<%= t("views.auth.already_have_an_account") %>
|
||||
<a
|
||||
href="<%= sign_up_path %>"
|
||||
aria-label="<%= t("views.auth.login.aria_label") %>"
|
||||
data-tracking-id="si_feed_home_page"
|
||||
data-tracking-source="feed_card"
|
||||
data-no-instant>
|
||||
<%= t("views.auth.sign_in") %>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
<div class="authentication-feed__card" id="in-feed-cta">
|
||||
<div class="authentication-feed__container crayons-layout__content">
|
||||
<figure class="authentication-feed__image-container">
|
||||
<img class="authentication-feed__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
|
||||
alt="Secondary <%= community_name %> logo" loading="lazy" />
|
||||
</figure>
|
||||
<div class="authentication-feed__content crayons-layout__content">
|
||||
<h2 class="authentication-feed__title">
|
||||
<%= render "shared/authentication_title" %>
|
||||
</h2>
|
||||
<p class="authentication-feed__description">
|
||||
<%= render "shared/authentication_description" %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="crayons-card mt-2 m:mt-0 mb-2 m:p-8 p-4" id="in-feed-cta">
|
||||
<div class="align-center">
|
||||
<img class="authentication-feed__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
|
||||
alt="Secondary <%= community_name %> logo" loading="lazy" />
|
||||
</div>
|
||||
<h2 class="crayons-subtitle-3 mt-5 fs-l align-center">
|
||||
<%= render "shared/authentication_title" %>
|
||||
</h2>
|
||||
<p class="align-center mt-1 color-base-60 fs-base">
|
||||
<%= render "shared/authentication_description" %>
|
||||
</p>
|
||||
|
||||
<div class="authentication-feed__actions" id="authentication-feed-actions">
|
||||
<div class="align-center mt-4" id="authentication-feed-actions">
|
||||
<%= render "shared/authentication_actions" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ en:
|
|||
icon: Edit username
|
||||
text_html: "%{start}Your username will be\_%{end}%{button}"
|
||||
submit: Create my account
|
||||
already_have_an_account: Already have an account?
|
||||
sign_in: Sign in
|
||||
login:
|
||||
aria_label: Log in
|
||||
text: Log in
|
||||
|
|
@ -73,7 +75,7 @@ en:
|
|||
step_3: There is lots you can do as an admin, but there is a learning curve.
|
||||
step_4: Please reach out to the Forem team if you are unsure about anything!
|
||||
step_5: "For Empowering Community 🌱"
|
||||
tagline: Log in to customize your experience and get involved.
|
||||
tagline: We are a place where coders share, stay up-to-date and grow their careers.
|
||||
title:
|
||||
text_html: <a href="/" class="c-link c-link--branded">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
text_html: "%{name} is a community of %{maybe_size}amazing %{label}"
|
||||
size: "%{num} "
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ fr:
|
|||
icon: Edit username
|
||||
text_html: "%{start}Your username will be\_%{end}%{button}"
|
||||
submit: Create my account
|
||||
already_have_an_account: Already have an account?
|
||||
sign_in: Sign in
|
||||
login:
|
||||
aria_label: Log in
|
||||
text: Se connecter
|
||||
|
|
@ -73,7 +75,7 @@ fr:
|
|||
step_3: There is lots you can do as an admin, but there is a learning curve.
|
||||
step_4: Please reach out to the Forem team if you are unsure about anything!
|
||||
step_5: "For Empowering Community 🌱"
|
||||
tagline: Log in to customize your experience and get involved.
|
||||
tagline: We are a place where coders share, stay up-to-date and grow their careers.
|
||||
title:
|
||||
text_html: <a href="/" class="c-link c-link--branded">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
text_html: "%{name} is a community of %{maybe_size}amazing %{label}"
|
||||
size: "%{num} "
|
||||
|
|
|
|||
|
|
@ -74,7 +74,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(".authentication-feed__card", count: 1)
|
||||
expect(page).to have_selector("#in-feed-cta", count: 1)
|
||||
|
||||
within("#main-content") do
|
||||
expect(page).to have_text(article.title)
|
||||
|
|
@ -92,7 +92,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(".authentication-feed__card", count: 1)
|
||||
expect(page).to have_selector("#in-feed-cta", count: 1)
|
||||
|
||||
within("#main-content") do
|
||||
expect(page).to have_text(article.title)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue