gabeszm/weclome-banner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restructure CTA cards with bottom-aligned call-to-action

Browse source 
- Move cta-cta element outside cta-content to card bottom
- Add cta-top wrapper to group icon and content horizontally
- Change cta-card to flex column layout with gap
- Style cta-cta as full-width bottom element with separator line
- Add border-top to visually separate CTA action from card content
- Improve visual hierarchy with cta-cta at bottom spanning full width
This commit is contained in:
gabeszm 2025-10-16 18:17:56 +02:00
parent e63dfaf59f
commit f69e2131b7
2 changed files with 83 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
common/common.scss
View file

@ -183,8 +183,8 @@
.cta-card { .cta-card {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 4px; gap: 12px;
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
@ -195,12 +195,18 @@
margin-top 150ms ease-in-out, margin-top 150ms ease-in-out,
box-shadow 150ms ease-in-out; box-shadow 150ms ease-in-out;
} }
.cta-card:hover { .cta-card:hover {
margin-top: -10px; margin-top: -10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.17); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.17);
} }
.cta-top {
display: flex;
align-items: center;
gap: 4px;
}
.cta-icon { .cta-icon {
flex-shrink: 0; flex-shrink: 0;
font-size: 40px; font-size: 40px;
@ -212,7 +218,7 @@
color: var(--text-color); color: var(--text-color);
padding: 5px; padding: 5px;
} }
.cta-content { .cta-content {
flex: 1; flex: 1;
} }
@ -230,14 +236,19 @@
} }
.cta-cta { .cta-cta {
display: block; display: flex;
margin-top: 10px; align-items: center;
width: 100%;
margin-top: auto;
padding: 8px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--primary-color); color: var(--primary-color);
font-weight: 500;
} }
.cta-cta .d-icon { .cta-cta .d-icon {
margin-left: 0; margin-left: 0;
margin-right: 10px; margin-right: 5px;
transition: margin 250ms ease-in-out; transition: margin 250ms ease-in-out;
} }

120
javascripts/discourse/components/welcome-banner.gjs
View file

@ -75,21 +75,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_1_enabled}} {{#if settings.cta_card_1_enabled}}
<li> <li>
<a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}> <a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}>
<div class="cta-icon"> <div class="cta-top">
{{#if (eq settings.cta_card_1_icon_type "font_awesome")}} <div class="cta-icon">
{{icon settings.cta_card_1_icon_font_awesome}} {{#if (eq settings.cta_card_1_icon_type "font_awesome")}}
{{else}} {{icon settings.cta_card_1_icon_font_awesome}}
{{settings.cta_card_1_icon_emoji}} {{else}}
{{/if}} {{settings.cta_card_1_icon_emoji}}
</div> {{/if}}
<div class="cta-content"> </div>
<span class="cta-title">{{settings.cta_card_1_title}}</span> <div class="cta-content">
<span class="cta-desc">{{settings.cta_card_1_description}}</span> <span class="cta-title">{{settings.cta_card_1_title}}</span>
<span class="cta-cta"> <span class="cta-desc">{{settings.cta_card_1_description}}</span>
{{icon settings.cta_card_1_cta_icon}} </div>
{{settings.cta_card_1_cta_text}}
</span>
</div> </div>
<span class="cta-cta">
{{icon settings.cta_card_1_cta_icon}}
{{settings.cta_card_1_cta_text}}
</span>
</a> </a>
</li> </li>
{{/if}} {{/if}}
@ -97,21 +99,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_2_enabled}} {{#if settings.cta_card_2_enabled}}
<li> <li>
<a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}> <a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}>
<div class="cta-icon"> <div class="cta-top">
{{#if (eq settings.cta_card_2_icon_type "font_awesome")}} <div class="cta-icon">
{{icon settings.cta_card_2_icon_font_awesome}} {{#if (eq settings.cta_card_2_icon_type "font_awesome")}}
{{else}} {{icon settings.cta_card_2_icon_font_awesome}}
{{settings.cta_card_2_icon_emoji}} {{else}}
{{/if}} {{settings.cta_card_2_icon_emoji}}
</div> {{/if}}
<div class="cta-content"> </div>
<span class="cta-title">{{settings.cta_card_2_title}}</span> <div class="cta-content">
<span class="cta-desc">{{settings.cta_card_2_description}}</span> <span class="cta-title">{{settings.cta_card_2_title}}</span>
<span class="cta-cta"> <span class="cta-desc">{{settings.cta_card_2_description}}</span>
{{icon settings.cta_card_2_cta_icon}} </div>
{{settings.cta_card_2_cta_text}}
</span>
</div> </div>
<span class="cta-cta">
{{icon settings.cta_card_2_cta_icon}}
{{settings.cta_card_2_cta_text}}
</span>
</a> </a>
</li> </li>
{{/if}} {{/if}}
@ -119,21 +123,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_3_enabled}} {{#if settings.cta_card_3_enabled}}
<li> <li>
<a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}> <a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}>
<div class="cta-icon"> <div class="cta-top">
{{#if (eq settings.cta_card_3_icon_type "font_awesome")}} <div class="cta-icon">
{{icon settings.cta_card_3_icon_font_awesome}} {{#if (eq settings.cta_card_3_icon_type "font_awesome")}}
{{else}} {{icon settings.cta_card_3_icon_font_awesome}}
{{settings.cta_card_3_icon_emoji}} {{else}}
{{/if}} {{settings.cta_card_3_icon_emoji}}
</div> {{/if}}
<div class="cta-content"> </div>
<span class="cta-title">{{settings.cta_card_3_title}}</span> <div class="cta-content">
<span class="cta-desc">{{settings.cta_card_3_description}}</span> <span class="cta-title">{{settings.cta_card_3_title}}</span>
<span class="cta-cta"> <span class="cta-desc">{{settings.cta_card_3_description}}</span>
{{icon settings.cta_card_3_cta_icon}} </div>
{{settings.cta_card_3_cta_text}}
</span>
</div> </div>
<span class="cta-cta">
{{icon settings.cta_card_3_cta_icon}}
{{settings.cta_card_3_cta_text}}
</span>
</a> </a>
</li> </li>
{{/if}} {{/if}}
@ -141,21 +147,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_4_enabled}} {{#if settings.cta_card_4_enabled}}
<li> <li>
<a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}> <a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}>
<div class="cta-icon"> <div class="cta-top">
{{#if (eq settings.cta_card_4_icon_type "font_awesome")}} <div class="cta-icon">
{{icon settings.cta_card_4_icon_font_awesome}} {{#if (eq settings.cta_card_4_icon_type "font_awesome")}}
{{else}} {{icon settings.cta_card_4_icon_font_awesome}}
{{settings.cta_card_4_icon_emoji}} {{else}}
{{/if}} {{settings.cta_card_4_icon_emoji}}
</div> {{/if}}
<div class="cta-content"> </div>
<span class="cta-title">{{settings.cta_card_4_title}}</span> <div class="cta-content">
<span class="cta-desc">{{settings.cta_card_4_description}}</span> <span class="cta-title">{{settings.cta_card_4_title}}</span>
<span class="cta-cta"> <span class="cta-desc">{{settings.cta_card_4_description}}</span>
{{icon settings.cta_card_4_cta_icon}} </div>
{{settings.cta_card_4_cta_text}}
</span>
</div> </div>
<span class="cta-cta">
{{icon settings.cta_card_4_cta_icon}}
{{settings.cta_card_4_cta_text}}
</span>
</a> </a>
</li> </li>
{{/if}} {{/if}}