add a little bit of styling

This commit is contained in:
ellaestigoy 2022-04-05 15:03:17 -06:00
parent aae721fc39
commit 0792e6644d
7 changed files with 67 additions and 15 deletions

View File

@ -1,16 +1,45 @@
.custom-need-access-prompt {
.custom-gated-topic-container {
background: var(--tertiary-low);
display: block;
border-top: 5px solid var(--tertiary);
position: fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
padding: 2em;
z-index: 999;
min-height: 65%;
// align content in the middle
display: grid;
place-items: center;
}
.custom-gated-topic-content {
text-align: center;
&--header {
font-size: var(--font-up-5);
margin-bottom: 1rem;
font-weight: 700;
}
&--text {
font-size: var(--font-up-2);
}
&--cta {
margin-top: 2rem;
&__signup {
margin-bottom: 1rem;
}
}
}
.topic-in-gated-category {
overflow-y: hidden;
height: 100%;
.topic-navigation {
visibility: hidden;
}

View File

@ -1 +0,0 @@
{{need-access-prompt categoryId=model.category_id}}

View File

@ -0,0 +1 @@
{{topic-in-gated-category categoryId=model.category_id}}

View File

@ -1,6 +0,0 @@
{{#if shouldShow}}
<div class="custom-need-access-prompt">
<h1>{{theme-setting "prompt_heading"}}</h1>
{{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" translatedLabel=(theme-setting "prompt_cta_label")}}
</div>
{{/if}}

View File

@ -0,0 +1,21 @@
{{#if shouldShow}}
<div class="custom-gated-topic-container">
<div class="custom-gated-topic-content">
<div class="custom-gated-topic-content--header">
{{theme-setting "heading_text"}}
</div>
<p class="custom-gated-topic-content--text">
{{theme-setting "subheading_text"}}
</p>
<div class="custom-gated-topic-content--cta">
<div class="custom-gated-topic-content--cta__signup">
{{d-button action=(route-action "showCreateAccount") class="btn-primary btn-large sign-up-button" translatedLabel=(theme-setting "signup_cta_label")}}
</div>
<div class="custom-gated-topic-content--cta__login">
{{d-button action=(route-action "showLogin") id="login-link" class="btn btn-text login-button" translatedLabel=(theme-setting "login_cta_label")}}
</div>
</div>
</div>
</div>
{{/if}}

View File

@ -2,12 +2,20 @@ enabled_categories:
type: list
list_type: category
default: ""
description: "Choose which categories that users need to sign up"
prompt_heading:
description: "Choose which categories that users need to sign up for."
heading_text:
type: string
default: "Sign up to read the rest of the post"
default: "This area is for members only"
description: ""
prompt_cta_label:
subheading_text:
type: string
default: "Create an account to view this content"
description: ""
signup_cta_label:
type: string
default: "Sign Up"
description: ""
login_cta_label:
type: string
default: "Already have an account? Sign in"
description: ""