Skip to content

Commit c03c4d1

Browse files
selulselul
authored
Merge pull request #887 from Codeinwp/design/pro/314
Improve upsell section design
2 parents fa25c52 + 201b923 commit c03c4d1

File tree

4 files changed

+212
-56
lines changed

4 files changed

+212
-56
lines changed

‎classes/Visualizer/Module/Admin.php

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,11 +686,53 @@ public function registerAdminMenu() {
686686
'viz-support',
687687
array( $this, 'renderSupportPage' )
688688
);
689+
690+
if ( ! Visualizer_Module::is_pro() ) {
691+
add_submenu_page(
692+
Visualizer_Plugin::NAME,
693+
__( 'Get Visualizer Pro', 'visualizer' ),
694+
__( 'Get Visualizer Pro', 'visualizer' ),
695+
'edit_posts',
696+
'viz-get-pro',
697+
'__return_null'
698+
);
699+
add_action( 'admin_footer', array( $this, 'handleGetProSubMenu' ) );
700+
}
689701
remove_submenu_page( Visualizer_Plugin::NAME, Visualizer_Plugin::NAME );
690702

691703
add_action( "load-{$this->_libraryPage}", array( $this, 'addScreenOptions' ) );
692704
}
693705

706+
/**
707+
* Handle get pro plugin submenu.
708+
*/
709+
public function handleGetProSubMenu() {
710+
?>
711+
<style type="text/css">
712+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li {
713+
background: #FF7E65;
714+
font-size: 14px;
715+
font-weight: 600;
716+
color: #fff;
717+
}
718+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li > a {
719+
color: #fff !important;
720+
}
721+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li > a:hover {
722+
box-shadow: inherit;
723+
}
724+
</style>
725+
<script type="text/javascript">
726+
jQuery( document ).ready( function() {
727+
jQuery( '#toplevel_page_visualizer' ).on( 'click', 'li:not(.wp-submenu-head, .wp-first-item):eq(2)', function( e ) {
728+
e.preventDefault();
729+
window.open( 'https://themeisle.com/plugins/visualizer-charts-and-graphs/upgrade/#pricing', '_blank' );
730+
} );
731+
} );
732+
</script>
733+
<?php
734+
}
735+
694736
/**
695737
* Adds the screen options for pagination.
696738
*/

