From 8cfcafe93bfa55401351ce778b6a360c98187abb Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Tue, 17 Dec 2024 17:12:06 +0200 Subject: [PATCH] refactor: onboarding notice --- inc/core/admin.php | 203 +++++++++++++++++++++++---------------------- 1 file changed, 105 insertions(+), 98 deletions(-) diff --git a/inc/core/admin.php b/inc/core/admin.php index e8b9d72539..dca0b05878 100644 --- a/inc/core/admin.php +++ b/inc/core/admin.php @@ -477,27 +477,15 @@ public function welcome_notice_content() { $theme_page = ! empty( $template ) ? $template . '-welcome' : $slug . '-welcome'; $notice_template = ' +
- %1$s -
%2$s
%3$s
-
%4$s
- '; - - /* translators: 1 - notice title, 2 - notice message */ - $notice_header = sprintf( - '

%1$s

%2$s

', - esc_html__( 'Congratulations!', 'neve' ), - sprintf( - /* translators: %s - theme name */ - esc_html__( '%s is now installed and ready to use. We\'ve assembled some links to get you started.', 'neve' ), - $name - ) - ); + '; + $ob_btn_link = admin_url( 'admin.php?page=' . $theme_page . '&onboarding=yes#starter-sites' ); if ( defined( 'TIOB_PATH' ) ) { $url_path = 'admin.php?page=tiob-starter-sites'; @@ -506,64 +494,68 @@ public function welcome_notice_content() { } $ob_btn_link = admin_url( $url_path ); } - $ob_btn = sprintf( - /* translators: 1 - onboarding url, 2 - button text */ + + $onboarding_starter_sites_btn = sprintf( '%2$s', esc_url( $ob_btn_link ), - sprintf( apply_filters( 'ti_onboarding_neve_start_site_cta', esc_html__( 'Try one of our ready to use Starter Sites', 'neve' ) ) ) + sprintf( apply_filters( 'ti_onboarding_neve_start_site_cta', esc_html__( 'Explore Templates and Start Building Now!', 'neve' ) ) ) ); - $ob_return_dashboard = sprintf( - /* translators: 1 - button text */ - '%1$s', - __( 'Return to your dashboard', 'neve' ) + + $onboarding_notice_exit_btn = sprintf( + ' + %2$s + ', + esc_url( admin_url( '?page=neve-welcome' ) ), + __( 'I want to build this website from scratch', 'neve' ) ); - $options_page_btn = sprintf( - /* translators: 1 - options page url, 2 - button text */ - '%2$s', - esc_url( admin_url( 'admin.php?page=' . $theme_page ) ), - esc_html__( 'or go to the theme settings', 'neve' ) + + $onboarding_thank_you_label = sprintf( + // translators: %s: the name of the theme (Neve Theme). + __( 'Thanks for downloading %s', 'neve' ), + __( 'Neve Theme', 'neve' ) + ) . ' 🎉'; + $onboarding_title_label = __( 'Create a Unique Site, Your Way', 'neve' ); + $onboarding_dashboard_label = __( 'Building your site shouldn\'t feel overwhelming. Choose a starter site, make it your own, and launch your website faster than ever before.', 'neve' ); + + $notice_starter_sites_container = sprintf( + ' + %1$s +

%2$s

+

%3$s +

+ %4$s + %5$s +
+ ', + $onboarding_thank_you_label, + $onboarding_title_label, + $onboarding_dashboard_label, + $onboarding_starter_sites_btn, + $onboarding_notice_exit_btn ); - $notice_picture = sprintf( - ' - - - ', + + $notice_picture = sprintf( + '', esc_url( $this->get_notice_picture() ) ); - $notice_sites_list = sprintf( - '

%1$s

%2$s

%3$s

%4$s

%5$s

', - __( 'Sites Library', 'neve' ), - // translators: %s - Theme name - sprintf( esc_html__( '%s now comes with a sites library with various designs to pick from. Visit our collection of demos that are constantly being added.', 'neve' ), $name ), - esc_html( __( 'Install the template patterns plugin to get started.', 'neve' ) ), - $ob_btn, - $options_page_btn - ); - $notice_documentation = sprintf( - '

%1$s

%2$s

%4$s%5$s

%6$s

