mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
Bug fixes for system crash
This commit is contained in:
@@ -16,8 +16,10 @@ const TABS = [
|
||||
id: "navbar",
|
||||
label: "Navbar",
|
||||
settings: new Set([
|
||||
"navbar_signin_label", "navbar_signin_enabled", "navbar_signin_color",
|
||||
"navbar_join_label", "navbar_join_enabled", "navbar_join_color",
|
||||
"navbar_signin_label", "navbar_signin_enabled",
|
||||
"navbar_signin_color_dark", "navbar_signin_color_light",
|
||||
"navbar_join_label", "navbar_join_enabled",
|
||||
"navbar_join_color_dark", "navbar_join_color_light",
|
||||
"navbar_bg_color", "navbar_border_style"
|
||||
])
|
||||
},
|
||||
@@ -26,16 +28,19 @@ const TABS = [
|
||||
label: "Hero",
|
||||
settings: new Set([
|
||||
"hero_title", "hero_accent_word", "hero_subtitle",
|
||||
"hero_card_enabled", "hero_image_first", "hero_content_width",
|
||||
"hero_card_enabled", "hero_image_first",
|
||||
"hero_background_image_url", "hero_image_urls", "hero_image_max_height",
|
||||
"hero_primary_button_enabled", "hero_primary_button_label", "hero_primary_button_url",
|
||||
"hero_secondary_button_enabled", "hero_secondary_button_label", "hero_secondary_button_url",
|
||||
"hero_primary_btn_color_dark", "hero_primary_btn_color_light",
|
||||
"hero_secondary_btn_color_dark", "hero_secondary_btn_color_light",
|
||||
"hero_video_url", "hero_video_button_color", "hero_video_blur_on_hover",
|
||||
"hero_bg_dark", "hero_bg_light", "hero_min_height", "hero_border_style",
|
||||
"hero_card_bg_dark", "hero_card_bg_light", "hero_card_opacity",
|
||||
"contributors_enabled", "contributors_title", "contributors_title_enabled",
|
||||
"contributors_count_label", "contributors_count_label_enabled",
|
||||
"contributors_alignment", "contributors_pill_max_width", "contributors_pill_bg_color",
|
||||
"contributors_alignment", "contributors_pill_max_width",
|
||||
"contributors_pill_bg_dark", "contributors_pill_bg_light",
|
||||
"contributors_days", "contributors_count"
|
||||
])
|
||||
},
|
||||
@@ -48,6 +53,7 @@ const TABS = [
|
||||
"stat_icon_color", "stat_icon_bg_color", "stat_icon_shape", "stat_counter_color",
|
||||
"stat_members_label", "stat_topics_label", "stat_posts_label",
|
||||
"stat_likes_label", "stat_chats_label", "stat_round_numbers",
|
||||
"stat_card_bg_dark", "stat_card_bg_light",
|
||||
"stats_bg_dark", "stats_bg_light", "stats_min_height", "stats_border_style"
|
||||
])
|
||||
},
|
||||
@@ -57,7 +63,8 @@ const TABS = [
|
||||
settings: new Set([
|
||||
"about_enabled", "about_heading_enabled", "about_heading",
|
||||
"about_title", "about_role", "about_body", "about_image_url",
|
||||
"about_card_color", "about_background_image_url",
|
||||
"about_card_color_dark", "about_card_color_light",
|
||||
"about_background_image_url",
|
||||
"about_bg_dark", "about_bg_light", "about_min_height", "about_border_style"
|
||||
])
|
||||
},
|
||||
@@ -66,7 +73,7 @@ const TABS = [
|
||||
label: "Trending",
|
||||
settings: new Set([
|
||||
"topics_enabled", "topics_title_enabled", "topics_title", "topics_count",
|
||||
"topics_card_bg_color",
|
||||
"topics_card_bg_dark", "topics_card_bg_light",
|
||||
"topics_bg_dark", "topics_bg_light", "topics_min_height", "topics_border_style"
|
||||
])
|
||||
},
|
||||
@@ -75,7 +82,8 @@ const TABS = [
|
||||
label: "Spaces",
|
||||
settings: new Set([
|
||||
"groups_enabled", "groups_title_enabled", "groups_title", "groups_count",
|
||||
"groups_selected", "groups_card_bg_color",
|
||||
"groups_selected",
|
||||
"groups_card_bg_dark", "groups_card_bg_light",
|
||||
"groups_bg_dark", "groups_bg_light", "groups_min_height", "groups_border_style"
|
||||
])
|
||||
},
|
||||
@@ -102,15 +110,32 @@ const TABS = [
|
||||
}
|
||||
];
|
||||
|
||||
// Dark/light background pairs — light row gets merged into dark row
|
||||
// Dark/light color pairs — light row gets merged into dark row (same-row display)
|
||||
const BG_PAIRS = [
|
||||
// Navbar
|
||||
["navbar_signin_color_dark", "navbar_signin_color_light"],
|
||||
["navbar_join_color_dark", "navbar_join_color_light"],
|
||||
// Hero
|
||||
["hero_primary_btn_color_dark", "hero_primary_btn_color_light"],
|
||||
["hero_secondary_btn_color_dark", "hero_secondary_btn_color_light"],
|
||||
["hero_bg_dark", "hero_bg_light"],
|
||||
["hero_card_bg_dark", "hero_card_bg_light"],
|
||||
["contributors_pill_bg_dark", "contributors_pill_bg_light"],
|
||||
// Stats
|
||||
["stat_card_bg_dark", "stat_card_bg_light"],
|
||||
["stats_bg_dark", "stats_bg_light"],
|
||||
// About
|
||||
["about_card_color_dark", "about_card_color_light"],
|
||||
["about_bg_dark", "about_bg_light"],
|
||||
// Trending
|
||||
["topics_card_bg_dark", "topics_card_bg_light"],
|
||||
["topics_bg_dark", "topics_bg_light"],
|
||||
// Spaces
|
||||
["groups_card_bg_dark", "groups_card_bg_light"],
|
||||
["groups_bg_dark", "groups_bg_light"],
|
||||
// App CTA
|
||||
["app_cta_bg_dark", "app_cta_bg_light"],
|
||||
// Footer
|
||||
["footer_bg_dark", "footer_bg_light"],
|
||||
];
|
||||
|
||||
|
||||
@@ -310,19 +310,20 @@
|
||||
}
|
||||
|
||||
.cl-btn--primary {
|
||||
background: var(--cl-accent);
|
||||
background: var(--cl-primary-btn-bg, var(--cl-accent));
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px var(--cl-accent-glow);
|
||||
}
|
||||
|
||||
.cl-btn--primary:hover {
|
||||
background: var(--cl-accent-hover);
|
||||
background: var(--cl-primary-btn-bg, var(--cl-accent-hover));
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px var(--cl-accent-glow);
|
||||
}
|
||||
|
||||
.cl-btn--ghost {
|
||||
background: var(--cl-glass);
|
||||
background: var(--cl-secondary-btn-bg, var(--cl-glass));
|
||||
color: var(--cl-text-strong);
|
||||
border: 1px solid var(--cl-glass-border);
|
||||
backdrop-filter: var(--cl-blur);
|
||||
@@ -330,7 +331,7 @@
|
||||
}
|
||||
|
||||
.cl-btn--ghost:hover {
|
||||
background: var(--cl-accent-subtle);
|
||||
background: var(--cl-secondary-btn-bg, var(--cl-accent-subtle));
|
||||
border-color: var(--cl-accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@@ -499,21 +500,23 @@
|
||||
}
|
||||
|
||||
.cl-navbar__link.cl-btn--primary {
|
||||
background: var(--cl-accent);
|
||||
background: var(--cl-navbar-join-bg, var(--cl-accent));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cl-navbar__link.cl-btn--primary:hover {
|
||||
background: var(--cl-accent-hover);
|
||||
background: var(--cl-navbar-join-bg, var(--cl-accent-hover));
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.cl-navbar__link.cl-btn--ghost {
|
||||
border: 1px solid var(--cl-border);
|
||||
border: 1px solid var(--cl-navbar-signin-color, var(--cl-border));
|
||||
color: var(--cl-navbar-signin-color, var(--cl-text-strong));
|
||||
}
|
||||
|
||||
.cl-navbar__link.cl-btn--ghost:hover {
|
||||
background: var(--cl-accent-subtle);
|
||||
border-color: var(--cl-border-hover);
|
||||
border-color: var(--cl-navbar-signin-color, var(--cl-border-hover));
|
||||
}
|
||||
|
||||
/* Theme Toggle */
|
||||
@@ -637,18 +640,6 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.cl-hero__content {
|
||||
flex: 0 0 var(--cl-hero-content-w, 50%);
|
||||
max-width: var(--cl-hero-content-w, 50%);
|
||||
}
|
||||
|
||||
.cl-hero__image {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cl-hero__title {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
font-weight: 900;
|
||||
@@ -946,7 +937,7 @@
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--cl-card);
|
||||
background: var(--cl-stat-card-bg, var(--cl-card));
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: var(--cl-radius-sm);
|
||||
backdrop-filter: var(--cl-blur);
|
||||
@@ -1287,7 +1278,7 @@
|
||||
padding: 0.6rem 1.25rem 0.6rem 0.6rem;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
background: var(--cl-card);
|
||||
background: var(--cl-pill-bg, var(--cl-card));
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -21,10 +21,12 @@ en:
|
||||
# ── 1. Navbar ──
|
||||
navbar_signin_label: "━━ ROW 1: NAVBAR ━━ — Fixed navigation bar at the top with logo, theme toggle, sign-in link, and join button. This setting controls the sign-in link text."
|
||||
navbar_signin_enabled: "Show the sign-in link in the navbar."
|
||||
navbar_signin_color: "Custom color for the sign-in link text and border. Leave blank for default."
|
||||
navbar_signin_color_dark: "Sign-in link color. Dark (left) and light (right) pickers. Leave blank for default."
|
||||
navbar_signin_color_light: "Light mode color for the sign-in link."
|
||||
navbar_join_label: "Text for the join/register CTA button in the navbar."
|
||||
navbar_join_enabled: "Show the join/register button in the navbar."
|
||||
navbar_join_color: "Custom background color for the join button. Leave blank to use the accent color."
|
||||
navbar_join_color_dark: "Join button background color. Dark (left) and light (right) pickers. Leave blank for accent color."
|
||||
navbar_join_color_light: "Light mode background for the join button."
|
||||
navbar_bg_color: "Custom background color for the navbar when scrolled. Leave blank for the default frosted glass effect."
|
||||
navbar_border_style: "Border style at the bottom of the navbar when scrolled."
|
||||
|
||||
@@ -34,7 +36,6 @@ en:
|
||||
hero_subtitle: "Supporting text below the hero headline. Describe your community's purpose or value proposition."
|
||||
hero_card_enabled: "Display the hero content inside a rounded card container with border and shadow. When off, the hero uses a flat full-width layout."
|
||||
hero_image_first: "Show the hero image above the text on mobile and to the left on desktop. When off, text appears first (default)."
|
||||
hero_content_width: "Width of the text column as a percentage (20–80). The image column fills the remaining space. Default 50 gives equal columns."
|
||||
hero_background_image_url: "Full-bleed background image behind the hero section. In card mode, fills the card with a dark overlay. In flat mode, covers the entire section."
|
||||
hero_image_urls: "Images displayed on the right side of the hero. Add up to 5 URLs — a random one is shown on each page load."
|
||||
hero_image_max_height: "Maximum height in pixels for the hero image (100–1200)."
|
||||
@@ -44,6 +45,10 @@ en:
|
||||
hero_secondary_button_enabled: "Show the secondary CTA button in the hero section."
|
||||
hero_secondary_button_label: "Text on the secondary (outlined) CTA button."
|
||||
hero_secondary_button_url: "URL the secondary button links to."
|
||||
hero_primary_btn_color_dark: "Primary button background color. Dark (left) and light (right) pickers. Leave blank for accent color."
|
||||
hero_primary_btn_color_light: "Light mode background for the primary button."
|
||||
hero_secondary_btn_color_dark: "Secondary button background color. Dark (left) and light (right) pickers. Leave blank for default glass style."
|
||||
hero_secondary_btn_color_light: "Light mode background for the secondary button."
|
||||
hero_video_url: "URL for a hero video. Supports MP4 and YouTube links. A play button appears in the hero area; clicking opens a lightbox modal with the video."
|
||||
hero_video_button_color: "Custom background color for the hero video play button. Leave blank to use the accent color."
|
||||
hero_video_blur_on_hover: "Apply a blur effect to the hero image when hovering the play button."
|
||||
@@ -71,6 +76,8 @@ en:
|
||||
stat_likes_label: "Custom label for the Likes stat card."
|
||||
stat_chats_label: "Custom label for the Chats stat card. Shows total chat messages if the Chat plugin is active."
|
||||
stat_round_numbers: "Round large numbers for a cleaner display: 1000 becomes 1K, 12345 becomes 12.3K, 1234567 becomes 1.2M."
|
||||
stat_card_bg_dark: "Stat card background color. Dark (left) and light (right) pickers. Leave blank for default card styling."
|
||||
stat_card_bg_light: "Light mode background for stat cards."
|
||||
stats_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default."
|
||||
stats_bg_light: "Light mode background for the stats section."
|
||||
stats_min_height: "Minimum height for the stats section in pixels. Set to 0 for auto height."
|
||||
@@ -84,8 +91,9 @@ en:
|
||||
about_role: "Subtitle below the author name (e.g. 'Community Manager'). If blank, the site name is used."
|
||||
about_body: "Main body text for the About card. Supports basic HTML: p, a, strong, em, ul, li, br."
|
||||
about_image_url: "Small avatar image shown next to the author name. Square images work best."
|
||||
about_card_color: "Background color for the About card. Leave blank for the default theme color."
|
||||
about_background_image_url: "Background image layered on top of the gradient. Use a subtle pattern or texture."
|
||||
about_card_color_dark: "About card background color. Dark (left) and light (right) pickers. Leave blank for default theme color."
|
||||
about_card_color_light: "Light mode background for the About card."
|
||||
about_background_image_url: "Background image layered on top of the card color. Use a subtle pattern or texture."
|
||||
about_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default."
|
||||
about_bg_light: "Light mode background for the about section."
|
||||
about_min_height: "Minimum height for the about section in pixels. Set to 0 for auto height."
|
||||
@@ -96,7 +104,8 @@ en:
|
||||
topics_title_enabled: "Show the section heading above the trending topic cards."
|
||||
topics_title: "Heading text above the scrollable topic cards."
|
||||
topics_count: "Number of trending topic cards to display."
|
||||
topics_card_bg_color: "Background color for each trending topic card. Leave blank for default card styling."
|
||||
topics_card_bg_dark: "Topic card background color. Dark (left) and light (right) pickers. Leave blank for default card styling."
|
||||
topics_card_bg_light: "Light mode background for topic cards."
|
||||
topics_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default."
|
||||
topics_bg_light: "Light mode background for the trending section."
|
||||
topics_min_height: "Minimum height for the trending section in pixels. Set to 0 for auto height."
|
||||
@@ -110,7 +119,8 @@ en:
|
||||
contributors_count_label_enabled: "Show the count label prefix before each creator's activity count."
|
||||
contributors_alignment: "Horizontal alignment of the creators list: center or left."
|
||||
contributors_pill_max_width: "Maximum width in pixels for each creator pill card (200–600)."
|
||||
contributors_pill_bg_color: "Custom background color for creator pill cards. Leave blank for default glass card styling."
|
||||
contributors_pill_bg_dark: "Creator pill background color. Dark (left) and light (right) pickers. Leave blank for default glass styling."
|
||||
contributors_pill_bg_light: "Light mode background for creator pills."
|
||||
contributors_days: "Lookback period in days for calculating top contributors."
|
||||
contributors_count: "Number of top contributors to fetch (top 3 are shown in the hero)."
|
||||
|
||||
@@ -120,7 +130,8 @@ en:
|
||||
groups_title: "Heading text above the group cards."
|
||||
groups_count: "Number of group cards to display."
|
||||
groups_selected: "Show only specific groups. Enter group names separated by pipes (e.g. designers|developers|artists). Leave blank to auto-select public groups."
|
||||
groups_card_bg_color: "Background color for each space card. Leave blank for default card styling."
|
||||
groups_card_bg_dark: "Space card background color. Dark (left) and light (right) pickers. Leave blank for default card styling."
|
||||
groups_card_bg_light: "Light mode background for space cards."
|
||||
groups_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default."
|
||||
groups_bg_light: "Light mode background for the spaces section."
|
||||
groups_min_height: "Minimum height for the spaces section in pixels. Set to 0 for auto height."
|
||||
|
||||
@@ -80,7 +80,10 @@ plugins:
|
||||
navbar_signin_enabled:
|
||||
default: true
|
||||
type: bool
|
||||
navbar_signin_color:
|
||||
navbar_signin_color_dark:
|
||||
default: ""
|
||||
type: color
|
||||
navbar_signin_color_light:
|
||||
default: ""
|
||||
type: color
|
||||
navbar_join_label:
|
||||
@@ -89,7 +92,10 @@ plugins:
|
||||
navbar_join_enabled:
|
||||
default: true
|
||||
type: bool
|
||||
navbar_join_color:
|
||||
navbar_join_color_dark:
|
||||
default: ""
|
||||
type: color
|
||||
navbar_join_color_light:
|
||||
default: ""
|
||||
type: color
|
||||
navbar_bg_color:
|
||||
@@ -124,11 +130,6 @@ plugins:
|
||||
hero_image_first:
|
||||
default: false
|
||||
type: bool
|
||||
hero_content_width:
|
||||
default: 50
|
||||
type: integer
|
||||
min: 20
|
||||
max: 80
|
||||
hero_background_image_url:
|
||||
default: ""
|
||||
type: string
|
||||
@@ -158,6 +159,18 @@ plugins:
|
||||
hero_secondary_button_url:
|
||||
default: "/login"
|
||||
type: string
|
||||
hero_primary_btn_color_dark:
|
||||
default: ""
|
||||
type: color
|
||||
hero_primary_btn_color_light:
|
||||
default: ""
|
||||
type: color
|
||||
hero_secondary_btn_color_dark:
|
||||
default: ""
|
||||
type: color
|
||||
hero_secondary_btn_color_light:
|
||||
default: ""
|
||||
type: color
|
||||
hero_video_url:
|
||||
default: ""
|
||||
type: string
|
||||
@@ -252,6 +265,12 @@ plugins:
|
||||
stat_round_numbers:
|
||||
default: false
|
||||
type: bool
|
||||
stat_card_bg_dark:
|
||||
default: ""
|
||||
type: color
|
||||
stat_card_bg_light:
|
||||
default: ""
|
||||
type: color
|
||||
stats_bg_dark:
|
||||
default: ""
|
||||
type: color
|
||||
@@ -296,7 +315,10 @@ plugins:
|
||||
about_image_url:
|
||||
default: ""
|
||||
type: string
|
||||
about_card_color:
|
||||
about_card_color_dark:
|
||||
default: ""
|
||||
type: color
|
||||
about_card_color_light:
|
||||
default: ""
|
||||
type: color
|
||||
about_background_image_url:
|
||||
@@ -337,7 +359,10 @@ plugins:
|
||||
topics_count:
|
||||
default: 5
|
||||
type: integer
|
||||
topics_card_bg_color:
|
||||
topics_card_bg_dark:
|
||||
default: ""
|
||||
type: color
|
||||
topics_card_bg_light:
|
||||
default: ""
|
||||
type: color
|
||||
topics_bg_dark:
|
||||
@@ -389,7 +414,10 @@ plugins:
|
||||
type: integer
|
||||
min: 200
|
||||
max: 600
|
||||
contributors_pill_bg_color:
|
||||
contributors_pill_bg_dark:
|
||||
default: ""
|
||||
type: color
|
||||
contributors_pill_bg_light:
|
||||
default: ""
|
||||
type: color
|
||||
contributors_days:
|
||||
@@ -417,7 +445,10 @@ plugins:
|
||||
groups_selected:
|
||||
default: ""
|
||||
type: list
|
||||
groups_card_bg_color:
|
||||
groups_card_bg_dark:
|
||||
default: ""
|
||||
type: color
|
||||
groups_card_bg_light:
|
||||
default: ""
|
||||
type: color
|
||||
groups_bg_dark:
|
||||
|
||||
@@ -102,18 +102,14 @@ module CommunityLanding
|
||||
|
||||
signin_enabled = @s.navbar_signin_enabled rescue true
|
||||
join_enabled = @s.navbar_join_enabled rescue true
|
||||
signin_color = hex(@s.navbar_signin_color) rescue nil
|
||||
join_color = hex(@s.navbar_join_color) rescue nil
|
||||
|
||||
html << "<div class=\"cl-navbar__right\">"
|
||||
html << theme_toggle
|
||||
if signin_enabled
|
||||
signin_style = signin_color ? " style=\"color: #{signin_color}; border-color: #{signin_color}\"" : ""
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\"#{signin_style}>#{e(signin_label)}</a>\n"
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{e(signin_label)}</a>\n"
|
||||
end
|
||||
if join_enabled
|
||||
join_style = join_color ? " style=\"background: #{join_color}; border-color: #{join_color}\"" : ""
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\"#{join_style}>#{e(join_label)}</a>\n"
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{e(join_label)}</a>\n"
|
||||
end
|
||||
html << "</div>"
|
||||
|
||||
@@ -135,7 +131,6 @@ module CommunityLanding
|
||||
hero_bg_img = @s.hero_background_image_url.presence
|
||||
hero_border = @s.hero_border_style rescue "none"
|
||||
hero_min_h = @s.hero_min_height rescue 0
|
||||
content_w = @s.hero_content_width rescue 50
|
||||
site_name = @s.title
|
||||
|
||||
html = +""
|
||||
@@ -144,7 +139,6 @@ module CommunityLanding
|
||||
hero_style_parts << "background-image: url('#{hero_bg_img}');" if hero_bg_img
|
||||
hero_style_parts << "border-bottom: 1px #{hero_border} var(--cl-border);" if hero_border.present? && hero_border != "none"
|
||||
hero_style_parts << "min-height: #{hero_min_h}px;" if hero_min_h.to_i > 0
|
||||
hero_style_parts << "--cl-hero-content-w: #{content_w.to_i}%;" if content_w.to_i != 50
|
||||
hero_attr = hero_style_parts.any? ? " style=\"#{hero_style_parts.join(' ')}\"" : ""
|
||||
hero_classes = "cl-hero"
|
||||
hero_classes << " cl-hero--card" if hero_card
|
||||
@@ -161,7 +155,7 @@ module CommunityLanding
|
||||
target = accent_idx > 0 ? [accent_idx - 1, title_words.length - 1].min : title_words.length - 1
|
||||
before = title_words[0...target]
|
||||
accent = title_words[target]
|
||||
after = title_words[(target + 1)..]
|
||||
after = title_words[(target + 1)..-1] || []
|
||||
parts = +""
|
||||
parts << "#{e(before.join(' '))} " if before.any?
|
||||
parts << "<span class=\"cl-hero__title-accent\">#{e(accent)}</span>"
|
||||
@@ -198,7 +192,6 @@ module CommunityLanding
|
||||
show_count_label = @s.contributors_count_label_enabled rescue true
|
||||
alignment = @s.contributors_alignment rescue "center"
|
||||
pill_max_w = @s.contributors_pill_max_width rescue 340
|
||||
pill_bg = hex(@s.contributors_pill_bg_color) rescue nil
|
||||
|
||||
align_class = alignment == "left" ? " cl-hero__creators--left" : ""
|
||||
html << "<div class=\"cl-hero__creators#{align_class}\">\n"
|
||||
@@ -210,7 +203,6 @@ module CommunityLanding
|
||||
count_prefix = show_count_label && count_label.present? ? "#{e(count_label)} " : ""
|
||||
pill_style_parts = ["--rank-color: #{rank_color}"]
|
||||
pill_style_parts << "max-width: #{pill_max_w}px" if pill_max_w.to_i != 340
|
||||
pill_style_parts << "background: #{pill_bg}" if pill_bg
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-creator-pill cl-creator-pill--rank-#{idx + 1}\" style=\"#{pill_style_parts.join('; ')}\">\n"
|
||||
html << "<span class=\"cl-creator-pill__rank\">Ranked ##{idx + 1}</span>\n"
|
||||
html << "<img src=\"#{avatar_url}\" alt=\"#{e(user.username)}\" class=\"cl-creator-pill__avatar\" loading=\"lazy\">\n"
|
||||
|
||||
@@ -15,37 +15,74 @@ module CommunityLanding
|
||||
dark_bg = hex(@s.dark_bg_color) || "#06060f"
|
||||
light_bg = hex(@s.light_bg_color) || "#faf6f0"
|
||||
stat_icon = hex(@s.stat_icon_color) || accent
|
||||
about_card = hex(@s.about_card_color.presence) rescue nil
|
||||
about_bg_img = @s.about_background_image_url.presence
|
||||
app_g1 = hex(@s.app_cta_gradient_start) || accent
|
||||
app_g2 = hex(@s.app_cta_gradient_mid) || accent_hover
|
||||
app_g3 = hex(@s.app_cta_gradient_end) || accent_hover
|
||||
stat_icon_bg = hex(@s.stat_icon_bg_color.presence) rescue nil
|
||||
stat_counter = hex(@s.stat_counter_color.presence) rescue nil
|
||||
space_card_bg = hex(@s.groups_card_bg_color.presence) rescue nil
|
||||
topic_card_bg = hex(@s.topics_card_bg_color.presence) rescue nil
|
||||
video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil
|
||||
video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil
|
||||
|
||||
# Hero card bg (hex + opacity → rgba)
|
||||
hero_card_dark = hex(@s.hero_card_bg_dark.presence) rescue nil
|
||||
hero_card_light = hex(@s.hero_card_bg_light.presence) rescue nil
|
||||
hero_card_opacity = [[@s.hero_card_opacity.to_s.to_f, 0].max, 1].min rescue 0.85
|
||||
hero_card_opacity = 0.85 if hero_card_opacity == 0.0 && (@s.hero_card_opacity.to_s.strip.empty? rescue true)
|
||||
accent_rgb = hex_to_rgb(accent)
|
||||
|
||||
# Dark/light element colors
|
||||
navbar_signin_dark = safe_hex(:navbar_signin_color_dark)
|
||||
navbar_signin_light = safe_hex(:navbar_signin_color_light)
|
||||
navbar_join_dark = safe_hex(:navbar_join_color_dark)
|
||||
navbar_join_light = safe_hex(:navbar_join_color_light)
|
||||
primary_btn_dark = safe_hex(:hero_primary_btn_color_dark)
|
||||
primary_btn_light = safe_hex(:hero_primary_btn_color_light)
|
||||
secondary_btn_dark = safe_hex(:hero_secondary_btn_color_dark)
|
||||
secondary_btn_light = safe_hex(:hero_secondary_btn_color_light)
|
||||
pill_bg_dark = safe_hex(:contributors_pill_bg_dark)
|
||||
pill_bg_light = safe_hex(:contributors_pill_bg_light)
|
||||
stat_card_dark = safe_hex(:stat_card_bg_dark)
|
||||
stat_card_light = safe_hex(:stat_card_bg_light)
|
||||
about_card_dark = safe_hex(:about_card_color_dark)
|
||||
about_card_light = safe_hex(:about_card_color_light)
|
||||
topic_card_dark = safe_hex(:topics_card_bg_dark)
|
||||
topic_card_light = safe_hex(:topics_card_bg_light)
|
||||
space_card_dark = safe_hex(:groups_card_bg_dark)
|
||||
space_card_light = safe_hex(:groups_card_bg_light)
|
||||
|
||||
accent_rgb = hex_to_rgb(accent)
|
||||
stat_icon_rgb = hex_to_rgb(stat_icon)
|
||||
|
||||
stat_icon_bg_val = stat_icon_bg || "rgba(#{stat_icon_rgb}, 0.1)"
|
||||
stat_counter_val = stat_counter || "var(--cl-text-strong)"
|
||||
space_card_bg_val = space_card_bg || "var(--cl-card)"
|
||||
topic_card_bg_val = topic_card_bg || "var(--cl-card)"
|
||||
|
||||
# Hero card bg: convert hex + opacity to rgba
|
||||
hero_card_dark_rgb = hero_card_dark ? hex_to_rgb(hero_card_dark) : "12, 12, 25"
|
||||
# Hero card bg rgba
|
||||
hero_card_dark_rgb = hero_card_dark ? hex_to_rgb(hero_card_dark) : "12, 12, 25"
|
||||
hero_card_light_rgb = hero_card_light ? hex_to_rgb(hero_card_light) : "255, 255, 255"
|
||||
hero_card_dark_val = "rgba(#{hero_card_dark_rgb}, #{hero_card_opacity})"
|
||||
hero_card_dark_val = "rgba(#{hero_card_dark_rgb}, #{hero_card_opacity})"
|
||||
hero_card_light_val = "rgba(#{hero_card_light_rgb}, #{hero_card_opacity})"
|
||||
|
||||
about_card_val = about_card || "var(--cl-card)"
|
||||
about_card_css = about_bg_img ? "#{about_card_val}, url('#{about_bg_img}') center/cover no-repeat" : about_card_val
|
||||
video_btn_line = video_btn_bg ? "\n --cl-video-btn-bg: #{video_btn_bg};" : ""
|
||||
# About card with optional background image
|
||||
about_dark_val = about_card_dark || "var(--cl-card)"
|
||||
about_light_val = about_card_light || "var(--cl-card)"
|
||||
about_dark_css = about_bg_img ? "#{about_dark_val}, url('#{about_bg_img}') center/cover no-repeat" : about_dark_val
|
||||
about_light_css = about_bg_img ? "#{about_light_val}, url('#{about_bg_img}') center/cover no-repeat" : about_light_val
|
||||
|
||||
# Build optional lines (only emitted when a custom color is set)
|
||||
dark_extras = +""
|
||||
dark_extras << "\n --cl-navbar-signin-color: #{navbar_signin_dark};" if navbar_signin_dark
|
||||
dark_extras << "\n --cl-navbar-join-bg: #{navbar_join_dark};" if navbar_join_dark
|
||||
dark_extras << "\n --cl-primary-btn-bg: #{primary_btn_dark};" if primary_btn_dark
|
||||
dark_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_dark};" if secondary_btn_dark
|
||||
dark_extras << "\n --cl-pill-bg: #{pill_bg_dark};" if pill_bg_dark
|
||||
dark_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg
|
||||
|
||||
light_extras = +""
|
||||
light_extras << "\n --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark
|
||||
light_extras << "\n --cl-navbar-join-bg: #{navbar_join_light || navbar_join_dark};" if navbar_join_light || navbar_join_dark
|
||||
light_extras << "\n --cl-primary-btn-bg: #{primary_btn_light || primary_btn_dark};" if primary_btn_light || primary_btn_dark
|
||||
light_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_light || secondary_btn_dark};" if secondary_btn_light || secondary_btn_dark
|
||||
light_extras << "\n --cl-pill-bg: #{pill_bg_light || pill_bg_dark};" if pill_bg_light || pill_bg_dark
|
||||
light_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg
|
||||
|
||||
"<style>
|
||||
:root, [data-theme=\"dark\"] {
|
||||
@@ -61,11 +98,12 @@ module CommunityLanding
|
||||
--cl-stat-icon-color: #{stat_icon};
|
||||
--cl-stat-icon-bg: #{stat_icon_bg_val};
|
||||
--cl-stat-counter-color: #{stat_counter_val};
|
||||
--cl-space-card-bg: #{space_card_bg_val};
|
||||
--cl-topic-card-bg: #{topic_card_bg_val};#{video_btn_line}
|
||||
--cl-stat-card-bg: #{stat_card_dark || 'var(--cl-card)'};
|
||||
--cl-space-card-bg: #{space_card_dark || 'var(--cl-card)'};
|
||||
--cl-topic-card-bg: #{topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-hero-card-bg: #{hero_card_dark_val};
|
||||
--cl-about-card-bg: #{about_card_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});
|
||||
--cl-about-card-bg: #{about_dark_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{dark_extras}
|
||||
}
|
||||
[data-theme=\"light\"] {
|
||||
--cl-accent: #{accent};
|
||||
@@ -80,11 +118,12 @@ module CommunityLanding
|
||||
--cl-stat-icon-color: #{stat_icon};
|
||||
--cl-stat-icon-bg: #{stat_icon_bg_val};
|
||||
--cl-stat-counter-color: #{stat_counter_val};
|
||||
--cl-space-card-bg: #{space_card_bg_val};
|
||||
--cl-topic-card-bg: #{topic_card_bg_val};#{video_btn_line}
|
||||
--cl-stat-card-bg: #{stat_card_light || stat_card_dark || 'var(--cl-card)'};
|
||||
--cl-space-card-bg: #{space_card_light || space_card_dark || 'var(--cl-card)'};
|
||||
--cl-topic-card-bg: #{topic_card_light || topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-hero-card-bg: #{hero_card_light_val};
|
||||
--cl-about-card-bg: #{about_card_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});
|
||||
--cl-about-card-bg: #{about_light_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{light_extras}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme=\"dark\"]) {
|
||||
@@ -98,8 +137,11 @@ module CommunityLanding
|
||||
--cl-border-hover: rgba(#{accent_rgb}, 0.3);
|
||||
--cl-orb-1: rgba(#{accent_rgb}, 0.08);
|
||||
--cl-stat-icon-color: #{stat_icon};
|
||||
--cl-about-card-bg: #{about_card_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});
|
||||
--cl-stat-card-bg: #{stat_card_light || stat_card_dark || 'var(--cl-card)'};
|
||||
--cl-space-card-bg: #{space_card_light || space_card_dark || 'var(--cl-card)'};
|
||||
--cl-topic-card-bg: #{topic_card_light || topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-about-card-bg: #{about_light_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{light_extras}
|
||||
}
|
||||
}
|
||||
</style>\n"
|
||||
|
||||
Reference in New Issue
Block a user