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

21
common/common.scss
View file

@ -183,8 +183,8 @@
.cta-card {
display: flex;
align-items: center;
gap: 4px;
flex-direction: column;
gap: 12px;
padding: 8px;
border-radius: 4px;
text-decoration: none;
@ -201,6 +201,12 @@
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.17);
}
.cta-top {
display: flex;
align-items: center;
gap: 4px;
}
.cta-icon {
flex-shrink: 0;
font-size: 40px;
@ -230,14 +236,19 @@
}
.cta-cta {
display: block;
margin-top: 10px;
display: flex;
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);
font-weight: 500;
}
.cta-cta .d-icon {
margin-left: 0;
margin-right: 10px;
margin-right: 5px;
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}}
<li>
<a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}>
<div class="cta-icon">
{{#if (eq settings.cta_card_1_icon_type "font_awesome")}}
{{icon settings.cta_card_1_icon_font_awesome}}
{{else}}
{{settings.cta_card_1_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_1_title}}</span>
<span class="cta-desc">{{settings.cta_card_1_description}}</span>
<span class="cta-cta">
{{icon settings.cta_card_1_cta_icon}}
{{settings.cta_card_1_cta_text}}
</span>
<div class="cta-top">
<div class="cta-icon">
{{#if (eq settings.cta_card_1_icon_type "font_awesome")}}
{{icon settings.cta_card_1_icon_font_awesome}}
{{else}}
{{settings.cta_card_1_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_1_title}}</span>
<span class="cta-desc">{{settings.cta_card_1_description}}</span>
</div>
</div>
<span class="cta-cta">
{{icon settings.cta_card_1_cta_icon}}
{{settings.cta_card_1_cta_text}}
</span>
</a>
</li>
{{/if}}
@ -97,21 +99,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_2_enabled}}
<li>
<a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}>
<div class="cta-icon">
{{#if (eq settings.cta_card_2_icon_type "font_awesome")}}
{{icon settings.cta_card_2_icon_font_awesome}}
{{else}}
{{settings.cta_card_2_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_2_title}}</span>
<span class="cta-desc">{{settings.cta_card_2_description}}</span>
<span class="cta-cta">
{{icon settings.cta_card_2_cta_icon}}
{{settings.cta_card_2_cta_text}}
</span>
<div class="cta-top">
<div class="cta-icon">
{{#if (eq settings.cta_card_2_icon_type "font_awesome")}}
{{icon settings.cta_card_2_icon_font_awesome}}
{{else}}
{{settings.cta_card_2_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_2_title}}</span>
<span class="cta-desc">{{settings.cta_card_2_description}}</span>
</div>
</div>
<span class="cta-cta">
{{icon settings.cta_card_2_cta_icon}}
{{settings.cta_card_2_cta_text}}
</span>
</a>
</li>
{{/if}}
@ -119,21 +123,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_3_enabled}}
<li>
<a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}>
<div class="cta-icon">
{{#if (eq settings.cta_card_3_icon_type "font_awesome")}}
{{icon settings.cta_card_3_icon_font_awesome}}
{{else}}
{{settings.cta_card_3_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_3_title}}</span>
<span class="cta-desc">{{settings.cta_card_3_description}}</span>
<span class="cta-cta">
{{icon settings.cta_card_3_cta_icon}}
{{settings.cta_card_3_cta_text}}
</span>
<div class="cta-top">
<div class="cta-icon">
{{#if (eq settings.cta_card_3_icon_type "font_awesome")}}
{{icon settings.cta_card_3_icon_font_awesome}}
{{else}}
{{settings.cta_card_3_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_3_title}}</span>
<span class="cta-desc">{{settings.cta_card_3_description}}</span>
</div>
</div>
<span class="cta-cta">
{{icon settings.cta_card_3_cta_icon}}
{{settings.cta_card_3_cta_text}}
</span>
</a>
</li>
{{/if}}
@ -141,21 +147,23 @@ export default class WelcomeBanner extends Component {
{{#if settings.cta_card_4_enabled}}
<li>
<a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}>
<div class="cta-icon">
{{#if (eq settings.cta_card_4_icon_type "font_awesome")}}
{{icon settings.cta_card_4_icon_font_awesome}}
{{else}}
{{settings.cta_card_4_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_4_title}}</span>
<span class="cta-desc">{{settings.cta_card_4_description}}</span>
<span class="cta-cta">
{{icon settings.cta_card_4_cta_icon}}
{{settings.cta_card_4_cta_text}}
</span>
<div class="cta-top">
<div class="cta-icon">
{{#if (eq settings.cta_card_4_icon_type "font_awesome")}}
{{icon settings.cta_card_4_icon_font_awesome}}
{{else}}
{{settings.cta_card_4_icon_emoji}}
{{/if}}
</div>
<div class="cta-content">
<span class="cta-title">{{settings.cta_card_4_title}}</span>
<span class="cta-desc">{{settings.cta_card_4_description}}</span>
</div>
</div>
<span class="cta-cta">
{{icon settings.cta_card_4_cta_icon}}
{{settings.cta_card_4_cta_text}}
</span>
</a>
</li>
{{/if}}