!!!Restyled sidebar

Author: abaicus

classes/Visualizer/Render/Page/Data.php

@@ -65,11 +65,9 @@ protected function _renderSidebarContent() {
 			'chart'  => $this->chart->ID,
 		), admin_url( 'admin-ajax.php' ) );
 
-		echo '<li class="group open">';
-			echo '<h3 class="group-title">', esc_html__( 'Upload CSV File', Visualizer_Plugin::NAME ), '</h3>';
-			echo '<div class="group-content">';
+				echo '<input type="button" name="back_button" class="return-settings-btn preview-btn hidden-setting" value="&laquo; Back">';
+				echo '<div class="initial-screen">';
 				echo '<iframe id="thehole" name="thehole"></iframe>';
-
 				echo '<p class="group-description">';
                     esc_html_e( "Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).", Visualizer_Plugin::NAME );
 				echo '</p>';
@@ -107,21 +105,25 @@ protected function _renderSidebarContent() {
                         $Visualizer_Pro->_addEditorElements();
                     }else{
 ?>
-                    <a href="<?php echo Visualizer_Plugin::PRO_TEASER_URL;?>" title="<?php echo Visualizer_Plugin::PRO_TEASER_TITLE;?>" target="_new">
+                    <a href="<?php echo Visualizer_Plugin::PRO_TEASER_URL;?>" title="<?php echo Visualizer_Plugin::PRO_TEASER_TITLE;?>" class="check-pro-btn" target="_new">
                         <input type="button" class="button preview preview-btn" id="existing-chart-free" value="<?php esc_attr_e( 'Check PRO Version ', Visualizer_Plugin::NAME );?>">
                     </a>
+
+											<input type="button" name="advanced_button" class="advanced-settings-btn preview-btn" value="Advanced &raquo;">
+
 <?php
                     }
                     // Added by Ash/Upwork
 
 				echo '</div>';
 			echo '</div>';
-		echo '</li>';
 
         // changed by Ash/Upwork
+		echo '<div class= "second-screen hidden-setting">';
 		echo '<form id="settings-form" action="', add_query_arg( 'nonce', wp_create_nonce() ), '" method="post">';
         echo $this->sidebar;
 		echo '</form>';
+		echo '</div>';
         // changed by Ash/Upwork
 	}
 
@@ -151,4 +153,4 @@ protected function _renderToolbar() {
 		echo '<input type="submit" id="settings-button" class="button button-primary button-large push-right" value="', $this->button, '">';
 	}
 
-}
+}

css/frame.css

@@ -58,7 +58,7 @@
 
 .group.open {
 	border-bottom: 1px solid #DFDFDF;
-	
+
 }
 
 .group-title {
@@ -157,11 +157,17 @@ div.group-content {
 
 div.group-content .group-description {
 	padding: 0;
-	margin-bottom: 20px;
 	font-weight: 300;
 	font-family: "Montserrat",sans-serif;
 }
 
+.initial-screen .group-description {
+	padding: 0;
+	font-weight: 300;
+	font-family: "Montserrat",sans-serif;
+	padding: 10px 20px 20px;
+}
+
 .section-title {
 	display: block;
 	font-weight: bold;
@@ -258,6 +264,7 @@ div.group-content .group-description {
 	margin-top: 40px;
 	padding: 20px;
 	border-top: 1px dashed #ddd;
+	text-align: center;
 }
 
 .rate-the-plugin{
@@ -266,7 +273,7 @@ div.group-content .group-description {
 }
 
 #rate-stars {
-	margin: 10px 0px 10px 55px;
+  margin: 15px auto;
 	width: 100px;
 	height: 20px;
 	background-image: url('../images/star.png');
@@ -278,7 +285,6 @@ div.group-content .group-description {
 	text-decoration: none;
 	font-family: "Montserrat",sans-serif;
     font-weight: 400;
-	margin: 0px 0px 0px 30px;
 }
 
 #flattr {
@@ -440,16 +446,17 @@ div.group-content .group-description {
 	 cursor: pointer;
 }
 
-#remote-file { 
+#remote-file {
+	float: right;
 	clear: both;
 }
 
  .form-inline {
-    display: inline-block;
-    margin-bottom: 0;
+	  margin: 0 auto;
+	  display: table;
     vertical-align: middle;
   }
-  
+
  .computer-btn{
 	color: #646464 !important;
 	border: medium none rgb(100, 100, 100) !important;
@@ -478,7 +485,7 @@ div.group-content .group-description {
 	border: 1px solid #2f8cea !important;
 	box-shadow: none !important;
 
-	
+
  }
 
  .just-on-pro{
@@ -489,9 +496,9 @@ div.group-content .group-description {
 	opacity: 0.8;
 	margin-bottom: 10px;
  }
- 
- 
- 
+
+
+
  .from-web{
 	margin-top: 0px;
 	margin-bottom: 15px !important;
@@ -612,6 +619,35 @@ div.group-content .group-description {
 	transition: all .3s ease;
 }
 
+.check-pro-btn {
+	height: 40px;
+	width: 245px;
+	display: block;
+	margin: 0 auto;
+}
+
+.advanced-settings-btn, .return-settings-btn {
+	cursor: pointer;
+	display: block;
+	margin: 0 auto;
+	width: 260px;
+	line-height: 34px;
+	font-size: 17px;
+	width: 260px;
+	height: auto;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	margin-bottom: 20px;
+}
+
+.return-settings-btn {
+	margin: 10px auto;
+}
+
+.hidden-setting {
+	display:none;
+}
 
 
 
@@ -625,7 +661,7 @@ div.group-content .group-description {
     font-size: 14px;
   }
   .group-title::after {
-    top: 10px; 
+    top: 10px;
   }
   #rate-stars {
   	margin: 3px 0 10px 40%;
@@ -636,4 +672,4 @@ div.group-content .group-description {
 
 
 
-}
+}

js/frame.js

@@ -105,4 +105,20 @@
 
         return $(this);
     }
-})(jQuery);
+})(jQuery);
+
+//Hide / show settings in sidebar
+(function($) {
+	$(document).ready(function() {
+
+		$('.advanced-settings-btn').click(function(){
+			$('.second-screen, .return-settings-btn').removeClass("hidden-setting");
+			$('.initial-screen').addClass("hidden-setting");
+		});
+
+		$('.return-settings-btn').click(function(){
+			$('.second-screen, .return-settings-btn').addClass("hidden-setting");
+			$('.initial-screen').removeClass("hidden-setting");
+		});
+	});
+})(jQuery);