Skip to content

Commit 28e5be4

Browse files
contactashish13contactashish13
committed
content for support tabs
1 parent d3bba00 commit 28e5be4

File tree

11 files changed

+174
-210
lines changed

11 files changed

+174
-210
lines changed

‎classes/Visualizer/Module/Admin.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -845,7 +845,7 @@ public function getPluginMetaLinks( $plugin_meta, $plugin_file ) {
845845
if ( $plugin_file === plugin_basename( VISUALIZER_BASEFILE ) ) {
846846
// knowledge base link
847847
$plugin_meta[] = sprintf(
848-
'<a href="https://docs.themeisle.com/category/657-visualizer" target="_blank">%s</a>',
848+
'<a href="' . VISUALIZER_MAIN_DOC . '" target="_blank">%s</a>',
849849
esc_html__( 'Docs', 'visualizer' )
850850
);
851851
// flattr link

‎classes/Visualizer/Render/Page/Data.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,7 @@ class="dashicons dashicons-lock"></span></h2>
440440
</li>
441441

442442
<li class="viz-group viz-group-category bottom-fixed sidebar-footer-link" id="vz-chart-docs">
443-
<h2><span class="dashicons dashicons-editor-help"></span><a href="https://docs.themeisle.com/category/657-visualizer" target="_blank"><?php _e( 'Docs', 'visualizer' ); ?></a></h2>
443+
<h2><span class="dashicons dashicons-editor-help"></span><a href="<?php echo VISUALIZER_MAIN_DOC; ?>" target="_blank"><?php _e( 'Docs', 'visualizer' ); ?></a></h2>
444444
</li>
445445

446446
<?php $this->getPermissionsLink( $this->chart->ID ); ?>

‎css/upsell.css

Lines changed: 60 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1-
#viz-features .viz-features-header {
2-
box-sizing: border-box;
3-
padding: 20px 30px 30px;
1+
#viz-features .pro-features-header {
2+
padding: 20px 10px;
43
border-top: 5px solid #252b37;
54
background: #fff;
65
}
76

7+
#viz-features .logo {
8+
display: inline-block;
9+
margin: 0 0 0 20px;
10+
padding: 0 0 0 70px;
11+
color: #3c3c3c;
12+
background: url(../img/wppr-logo.png) no-repeat left center;
13+
font-family: "Open Sans", sans-serif;
14+
font-size: 2em;
15+
font-weight: 700;
16+
line-height: 60px;
17+
letter-spacing: -1px;
18+
}
19+
820
#viz-features .slogan {
921
display: inline-block;
10-
margin: 0 0 0 8px;
22+
margin: 0 0 0 5px;
1123
padding: 0;
1224
color: #858585;
1325
font-family: "Open Sans", sans-serif;
1426
font-size: 17px;
15-
line-height: 1;
16-
vertical-align: 4px;
27+
line-height: 3.5;
1728
}
1829

1930
#viz-features .slogan a {
2031
color: #858585;
2132
font-weight: 600;
2233
font-style: italic;
2334
text-decoration: none;
24-
-webkit-transition: all 0.250s ease-in-out;
2535
transition: all 0.250s ease-in-out;
2636
}
2737

@@ -35,7 +45,9 @@
3545
}
3646

3747
#viz-features .header-btns {
38-
margin: 7px auto;
48+
float: right;
49+
margin: 7px 20px;
50+
text-align: right;
3951
}
4052

4153
#viz-features .header-btns .buy-now {
@@ -52,7 +64,6 @@
5264
font-weight: bold;
5365
text-decoration: none;
5466
text-transform: uppercase;
55-
-webkit-transition: all 0.250s ease-in-out;
5667
transition: all 0.250s ease-in-out;
5768
}
5869

@@ -64,94 +75,64 @@
6475
padding-right: 3px;
6576
}
6677

