improved library layout

Author: selul

classes/Visualizer/Module/Admin.php

@@ -280,7 +280,7 @@ public function renderLibraryPage() {
 		}
 
 		// Added by Ash/Upwork
-		$filterByMeta   = filter_input( INPUT_GET, 'filter', FILTER_SANITIZE_STRING );
+		$filterByMeta   = filter_input( INPUT_GET, 's', FILTER_SANITIZE_STRING );
 		if ( $filterByMeta ) {
 			$query      = array(
 					'key'     => Visualizer_Plugin::CF_SETTINGS,

classes/Visualizer/Module/Chart.php

@@ -130,7 +130,7 @@ public function getCharts() {
 			) ),
 		);
 
-		$filter = filter_input( INPUT_GET, 'filter', FILTER_SANITIZE_STRING );
+		$filter = filter_input( INPUT_GET, 's', FILTER_SANITIZE_STRING );
 		if ( $filter && in_array( $filter, Visualizer_Plugin::getChartTypes() ) ) {
 			$query_args['meta_query'] = array(
 				array(

classes/Visualizer/Render/Library.php

@@ -87,36 +87,37 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
 	private function _renderLibrary() {
 		// Added by Ash/Upwork
 		$filterBy       = null;
-		if ( isset( $_GET['filter'] ) && strlen( $_GET['filter'] ) > 0 ) {
-			$filterBy   = filter_input( INPUT_GET, 'filter', FILTER_SANITIZE_STRING );
+		if ( isset( $_GET['s'] ) && strlen( $_GET['s'] ) > 0 ) {
+			$filterBy   = filter_input( INPUT_GET, 's', FILTER_SANITIZE_STRING );
 		}
-		echo '<div id="visualizer-search"><form action="" method="get">
-                <input type="text" name="filter" value="' . $filterBy . '">
-                <input type="hidden" name="page" value="visualizer">
-                <input type="submit" class="button button-secondary" value="' . esc_attr__( 'Search', 'visualizer' ) . '">
-            </form></div>';
+
 		// Added by Ash/Upwork
 		echo '<div id="visualizer-types" class="visualizer-clearfix">';
-			echo '<ul>';
+			echo '<ul class="subsubsub">';
 		foreach ( $this->types as $type => $array ) {
 			$label      = $array['name'];
-			$link       = '<a class="page-numbers" href="' . esc_url( add_query_arg( array( 'type' => $type, 'vpage' => false ) ) ) . '">';
+			$link       = '<a class=" " href="' . esc_url( add_query_arg( array( 'type' => $type, 'vpage' => false ) ) ) . '">';
 			if ( ! $array['enabled'] ) {
-				$link   = "<a class='pro-upsell page-numbers' href='" . Visualizer_Plugin::PRO_TEASER_URL . "' target='_blank'>";
+				$link   = "<a class=' visualizer-pro-only' href='" . Visualizer_Plugin::PRO_TEASER_URL . "' target='_blank'>";
 			}
-			echo '<li class="visualizer-list-item">';
+			echo '<li class="visualizer-list-item all">';
 			if ( $type == $this->type ) {
-				echo '<a class="page-numbers current" href="', esc_url( add_query_arg( 'vpage', false ) ), '">';
+				echo '<a class="  current" href="', esc_url( add_query_arg( 'vpage', false ) ), '">';
 				echo $label;
 				echo '</a>';
 			} else {
 				echo $link;
 				echo $label;
 				echo '</a>';
 			}
-			echo '</li>';
+			echo ' | </li>';
 		}
 			echo '</ul>';
+		echo '<form action="" method="get"><p id="visualizer-search" class="search-box">
+                <input type="search"   name="s" value="' . $filterBy . '">
+                <input type="hidden" name="page" value="visualizer">
+                <input type="submit" id="search-submit" class="button button-secondary" value="' . esc_attr__( 'Search', 'visualizer' ) . '">
+           </p> </form>';
 		echo '</div>';
 
 		if ( ! empty( $this->charts ) ) {
@@ -127,9 +128,9 @@ private function _renderLibrary() {
 			echo '</div>';
 
 			if ( is_array( $this->pagination ) ) {
-				echo '<ul class="visualizer-library-pagination">';
+				echo '<ul class=" subsubsub">';
 				foreach ( $this->pagination as $page ) {
-					echo '<li class="visualizer-list-item">', $page, '</li>';
+					echo '<li class="all">', $page, '</li>';
 				}
 				echo '</ul>';
 			}

css/library.css

@@ -20,7 +20,9 @@
 #visualizer-types {
 	margin: 20px 0 10px;
 }
-
+.visualizer-list-item .visualizer-pro-only{
+	text-decoration: line-through;
+}
 #visualizer-library {
 	margin: 20px 0;
 }
@@ -137,59 +139,9 @@
 	margin-right: 20px;
 }
 
-.page-numbers {
-	padding: 5px 10px;
-	border-radius: 2px;
-	color: white !important;
-	background-color: #aaa;
-	-webkit-box-shadow: 0 0 5px #ccc;
-	box-shadow: 0 0 5px #ccc;
-	font-weight: bold;
-	text-decoration: none;
-}
-
-.page-numbers.current,
-a.page-numbers:hover {
-	background-color: lightcoral;
-	-webkit-box-shadow: 0 0 5px lightpink;
-	box-shadow: 0 0 5px lightpink;
-}
 
-.visualizer-library-pagination {
-	display: none;
-}
 
 #visualizer-search form {
-	display: -webkit-box;
-	display: -webkit-flex;
-	display: -ms-flexbox;
-	display: flex;
-
-	-webkit-align-items: center;
-	align-items: center;
-	-webkit-box-align: center;
-	-ms-flex-align: center;
-}
-
-#visualizer-search > form > input[type="text"]:nth-child(1) {
-	height: 30px;
-}
-
-#visualizer-search .button-secondary {
-	margin-left: 20px;
-	padding: 5px 10px;
-	border-radius: 5px;
-	color: white;
-	background-color: lightcoral;
-	-webkit-box-shadow: 0 0 5px lightpink;
-	box-shadow: 0 0 5px lightpink;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 17px;
-	text-decoration: none;
+	text-align: right;
 }
 
-#visualizer-search .button-secondary:hover {
-	border-color: lightpink;
-	background-color: lightpink;
-}