‎classes/Visualizer/Render/Library.php

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -223,17 +223,21 @@ private function _renderLibrary() {
223223
// Added by Ash/Upwork
224224
echo $this->custom_css;
225225
echo '<div id="visualizer-types" class="visualizer-clearfix">';
226+
echo '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="list-icon" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM7.385 12.66H6.045L2.805 8.12L4.146 6.87L6.715 9.27L11.856 3.339L13.196 4.279L7.385 12.66Z"/></symbol></svg>';
226227
$this->getDisplayForm();
227228
echo '</div>';
228229
echo '<div id="visualizer-content-wrapper">';
229230
if ( ! empty( $this->charts ) ) {
230231
echo '<div id="visualizer-library" class="visualizer-clearfix">';
231232
$count = 0;
232233
foreach ( $this->charts as $placeholder_id => $chart ) {
233-
$this->_renderChartBox( $placeholder_id, $chart['id'] );
234234
// show the sidebar after the first 3 charts.
235-
if ( $count++ === 2 ) {
235+
$count++;
236+
if ( 3 === $count ) {
236237
$this->_renderSidebar();
238+
$this->_renderChartBox( $placeholder_id, $chart['id'] );
239+
} else {
240+
$this->_renderChartBox( $placeholder_id, $chart['id'] );
237241
}
238242
}
239243
// show the sidebar if there are less than 3 charts.
@@ -243,7 +247,7 @@ private function _renderLibrary() {
243247
echo '</div>';
244248
} else {
245249
echo '<div id="visualizer-library" class="visualizer-clearfix">';
246-
echo '<div class="visualizer-chart">';
250+
echo '<div class="items"><div class="visualizer-chart">';
247251
echo '<div class="visualizer-chart-canvas visualizer-nochart-canvas">';
248252
echo '<div class="visualizer-notfound">', esc_html__( 'No charts found', 'visualizer' ), '<p><h2><a href="javascript:;" class="add-new-h2 add-new-chart">', esc_html__( 'Add New', 'visualizer' ), '</a></h2></p></div>';
249253
echo '</div>';
@@ -254,7 +258,7 @@ private function _renderLibrary() {
254258
echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>';
255259
echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>';
256260
echo '</div>';
257-
echo '</div>';
261+
echo '</div></div>';
258262
$this->_renderSidebar();
259263
echo '</div>';
260264
}
@@ -325,7 +329,7 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
325329
$chart_status['title'] = __( 'Click to view the error', 'visualizer' );
326330
}
327331
$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
328-
echo '<div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
332+
echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
329333
echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
330334
echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
331335
echo '</div>';
@@ -341,36 +345,38 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
341345
echo '<span>&nbsp;</span>';
342346
echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
343347
echo '</div>';
344-
echo '</div>';
348+
echo '</div></div>';
345349
}
346350

347351
/**
348-
* Render sidebar.
352+
* Render 2-col sidebar
349353
*/
350354
private function _renderSidebar() {
351355
if ( ! Visualizer_Module::is_pro() ) {
352-
echo '<div id="visualizer-sidebar">';
356+
echo '<div class="items">';
357+
echo '<div class="viz-pro">';
358+
echo '<div id="visualizer-sidebar" class="one-columns">';
353359
echo '<div class="visualizer-sidebar-box">';
354360
echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
355-
echo '<li>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
356-
echo '<li>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
357-
echo '<li>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
358-
echo '<li>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
359-
echo '<li>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
360-
echo '<li>' . __( 'Private charts', 'visualizer' ) . '</li>';
361-
echo '<li>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li>';
362361
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
363-
echo '<li>' . __( '6 more chart types', 'visualizer' ) . '</ul>';
362+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' ) . '</ul>';
364363
} else {
365-
echo '<li>' . __( '11 more chart types', 'visualizer' ) . '</li>';
366-
echo '<li>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
367-
echo '<li>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
368-
echo '<li>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
369-
echo '<li>' . __( 'Frontend Actions(Print Chart, Export to CSV, Export to Excel, Copy, Download Chart Image)', 'visualizer' ) . '</li></ul>';
364+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
365+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
366+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
367+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
368+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
370369
}
371-
echo '<p><a href="' . Visualizer_Plugin::PRO_TEASER_URL . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>';
372-
echo '<p style="background-color: #0073aac7; color: #ffffff; padding: 2px; font-weight: bold;">' . __( 'We offer a 30-day no-questions-asked money back guarantee!', 'visualizer' ) . '</p>';
373-
echo '<p><a href="' . VISUALIZER_SURVEY . '" target="_blank" class="">' . __( 'Don\'t see the features you need? Help us improve!', 'visualizer' ) . '</a></p>';
370+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
371+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
372+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
373+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
374+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
375+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
376+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
377+
echo '<p><a href="' . str_replace( '#pricing', '#features', Visualizer_Plugin::PRO_TEASER_URL ) . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>';
378+
echo '</div>';
379+
echo '</div>';
374380
echo '</div>';
375381
echo '</div>';
376382
}

‎css/library.css

Lines changed: 132 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
}
7+
18
#visualizer-icon {
29
background-image: url("../images/icon.png");
310
}
@@ -24,11 +31,19 @@
2431
.visualizer-list-item .visualizer-pro-only {
2532
text-decoration: line-through;
2633
}
27-
34+
#visualizer-content-wrapper {
35+
padding: 0;
36+
}
2837
#visualizer-library {
29-
display: table-cell;
3038
width: auto;
31-
margin: 20px 0;
39+
margin: 20px -10px;
40+
display: flex;
41+
flex-wrap: wrap;
42+
}
43+
44+
#visualizer-library.visualizer-clearfix:before,
45+
#visualizer-library.visualizer-clearfix:after {
46+
display: none;
3247
}
3348

3449
#visualizer-content-wrapper {
@@ -42,11 +57,13 @@
4257
margin-top: -16px;
4358
margin-left: -16px;
4459
}
60+
#visualizer-library .items {
61+
padding: 0 10px;
62+
width: 33.3333%;
63+
}
4564