67-
#viz-features {
68-
padding: 0;
69-
}
70-
71-
#viz-features .viz-features-content {
72-
width: 100%;
73-
padding: 0;
74-
}
75-
76-
#viz-features .viz-features-header,
77-
#viz-features .viz-feature {
78-
box-sizing: border-box;
79-
width: 100%;
80-
margin: 30px 0 0;
81-
padding: 30px;
82-
background-color: #fff;
78+
#viz-features .pro-features-header,
79+
#viz-features .pro-feature {
80+
display: block;
81+
margin: 10px;
8382
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
8483
}
8584

86-
#viz-features .viz-feature .viz-feature-features,
87-
#viz-features .viz-feature .viz-feature-image {
85+
#viz-features .pro-feature .pro-feature-features,
86+
#viz-features .pro-feature .pro-feature-image {
87+
display: table-cell;
8888
margin: 0;
8989
vertical-align: middle;
9090
}
9191

92-
#viz-features .viz-feature .viz-feature-features {
92+
#viz-features .pro-feature .pro-feature-features {
9393
box-sizing: border-box;
94-
padding: 0 0 20px;
95-
}
96-
97-
#viz-features .viz-feature .viz-feature-image img {
98-
max-width: 470px;
94+
padding: 30px;
9995
}
10096

101-
#viz-features .viz-feature .viz-feature-image iframe {
102-
max-width: 100%;
97+
#viz-features .pro-feature .pro-feature-image {
98+
width: 470px;
10399
}
104100

105-
#viz-features .viz-feature .viz-feature-features h2 {
101+
#viz-features .pro-feature .pro-feature-features h2 {
106102
margin: 0 0 20px;
107103
font-size: 28px;
108-
font-weight: 700;
109-
line-height: 1.2;
110104
}
111105

112-
#viz-features .viz-feature .viz-feature-features h4 {
106+
#viz-features .pro-feature .pro-feature-features h4 {
113107
margin: 0 0 10px;
114-
font-size: 24px;
108+
font-size: 20px;
115109
}
116110

117-
#viz-features .viz-feature .viz-feature-features p {
111+
#viz-features .pro-feature .pro-feature-features p {
118112
margin: 0 0 15px;
119-
font-size: 18px;
113+
font-size: 16px;
120114
line-height: 1.5;
121115
}
122116

123-
#viz-features .viz-feature .viz-feature-image img {
117+
#viz-features .pro-feature .pro-feature-image img {
124118
width: 100%;
125119
height: auto;
126120
}
127121

128-
@media screen and (min-width: 768px) {
129-
#viz-features {
130-
padding: 0 15px;
131-
}
132-
}
133-
134-
@media screen and (min-width: 1200px) {
135-
#viz-features .viz-feature {
136-
padding: 30px 60px;
137-
}
138-
139-
#viz-features .viz-feature .viz-feature-features {
140-
padding: 0 30px 0 0;
141-
}
142-
143-
#viz-features .viz-feature .viz-feature-features h2 {
144-
font-size: 30px;
122+
@media screen and (max-width: 1200px) {
123+
#viz-features .pro-feature .pro-feature-features,
124+
#viz-features .pro-feature .pro-feature-image {
125+
display: block;
145126
}
146127

147-
#viz-features .viz-feature .viz-feature-features p {
148-
font-size: 20px;
128+
#viz-features .pro-feature .pro-feature-image {
129+
width: 470px;
130+
margin: 0 auto 20px;
131+
text-align: center;
149132
}
150-
}
151133

152-
@media screen and (min-width: 1500px) {
153-
#viz-features .viz-feature .viz-feature-features {
154-
padding: 0 120px 0 0;
134+
#viz-features .slogan {
135+
display: none;
155136
}
156137
}
157138

@@ -167,51 +148,29 @@
167148
#viz-features .header-btns {
168149
display: block;
169150
float: none;
170-
margin: 10px 0 0;
151+
margin: 0 0 10px 0;
171152
text-align: center;
172153
}
173154
}
174155

