From f69e2131b7854298923e7aa22988bf70b53f6a49 Mon Sep 17 00:00:00 2001 From: gabeszm Date: Thu, 16 Oct 2025 18:17:56 +0200 Subject: [PATCH] Restructure CTA cards with bottom-aligned call-to-action - 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 --- common/common.scss | 27 ++-- .../discourse/components/welcome-banner.gjs | 120 ++++++++++-------- 2 files changed, 83 insertions(+), 64 deletions(-) diff --git a/common/common.scss b/common/common.scss index 7d54514..51a4578 100644 --- a/common/common.scss +++ b/common/common.scss @@ -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; @@ -195,12 +195,18 @@ margin-top 150ms ease-in-out, box-shadow 150ms ease-in-out; } - + .cta-card:hover { margin-top: -10px; 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; @@ -212,7 +218,7 @@ color: var(--text-color); padding: 5px; } - + .cta-content { flex: 1; } @@ -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; } diff --git a/javascripts/discourse/components/welcome-banner.gjs b/javascripts/discourse/components/welcome-banner.gjs index dd3e86c..356007c 100644 --- a/javascripts/discourse/components/welcome-banner.gjs +++ b/javascripts/discourse/components/welcome-banner.gjs @@ -75,21 +75,23 @@ export default class WelcomeBanner extends Component { {{#if settings.cta_card_1_enabled}}
  • -
    - {{#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}} -
    -
    - {{settings.cta_card_1_title}} - {{settings.cta_card_1_description}} - - {{icon settings.cta_card_1_cta_icon}} - {{settings.cta_card_1_cta_text}} - +
    +
    + {{#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}} +
    +
    + {{settings.cta_card_1_title}} + {{settings.cta_card_1_description}} +
    + + {{icon settings.cta_card_1_cta_icon}} + {{settings.cta_card_1_cta_text}} +
    • {{/if}} @@ -97,21 +99,23 @@ export default class WelcomeBanner extends Component { {{#if settings.cta_card_2_enabled}}
  • -
    - {{#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}} -
    -
    - {{settings.cta_card_2_title}} - {{settings.cta_card_2_description}} - - {{icon settings.cta_card_2_cta_icon}} - {{settings.cta_card_2_cta_text}} - +
    +
    + {{#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}} +
    +
    + {{settings.cta_card_2_title}} + {{settings.cta_card_2_description}} +
    + + {{icon settings.cta_card_2_cta_icon}} + {{settings.cta_card_2_cta_text}} +
    • {{/if}} @@ -119,21 +123,23 @@ export default class WelcomeBanner extends Component { {{#if settings.cta_card_3_enabled}}
  • -
    - {{#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}} -
    -
    - {{settings.cta_card_3_title}} - {{settings.cta_card_3_description}} - - {{icon settings.cta_card_3_cta_icon}} - {{settings.cta_card_3_cta_text}} - +
    +
    + {{#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}} +
    +
    + {{settings.cta_card_3_title}} + {{settings.cta_card_3_description}} +
    + + {{icon settings.cta_card_3_cta_icon}} + {{settings.cta_card_3_cta_text}} +
    • {{/if}} @@ -141,21 +147,23 @@ export default class WelcomeBanner extends Component { {{#if settings.cta_card_4_enabled}}
  • -
    - {{#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}} -
    -
    - {{settings.cta_card_4_title}} - {{settings.cta_card_4_description}} - - {{icon settings.cta_card_4_cta_icon}} - {{settings.cta_card_4_cta_text}} - +
    +
    + {{#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}} +
    +
    + {{settings.cta_card_4_title}} + {{settings.cta_card_4_description}} +
    + + {{icon settings.cta_card_4_cta_icon}} + {{settings.cta_card_4_cta_text}} +
    • {{/if}}