Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Welcome topic CTA adjustments (#18168) 

* UX: Adjust welcome cta

* more

* FIX: Adjust test syntax
This commit is contained in:
Jordan Vidrine 2022-09-19 16:40:44 -05:00 committed by GitHub
parent 36aec7f546
commit a766bf8818
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/templates/components/welcome-topic-banner.hbs
View File

@ -1,9 +1,7 @@
<div class="welcome-topic-banner">
<div class="col-text">
<h1 class="title">{{i18n "welcome_topic_banner.title"}}</h1>
<p class="description">{{i18n "welcome_topic_banner.description"}}</p>
</div>
<div class="col-button">
<DButton @class="btn-primary welcome-topic-cta" @action={{action "editWelcomeTopic"}} @label="welcome_topic_banner.button_title" />
<div class="welcome-cta">
<div class="welcome-cta__content">
<h1 class="welcome-cta__title">{{i18n "welcome_topic_banner.title"}}</h1>
<p class="welcome-cta__description">{{i18n "welcome_topic_banner.description"}}</p>
</div>
<DButton @class="btn-primary welcome-cta__button" @action={{action "editWelcomeTopic"}} @label="welcome_topic_banner.button_title" />
</div>

4
app/assets/javascripts/discourse/tests/acceptance/welcome-topic-banner-test.js
View File

@ -8,9 +8,9 @@ acceptance("Welcome Topic Banner", function (needs) {
test("Navigation", async function (assert) {
await visit("/");
assert.ok(exists(".welcome-topic-banner"), "has the welcome topic banner");
assert.ok(exists(".welcome-cta"), "has the welcome topic banner");
assert.ok(
exists("button.welcome-topic-cta"),
exists("button.welcome-cta__button"),
"has the welcome topic edit button"
);
});

25
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -250,21 +250,26 @@
}
}
.welcome-topic-banner {
border: 1px solid var(--primary-low);
.container.list-container {
position: relative;
}
.welcome-cta {
background-color: var(--secondary);
border: 1px solid var(--primary-low-mid);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
padding: 10px;
padding: 12px 20px;
display: flex;
flex-direction: row;
.col-text {
justify-content: space-between;
position: absolute;
top: 44px;
width: calc(100% - 40px);
z-index: z("usercard");
&__content {
width: 70%;
}
.col-button {
width: 30%;
display: flex;
&__button {
align-self: center;
justify-content: flex-end;
padding-right: 30px;
}
}