4665
.visualizer-chart {
47-
display: none;
48-
float: left;
49-
margin: 0 24px 24px 0;
66+
margin: 0 0px 24px 0;
5067
padding: 5px;
5168
border: 1px solid #ddd;
5269
background-color: #efefef;
@@ -131,6 +148,7 @@
131148

132149
.visualizer-chart-footer {
133150
margin-top: 4px;
151+
width: 100%;
134152
}
135153

136154
.visualizer-chart-shortcode {
@@ -163,36 +181,86 @@
163181
text-align: right;
164182
}
165183

166-
#visualizer-sidebar {
167-
clear: both;
168-
margin: 20px 0px;
169-
width: 96%;
184+
.visualizer-sidebar-box {
185+
display: block;
186+
padding: 30px 34px;
187+
background: white;
170188
}
171189

172-
.visualizer-sidebar-box ul li {
173-
margin: 4px 0;
174-
color: #23282d;
175-
float: left;
176-
width: 25%;
190+
.visualizer-sidebar-box h3{
191+
padding: 0;
192+
margin: 0 0 20px;
193+
display: block;
194+
width: 100%;
195+
font-size: 24px;
196+
font-weight: 600;
197+
line-height: 1.3;
177198
}
178199

179200
.visualizer-sidebar-box ul {
180-
margin-left: 40px;
181-
text-align: left;
182-
list-style-type: disc;
201+
padding: 0;
202+
margin: 0;
203+
list-style: none;
204+
display: flex;
205+
flex-wrap: wrap;
183206
}
184207

185-
.visualizer-sidebar-box {
186-
display: block;
187-
padding-top: 10px;
188-
padding-bottom: 15px;
189-
border-top: 5px solid #0073aa;
190-
border-bottom: 5px solid #0073aa;
191-
color: #0073aa;
192-
background: white;
193-
text-align: center;
208+
.visualizer-sidebar-box ul li {
209+
color: #000;
210+
list-style: none;
211+
padding: 0;
212+
margin: 0;
213+
font-size: 16px;
214+
line-height: 1.8;
215+
position: relative;
216+
padding-left: 26px;
217+
}
218+
219+
.visualizer-sidebar-box ul li .icon{
220+
color: #00AA63;
221+
width: 16px;
222+
height: 16px;
223+
margin-top: 3px;
224+
position: absolute;
225+
left: 0;
226+
top: 3px;
227+
}
228+
.visualizer-sidebar-box .button {
229+
width: 155px;
230+
height: 39px;
231+
background: #007CBA;
232+
border-radius: 4px;
233+
display: flex;
234+
align-items: center;
235+
text-align: center;
236+
color: #FFFFFF;
237+
justify-content: center;
238+
}
239+
.visualizer-sidebar-box .we-offer{
240+
background-color: transparent;
241+
color: #007CBA;
242+
font-weight: 400;
243+
padding: 0px;
244+
font-size: 14px;
245+
font-style: italic;
246+
margin-bottom: 0;
247+
}
248+
.visualizer-sidebar-box .help-us-improve{
249+
display: none;
250+
}
251+
.visualizer-chart.viz-pro {
252+
padding: 0;
253+
}
254+
.two-col .viz-pro .two-columns{
255+
padding: 0;
256+
border: 1px solid #DDDDDD;
257+
border: 5px solid #007CBA;
258+
}
259+
#visualizer-library .items.two-col {
260+
width: 66.6666%;
194261
}
195262

263+
196264
/* The switch - the box around the slider */
197265
.visualizer-switch {
198266
display: inline-block;
@@ -286,13 +354,20 @@ input:checked + .visualizer-slider:before {
286354
margin-top: 0;
287355
}
288356

357+
#visualizer-sidebar.two-columns .visualizer-sidebar-box ul li {
358+
width: calc(50% - 26px)
359+
}
360+
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li {
361+
width: 100%;
362+
}
363+
#visualizer-sidebar.one-columns .visualizer-sidebar-box p {
364+
margin-top: 8px;
365+
}
289366
#visualizer-sidebar .visualizer-sidebar-box p {
290367
margin-bottom: 0;
291368
}
292-
293-
#visualizer-sidebar .visualizer-sidebar-box {
294-
padding-top: 20px;
295-
padding-bottom: 20px;
369+
#visualizer-sidebar.one-columns {
370+
border-top: 5px solid #007CBA;
296371
}
297372

298373
.visualizer-chart-title {
@@ -349,3 +424,29 @@ div#visualizer-types ul, div#visualizer-types form p {
349424
color: red;
350425
cursor: pointer;
351426
}
427+
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px) and (max-width: 1600px) {
428+
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
429+
display: none;
430+
}
431+
}
432+
@media (max-width: 1500px) {
433+
#visualizer-library .items .viz-pro{
434+
height: 100%;
435+
padding-bottom: 24px;
436+
}
437+
#visualizer-library .items .viz-pro .one-columns{
438+
height: 100%;
439+
}
440+
#visualizer-library .items .viz-pro .visualizer-sidebar-box{
441+
height: 100%;
442+
}
443+
#visualizer-library .items .viz-pro.two-columns{
444+
padding-bottom: 0;
445+
}
446+
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
447+
display: none;
448+
}
449+
.visualizer-chart{
450+
height: calc(100% - 24px);
451+
}
452+
}

0 commit comments

Comments
 (0)