175-
@media screen and (max-width: 1200px) {
176-
#viz-features .viz-feature .viz-feature-features,
177-
#viz-features .viz-feature .viz-feature-image {
178-
display: block;
156+
@media screen and (max-width: 782px) {
157+
#cwp_form #header .button {
158+
padding: 0 4px 1px !important;
159+
font-size: 11px !important;
179160
}
180161

181-
#viz-features .viz-feature .viz-feature-image {
182-
display: inline-block;
183-
max-width: 100%;
184-
margin: 0 auto 30px;
162+
#cwp_form #header .logo h2 {
163+
margin: 0 !important;
164+
padding: 0 !important;
185165
}
186166

187-
#viz-features .slogan {
188-
display: none;
167+
#viz-features .pro-feature .pro-feature-image {
168+
width: 100%;
189169
}
190170
}
191171

192-
#viz-features.viz-settings .viz-feature {
193-
margin-top: 0;
194-
border: none;
195-
}
196-
197-
#viz-features.viz-settings .nav-tab-wrapper {
198-
border-bottom: none;
199-
}
200-
201-
#viz-features.viz-settings .nav-tab-wrapper a.nav-tab-active,
202-
#viz-features.viz-settings .nav-tab-wrapper a:hover {
172+
#viz-features .pro-feature .pro-feature-inner {
173+
display: table;
174+
width: 100%;
203175
background: #fff;
204176
}
205-
206-
#viz-features.viz-settings .nav-tab-wrapper a {
207-
margin-top: 10px;
208-
padding: 10px 20px;
209-
border: 0;
210-
color: #000;
211-
background: #e0e0e0;
212-
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
213-
}
214-
215-
.viz-feature-centered {
216-
text-align: center;
217-
}

‎images/pro/excel.png

9.39 KB
Loading

‎images/pro/import.png

19.4 KB
Loading

‎images/pro/more_charts.png

171 KB
Loading

‎images/pro/support.png

22.4 KB
Loading

