diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js index ee99b9a0111..42291f33136 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js @@ -28,7 +28,14 @@ export default class HomepagePreview extends PreviewBaseComponent { if (homepageStyle === "latest" || homepageStyle === "hot") { this.drawPills(colors, font, height * 0.15, { homepageStyle }); - this.renderNonCategoryHomepage(ctx, colors, font, width, height); + this.renderNonCategoryHomepage( + ctx, + colors, + font, + width, + height, + homepageStyle + ); } else if ( ["categories_only", "categories_with_featured_topics"].includes( homepageStyle @@ -352,6 +359,15 @@ export default class HomepagePreview extends PreviewBaseComponent { ]; } + getHotTitles() { + return [ + i18n("wizard.homepage_preview.topic_titles.what_hobbies"), + i18n("wizard.homepage_preview.topic_titles.what_music"), + i18n("wizard.homepage_preview.topic_titles.funniest_thing"), + i18n("wizard.homepage_preview.topic_titles.share_art"), + ]; + } + getDescriptions() { return [ i18n("wizard.homepage_preview.category_descriptions.icebreakers"), @@ -360,7 +376,7 @@ export default class HomepagePreview extends PreviewBaseComponent { ]; } - renderNonCategoryHomepage(ctx, colors, font, width, height) { + renderNonCategoryHomepage(ctx, colors, font, width, height, homepageStyle) { const rowHeight = height / 6.6; // accounts for hard-set color variables in solarized themes const textColor = @@ -418,7 +434,10 @@ export default class HomepagePreview extends PreviewBaseComponent { ctx.font = `${bodyFontSize}em '${font}'`; ctx.lineWidth = 1; - this.getTitles().forEach((title) => { + + const titles = + homepageStyle === "hot" ? this.getHotTitles() : this.getTitles(); + titles.forEach((title) => { const textPos = y + rowHeight * 0.4; ctx.fillStyle = colors.primary; ctx.fillText(title, cols[0], textPos); @@ -448,10 +467,18 @@ export default class HomepagePreview extends PreviewBaseComponent { ctx.fillStyle = textColor; ctx.font = `${bodyFontSize}em '${font}'`; - for (let j = 2; j <= 4; j++) { + for (let colIndex = 2; colIndex <= 4; colIndex++) { + // Give Hot a higher range of random values to make it look like + // more activity is happening. + const randomValue = + homepageStyle === "hot" + ? Math.floor(Math.random() * (660 - 220) + 220) + 10 + : Math.floor(Math.random() * 90) + 10; + ctx.fillText( - j === 4 ? "1h" : Math.floor(Math.random() * 90) + 10, - cols[j] + margin, + // Last column is relative activity time, others are random numbers. + colIndex === 4 ? "1h" : randomValue, + cols[colIndex] + margin, y + rowHeight * 0.6 ); } diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index d17f58f6bbf..ca6268fd7dd 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -109,6 +109,10 @@ body.wizard { &.styling { max-width: 100%; width: auto; + + @include breakpoint("mobile-extra-large") { + width: 95%; + } } } @@ -201,7 +205,7 @@ body.wizard { margin-right: 1em; @media only screen and (max-width: 925px) { - width: 80%; + width: 100%; margin-left: auto; margin-right: auto; } @@ -297,6 +301,10 @@ body.wizard { &__step-contents { min-height: 37em; margin-bottom: 2em; + + @include breakpoint("mobile-extra-large") { + min-height: 30em; + } } &__step-form { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 96f003853ae..7669c68fc55 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -7515,6 +7515,10 @@ en: what_movies: "What movies have you seen recently?" random_fact: "Random fact of the day" tv_show: "Recommend a TV show" + what_hobbies: "What are your hobbies?" + what_music: "What are you listening to right now?" + funniest_thing: "Funniest thing you've seen today" + share_art: "Share your art!" topic_ops: what_books: | We all love to read, let's use this topic to share our diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb index 4c2600aac48..7800f479c15 100644 --- a/lib/wizard/builder.rb +++ b/lib/wizard/builder.rb @@ -219,10 +219,11 @@ class Wizard updater.update_setting(:heading_font, updater.fields[:heading_font]) top_menu = SiteSetting.top_menu_map - if %w[latest hot].include?(updater.fields[:homepage_style]) && - top_menu.first != updater.fields[:homepage_style] - top_menu.delete(updater.fields[:homepage_style]) - top_menu.insert(0, updater.fields[:homepage_style]) + if %w[latest hot].include?(updater.fields[:homepage_style]) + if top_menu.first != updater.fields[:homepage_style] + top_menu.delete(updater.fields[:homepage_style]) + top_menu.insert(0, updater.fields[:homepage_style]) + end elsif updater.fields[:homepage_style] != "latest" top_menu.delete("categories") top_menu.insert(0, "categories") diff --git a/spec/lib/wizard/step_updater_spec.rb b/spec/lib/wizard/step_updater_spec.rb index 639f3605d2c..31dd897fb48 100644 --- a/spec/lib/wizard/step_updater_spec.rb +++ b/spec/lib/wizard/step_updater_spec.rb @@ -299,6 +299,43 @@ RSpec.describe Wizard::StepUpdater do expect(SiteSetting.desktop_category_page_style).to eq("subcategories_with_featured_topics") end + it "updates top_menu if it doesn't match the new homepage_style and does nothing if it matches" do + SiteSetting.top_menu = "categories|new|latest" + + updater = + wizard.create_updater( + "styling", + body_font: "arial", + heading_font: "arial", + homepage_style: "hot", + ) + updater.update + expect(updater).to be_success + expect(SiteSetting.top_menu).to eq("hot|categories|new|latest") + + updater = + wizard.create_updater( + "styling", + body_font: "arial", + heading_font: "arial", + homepage_style: "hot", + ) + updater.update + expect(updater).to be_success + expect(SiteSetting.top_menu).to eq("hot|categories|new|latest") + + updater = + wizard.create_updater( + "styling", + body_font: "arial", + heading_font: "arial", + homepage_style: "latest", + ) + updater.update + expect(updater).to be_success + expect(SiteSetting.top_menu).to eq("latest|hot|categories|new") + end + it "does not overwrite top_menu site setting" do SiteSetting.top_menu = "latest|unread|unseen|categories" updater =