', - __( 'Documentation', 'neve' ), - // translators: %s - Theme name - sprintf( esc_html__( 'Need more details? Please check our full documentation for detailed information on how to use %s.', 'neve' ), $name ), - 'https://docs.themeisle.com/article/946-neve-doc', - esc_html__( '(opens in a new tab)', 'neve' ), - esc_html__( 'Read full documentation', 'neve' ), - $ob_return_dashboard - ); + $style = ' - .nv-notice-wrapper h2{ + .nv-notice-wrapper .nv-notice-title { + font-size: 23px; + font-weight: bold; + line-height: 1.5; margin: 0; - font-size: 21px; - font-weight: 400; - line-height: 1.2; + padding: 9px 0 4px; } .nv-notice-wrapper p.about-description{ color: #72777c; - font-size: 16px; - margin: 0; - padding:0px; + font-size: 15px; + margin: 2px 0 5px; + padding: 0 2px; + line-height: 1.6; } .nv-notice-wrapper{ - padding: 23px 10px 0; + padding: 23px 10px; max-width: 1500px; } .nv-notice-wrapper hr { @@ -581,56 +573,69 @@ public function welcome_notice_content() { } .nv-notice-text p.ti-return-dashboard { margin-top: 30px; - } - .nv-notice-column-container .nv-notice-column{ - padding-right: 40px; } - .nv-notice-column-container img{ - margin-top: 23px; - width: calc(100% - 40px); + .nv-notice-column-container img { border: 1px solid #f3f4f5; + max-height: 300px; + width: fit-content; } .nv-notice-column-container { - display: -ms-grid; - display: grid; - -ms-grid-columns: 24% 32% 32%; - grid-template-columns: 24% 32% 32%; - margin-bottom: 13px; + display: flex; + flex-direction: row; + gap: 48px; } - .nv-notice-column-container .button.button-hero:is( .button-primary, .button-secondary ) { + .nv-notice-column-container .button.button-hero:is( .button-primary, .button-link ) { margin: 0px; white-space: normal; text-align: center; line-height: 1.2; padding: 12px 36px; } - .nv-notice-column-container .nv-notice-column:not(.nv-notice-image) { - display: -ms-grid; - display: grid; - -ms-grid-rows: auto 100px; - grid-template-rows: auto 100px; + .nv-notice-column-container .button.button-hero:is( .button-primary ) { + background-color: rgb(69, 89, 217); } - @media screen and (max-width: 1280px) { - .nv-notice-wrapper .nv-notice-column-container { - -ms-grid-columns: 50% 50%; - grid-template-columns: 50% 50%; - } - .nv-notice-column-container a.button.button-hero.button-secondary, - .nv-notice-column-container a.button.button-hero.button-primary{ - padding:6px 18px; + .nv-notice-column-container .button.button-hero:is( .button-link ) { + padding: 12px 7px; + color: #72777c; + text-decoration: none; + } + .nv-notice-column-container .nv-notice-column { + display: flex; + flex-direction: column; + justify-content: center; + } + .nv-notice-actions { + display: flex; + flex-direction: row; + gap: 10px; + margin-top: 20px; + } + .nv-notice-starter-sites { + max-width: 750px; + } + .nv-notice-thank-you { + color:#3b5de6; + font-size:14px; + font-style:normal; + font-weight:400; + margin: 0; + padding: 9px 0 4px; + } + @media (max-width: 1200px) { + .nv-notice-column-container { + flex-direction: column-reverse; + gap: 10px; + text-align: center; + align-items: center; } - .nv-notice-wrapper .nv-notice-image { - display: none; + .nv-notice-column-container .nv-notice-column { + align-items: center; } } - @media screen and (max-width: 870px) { - - .nv-notice-wrapper .nv-notice-column-container { - -ms-grid-columns: 100%; - grid-template-columns: 100%; - } - .nv-notice-column-container a.button.button-hero.button-primary{ - padding:12px 36px; + @media (max-width: 480px) { + .nv-notice-actions { + flex-direction: column; + align-items: center; } } @-webkit-keyframes spin { @@ -651,15 +656,17 @@ public function welcome_notice_content() { animation-iteration-count: infinite; animation-timing-function: linear; } + .notice:has(.nv-notice-thank-you) { + border-left-width: 2px; + border-left-color: #c3c4c7; + } '; echo sprintf( $notice_template, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - $notice_header, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + $style, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped $notice_picture, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - $notice_sites_list, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - $notice_documentation, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - $style // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + $notice_starter_sites_container // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ); }