‎index.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ function visualizer_launch() {
8989

9090
// the link to pre-build queries.
9191
define( 'VISUALIZER_DB_QUERY_DOC_URL', 'https://docs.themeisle.com/article/970-visualizer-sample-queries-to-generate-charts' );
92+
define( 'VISUALIZER_MAIN_DOC', 'https://docs.themeisle.com/category/657-visualizer' );
9293

9394
// instantiate the plugin
9495
$plugin = Visualizer_Plugin::instance();

‎templates/docs.php

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,64 @@
1-
<!--
2-
Layout For Tutorial Page of Feedzy RSS Feeds
1+
<?php
2+
$is_pro = Visualizer_Module::is_pro();
3+
?>
4+
<div class="pro-feature">
5+
<div class="pro-feature-inner">
6+
<div class="pro-feature-features">
7+
<h2>Welcome to Visualizer!</h2>
8+
<p>Visualizer lets you easily create and customize responsive tables and charts so you can share your data effectively to your users.</p>
9+
<p>With this version, you can already:</p>
310

4-
@since ?
5-
@package feedzy-rss-feeds
6-
-->
7-
<div id="viz-features">
11+
<ul style="list-style: disc; list-style-position: inside;">
12+
<li>Create an unlimited number of tables and charts</li>
13+
<li>Manually edit the data used by any graphs and tables</li>
14+
<li>Import data from a URL or file</li>
15+
<li>Fully customize the design and behavior of your tables and charts</li>
16+
<?php if ( $is_pro ) { ?>
17+
<li>Schedule regular updates to your charts</li>
18+
<li>Import from the database or other charts</li>
19+
<?php } ?>
20+
</ul>
821

9-
<div class="viz-features-content">
10-
11-
<a name="shortcode"></a>
12-
<div class="viz-feature">
13-
<div class="viz-feature-features">
14-
<h2>Shortcode</h2>
15-
<p>Show feed items using the <code>[feedzy-rss-feeds]</code>shortcode in a few easy steps.</p>
16-
<p>You can view our documentation <a href="https://docs.themeisle.com/article/658-feedzy-rss-feeds" target="_blank">here</a></p>
17-
</div>
18-
<div class="viz-feature-image">
19-
<iframe width="600" height="300" src="https://www.youtube.com/embed/GEFAY2IxxEc?start=84" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
22+
<?php if ( ! $is_pro ) { ?>
23+
<p>We have many more features and charts, and offer email & chat support if you purchase our <a href="<?php echo Visualizer_Plugin::PRO_TEASER_URL; ?>">Pro Version</a>.</p>
24+
<?php } ?>
2025
</div>
2126
</div>
27+
</div>
28+
<div class="clear"></div>
29+
30+
<div class="pro-feature">
31+
<div class="pro-feature-inner">
32+
<div class="pro-feature-features">
33+
<h2>Documentation</h2>
34+
<p>To get started with Visualizer, we recommend you first bookmark our main documentation page <a href="<?php echo VISUALIZER_MAIN_DOC; ?>">here</a>.</p>
2235

23-
<div class="viz-feature">
24-
<div class="viz-feature-features viz-feature-centered">
25-
<h2>Grow your WordPress business with Feedzy today.</h4>
26-
<div class="header-btns">
27-
<?php
36+
<p>
37+
Notably, you could take a look at this first introductory tutorial: <a href="https://docs.themeisle.com/article/597-create-chart">How to create my first chart</a>.
38+
</p>
2839

29-
if ( ! VISUALIZER_PRO ) {
30-
?>
31-
<a href="<?php echo esc_url( admin_url( 'admin.php?page=feedzy-support&tab=more' ) ); ?>" class="buy-now"><span
32-
class="dashicons dashicons-cart"></span> Click here to see the additional features in Feedzy Pro</a>
33-
<?php
34-
}
35-
?>
40+
<p>If you prefer learning through video, this could prove useful. It is a little dated however.</p>
41+
</div>
42+
<div class="pro-feature-image">
43+
<iframe width="500" height="235" src="https://www.youtube.com/embed/hQO_evnb_tQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
44+
</div>
45+
<div class="clear"></div>
3646
</div>
47+
</div>
48+
<div class="clear"></div>
3749

38-
</div><!-- .viz-features-content -->
3950

40-
</div>
51+
<div class="pro-feature">
52+
<div class="pro-feature-inner">
53+
<div class="pro-feature-features">
54+
<h2>Need help?</h2>
55+
<?php if ( ! $is_pro ) { ?>
56+
<p>Our support channel for users of the free version can be found <a href="https://wordpress.org/support/plugin/visualizer/">here</a>.</p>
57+
<?php } else { ?>
58+
<p>Contact our premium support by logging in to your account <a href="https://store.themeisle.com/login/">here</a>.</p>
59+
<?php } ?>
60+
</div>
61+
<div class="clear"></div>
62+
</div>
63+
</div>
64+
<div class="clear"></div>

‎templates/support.php

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,23 @@
22

33
<?php
44
$active_tab = isset( $_REQUEST['tab'] ) ? sanitize_text_field( $_REQUEST['tab'] ) : 'help';
5-
$show_more = ! VISUALIZER_PRO;
5+
$show_more = ! Visualizer_Module::is_pro();
66
?>
77

8+
<div class="pro-features-header">
9+
<p class="logo">Visualizer: Tables and Charts Manager for WordPress</p>
10+
<span class="slogan">by <a
11+
href="https://themeisle.com/">ThemeIsle</a></span>
12+
<div class="header-btns">
13+
<?php if ( $show_more ) { ?>
14+
<a target="_blank" href="<?php echo Visualizer_Plugin::PRO_TEASER_URL; ?>" class="buy-now"><span
15+
class="dashicons dashicons-cart"></span> More features</a>
16+
<?php } ?>
17+
</div>
18+
<div class="clear"></div>
19+
</div>
20+
21+
822
<h2 class="nav-tab-wrapper">
923
<a href="<?php echo esc_url( admin_url( 'admin.php?page=viz-support&tab=help' ) ); ?>"
1024
class="nav-tab <?php echo $active_tab === 'help' ? 'nav-tab-active' : ''; ?>"><?php _e( 'Support', 'visualizer' ); ?></a>

0 commit comments

Comments
 (0)