Skip to content

Commit 07f2122

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
committed
refactor: onboarding notice
1 parent e4c9da9 commit 07f2122

File tree

1 file changed

+105
-98
lines changed

1 file changed

+105
-98
lines changed

‎inc/core/admin.php

Lines changed: 105 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -477,27 +477,15 @@ public function welcome_notice_content() {
477477
$theme_page = ! empty( $template ) ? $template . '-welcome' : $slug . '-welcome';
478478

479479
$notice_template = '
480+
<style>%1$s</style>
480481
<div class="nv-notice-wrapper">
481-
%1$s
482-
<hr/>
483482
<div class="nv-notice-column-container">
484483
<div class="nv-notice-column nv-notice-image">%2$s</div>
485484
<div class="nv-notice-column nv-notice-starter-sites">%3$s</div>
486-
<div class="nv-notice-column nv-notice-documentation">%4$s</div>
487485
</div>
488486
</div>
489-
<style>%5$s</style>';
490-
491-
/* translators: 1 - notice title, 2 - notice message */
492-
$notice_header = sprintf(
493-
'<h2>%1$s</h2><p class="about-description">%2$s</p></hr>',
494-
esc_html__( 'Congratulations!', 'neve' ),
495-
sprintf(
496-
/* translators: %s - theme name */
497-
esc_html__( '%s is now installed and ready to use. We\'ve assembled some links to get you started.', 'neve' ),
498-
$name
499-
)
500-
);
487+
';
488+
501489
$ob_btn_link = admin_url( 'admin.php?page=' . $theme_page . '&onboarding=yes#starter-sites' );
502490
if ( defined( 'TIOB_PATH' ) ) {
503491
$url_path = 'admin.php?page=tiob-starter-sites';
@@ -506,64 +494,68 @@ public function welcome_notice_content() {
506494
}
507495
$ob_btn_link = admin_url( $url_path );
508496
}
509-
$ob_btn = sprintf(
510-
/* translators: 1 - onboarding url, 2 - button text */
497+
498+
$onboarding_starter_sites_btn = sprintf(
511499
'<a href="%1$s" class="button button-primary button-hero install-now" >%2$s</a>',
512500
esc_url( $ob_btn_link ),
513-
sprintf( apply_filters( 'ti_onboarding_neve_start_site_cta', esc_html__( 'Try one of our ready to use Starter Sites', 'neve' ) ) )
501+
sprintf( apply_filters( 'ti_onboarding_neve_start_site_cta', esc_html__( 'Explore Templates and Start Building Now!', 'neve' ) ) )
514502
);
515-
$ob_return_dashboard = sprintf(
516-
/* translators: 1 - button text */
517-
'<a href="' . esc_url( admin_url() ) . '" class=" ti-return-dashboard button button-secondary button-hero install-now" ><span>%1$s</span></a>',
518-
__( 'Return to your dashboard', 'neve' )
503+
504+
$onboarding_notice_exit_btn = sprintf(
505+
'<a href="%1$s" class=" ti-return-dashboard button button-link button-hero install-now" >
506+
<span>%2$s</span>
507+
</a>',
508+
esc_url( admin_url( '?page=neve-welcome' ) ),
509+
__( 'I want to build this website from scratch', 'neve' )
519510
);
520-
$options_page_btn = sprintf(
521-
/* translators: 1 - options page url, 2 - button text */
522-
'<a href="%1$s" class="options-page-btn">%2$s</a>',
523-
esc_url( admin_url( 'admin.php?page=' . $theme_page ) ),
524-
esc_html__( 'or go to the theme settings', 'neve' )
511+
512+
$onboarding_thank_you_label = sprintf(
513+
// translators: %s: the name of the theme (Neve Theme).
514+
__( 'Thanks for downloading %s', 'neve' ),
515+
__( 'Neve Theme', 'neve' )
516+
) . ' 🎉';
517+
$onboarding_title_label = __( 'Create a Unique Site, Your Way', 'neve' );
518+
$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' );
519+
520+
$notice_starter_sites_container = sprintf(
521+
'
522+
<span class="nv-notice-thank-you">%1$s</span>
523+
<h2 class="nv-notice-title">%2$s</h2>
524+
<p class="about-description">%3$s</h3>
525+
<div class="nv-notice-actions">
526+
%4$s
527+
%5$s
528+
</div>
529+
',
530+
$onboarding_thank_you_label,
531+
$onboarding_title_label,
532+
$onboarding_dashboard_label,
533+
$onboarding_starter_sites_btn,
534+
$onboarding_notice_exit_btn
525535
);
526-
$notice_picture = sprintf(
527-
'<picture>
528-
<source srcset="about:blank" media="(max-width: 1024px)">
529-
<img src="%1$s"/>
530-
</picture>',
536+
537+
$notice_picture = sprintf(
538+
'<img src="%1$s"/>',
531539
esc_url( $this->get_notice_picture() )
532540
);
533-
$notice_sites_list = sprintf(
534-
'<div><h3><span class="dashicons dashicons-images-alt2"></span> %1$s</h3><p>%2$s</p><p>%3$s</p></div><div> <p id="neve-ss-install">%4$s</p><p>%5$s</p> </div>',
535-
__( 'Sites Library', 'neve' ),
536-
// translators: %s - Theme name
537-
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 ),
538-
esc_html( __( 'Install the template patterns plugin to get started.', 'neve' ) ),
539-
$ob_btn,
540-
$options_page_btn
541-
);
542-
$notice_documentation = sprintf(
543-
'<div><h3><span class="dashicons dashicons-format-aside"></span> %1$s</h3><p>%2$s</p><a target="_blank" rel="external noopener noreferrer" href="%3$s"><span class="screen-reader-text">%4$s</span><svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" viewBox="0 0 512 512" width="12" height="12" style="margin-right: 5px;"><path fill="currentColor" d="M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.4 0-32 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z"/></svg>%5$s</a></div><div> <p>%6$s</p></div>',
544-
__( 'Documentation', 'neve' ),
545-
// translators: %s - Theme name
546-
sprintf( esc_html__( 'Need more details? Please check our full documentation for detailed information on how to use %s.', 'neve' ), $name ),
547-
'https://docs.themeisle.com/article/946-neve-doc',
548-
esc_html__( '(opens in a new tab)', 'neve' ),
549-
esc_html__( 'Read full documentation', 'neve' ),
550-
$ob_return_dashboard
551-
);
541+
552542
$style = '
553-
.nv-notice-wrapper h2{
543+
.nv-notice-wrapper .nv-notice-title {
544+
font-size: 23px;
545+
font-weight: bold;
546+
line-height: 1.5;
554547
margin: 0;
555-
font-size: 21px;
556-
font-weight: 400;
557-
line-height: 1.2;
548+
padding: 9px 0 4px;
558549
}
559550
.nv-notice-wrapper p.about-description{
560551
color: #72777c;
561-
font-size: 16px;
562-
margin: 0;
563-
padding:0px;
552+
font-size: 15px;
553+
margin: 2px 0 5px;
554+
padding: 0 2px;
555+
line-height: 1.6;
564556
}
565557
.nv-notice-wrapper{
566-
padding: 23px 10px 0;
558+
padding: 23px 10px;
567559
max-width: 1500px;
568560
}
569561
.nv-notice-wrapper hr {
@@ -581,56 +573,69 @@ public function welcome_notice_content() {
581573
}
582574
.nv-notice-text p.ti-return-dashboard {
583575
margin-top: 30px;
584-
}
585-
.nv-notice-column-container .nv-notice-column{
586-
padding-right: 40px;
587576
}
588-
.nv-notice-column-container img{
589-
margin-top: 23px;
590-
width: calc(100% - 40px);
577+
.nv-notice-column-container img {
591578
border: 1px solid #f3f4f5;
579+
max-height: 300px;
580+
width: fit-content;
592581
}
593582
.nv-notice-column-container {
594-
display: -ms-grid;
595-
display: grid;
596-
-ms-grid-columns: 24% 32% 32%;
597-
grid-template-columns: 24% 32% 32%;
598-
margin-bottom: 13px;
583+
display: flex;
584+
flex-direction: row;
585+
gap: 48px;
599586
}
600-
.nv-notice-column-container .button.button-hero:is( .button-primary, .button-secondary ) {
587+
.nv-notice-column-container .button.button-hero:is( .button-primary, .button-link ) {
601588
margin: 0px;
602589
white-space: normal;
603590
text-align: center;
604591
line-height: 1.2;
605592
padding: 12px 36px;
606593
}
607-
.nv-notice-column-container .nv-notice-column:not(.nv-notice-image) {
608-
display: -ms-grid;
609-
display: grid;
610-
-ms-grid-rows: auto 100px;
611-
grid-template-rows: auto 100px;
594+
.nv-notice-column-container .button.button-hero:is( .button-primary ) {
595+
background-color: rgb(69, 89, 217);
612596
}
613-
@media screen and (max-width: 1280px) {
614-
.nv-notice-wrapper .nv-notice-column-container {
615-
-ms-grid-columns: 50% 50%;
616-
grid-template-columns: 50% 50%;
617-
}
618-
.nv-notice-column-container a.button.button-hero.button-secondary,
619-
.nv-notice-column-container a.button.button-hero.button-primary{
620-
padding:6px 18px;
597+
.nv-notice-column-container .button.button-hero:is( .button-link ) {
598+
padding: 12px 7px;
599+
color: #72777c;
600+
text-decoration: none;
601+
}
602+
.nv-notice-column-container .nv-notice-column {
603+
display: flex;
604+
flex-direction: column;
605+
justify-content: center;
606+
}
607+
.nv-notice-actions {
608+
display: flex;
609+
flex-direction: row;
610+
gap: 10px;
611+
margin-top: 20px;
612+
}
613+
.nv-notice-starter-sites {
614+
max-width: 750px;
615+
}
616+
.nv-notice-thank-you {
617+
color:#3b5de6;
618+
font-size:14px;
619+
font-style:normal;
620+
font-weight:400;
621+
margin: 0;
622+
padding: 9px 0 4px;
623+
}
624+
@media (max-width: 1200px) {
625+
.nv-notice-column-container {
626+
flex-direction: column-reverse;
627+
gap: 10px;
628+
text-align: center;
629+
align-items: center;
621630
}
622-
.nv-notice-wrapper .nv-notice-image {
623-
display: none;
631+
.nv-notice-column-container .nv-notice-column {
632+
align-items: center;
624633
}
625634
}
626-
@media screen and (max-width: 870px) {
627-
628-
.nv-notice-wrapper .nv-notice-column-container {
629-
-ms-grid-columns: 100%;
630-
grid-template-columns: 100%;
631-
}
632-
.nv-notice-column-container a.button.button-hero.button-primary{
633-
padding:12px 36px;
635+
@media (max-width: 480px) {
636+
.nv-notice-actions {
637+
flex-direction: column;
638+
align-items: center;
634639
}
635640
}
636641
@-webkit-keyframes spin {
@@ -651,15 +656,17 @@ public function welcome_notice_content() {
651656
animation-iteration-count: infinite;
652657
animation-timing-function: linear;
653658
}
659+
.notice:has(.nv-notice-thank-you) {
660+
border-left-width: 2px;
661+
border-left-color: #c3c4c7;
662+
}
654663
';
655664

656665
echo sprintf(
657666
$notice_template, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
658-
$notice_header, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
667+
$style, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
659668
$notice_picture, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
660-
$notice_sites_list, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
661-
$notice_documentation, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
662-
$style // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
669+
$notice_starter_sites_container // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
663670
);
664671
}
665672

0 commit comments

Comments
 (0)