From 3da2f267a22e32f1bb52d6a54ce167b86c3aa661 Mon Sep 17 00:00:00 2001
From: Tatiana Llorente <tatiana.llorente@artica.es>
Date: Fri, 5 Apr 2019 13:51:35 +0200
Subject: [PATCH] New design for the tables - #3707

Former-commit-id: 6b2550344a7748e210fdb81a26751e9e94cbbfa4
---
 pandora_console/general/header.php         |  2 +-
 pandora_console/include/functions_ui.php   |  2 +-
 pandora_console/include/styles/pandora.css | 67 +++++++---------------
 3 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/pandora_console/general/header.php b/pandora_console/general/header.php
index d3bf94ddc1..3117ddb490 100644
--- a/pandora_console/general/header.php
+++ b/pandora_console/general/header.php
@@ -284,7 +284,7 @@ if ($config['menu_type'] == 'classic') {
         $header_support .= '</a></div>';
 
         // Documentation.
-        $header_docu = '<div id="header_support">';
+        $header_docu = '<div id="header_docu">';
         $header_docu .= '<a href="https://wiki.pandorafms.com/index.php?title=Main_Page" target="_blank">';
         $header_docu .= html_print_image('/images/header_docu.png', true, ['title' => __('Go to documentation'), 'class' => 'bot', 'alt' => 'user']);
         $header_docu .= '</a></div>';
diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php
index 34104a2592..d6e017a9c0 100755
--- a/pandora_console/include/functions_ui.php
+++ b/pandora_console/include/functions_ui.php
@@ -4437,7 +4437,7 @@ function ui_get_sorting_arrows($url_up, $url_down, $selectUp, $selectDown)
     $arrow_up = 'images/sort_up_black.png';
     $arrow_down = 'images/sort_down_black.png';
 
-    // en el hover usar flechas verdes en el nodo
+    // Green arrows for the selected.
     if ($selectUp === true) {
         $arrow_up = 'images/sort_up_green.png';
     }
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 940b22f237..e64e94329c 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -2108,7 +2108,7 @@ a.autorefresh_txt,
   font-size: 8.5pt;
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1200px) {
+@media screen and (max-width: 1200px) {
   #header_searchbar input.search_input {
     width: 135px;
   }
@@ -2168,10 +2168,6 @@ div#logo_text3 {
 	margin-left: 4px;
 	padding-top: 0px;
 }*/
-.pagination {
-  margin-top: 15px;
-  margin-bottom: 5px;
-}
 .pagination * {
   margin-left: 0px !important;
   margin-right: 0px !important;
@@ -5037,25 +5033,14 @@ table.info_table tbody > tr:nth-child(even) {
 }
 
 table.info_table tr:first-child > th {
-  /*background-color: #373737;*/
-  /*color: #fff;*/
-  /*font-size: 9pt;*/
   background-color: #fff;
   border-top: 1px solid #e2e2e2;
   color: #000;
   text-align: left;
   vertical-align: middle;
-
-  /*background-color: pink;*/
-}
-
-table.info_table tr:first-child > th span {
-  /*font-size: 9pt;*/
 }
 
 table.info_table th {
-  /*color: #fff;*/
-  /*background-color: #666;*/
   font-size: 7.5pt;
   letter-spacing: 0.3pt;
   color: #000;
@@ -5075,21 +5060,16 @@ table.info_table tr th {
 }
 
 table.info_table > thead > tr:first-child > th:last-child {
-  /*border-right: 1px solid #373737;*/
-  /*border-right: 1px solid #e2e2e2;*/
   border-top-right-radius: 4px;
 }
 
 table.info_table > thead > tr:first-child > th:first-child {
-  /*border-left: 1px solid #373737;*/
-  /* border-left: 1px solid #e2e2e2;*/
   border-top-left-radius: 4px;
 }
 
 table.info_table > thead > tr > th,
 table.info_table > tbody > tr > th,
 table.info_table > thead > tr > th a {
-  /*padding: 9px 7px;*/
   padding-left: 9px;
   padding-right: 9px;
   padding-top: 9px;
@@ -5104,7 +5084,6 @@ table.info_table > tbody > tr > td {
   -webkit-border-radius: 0px;
   border-radius: 0px;
   border: none;
-  /*padding: 9px 7px;*/
   padding-left: 9px;
   padding-right: 9px;
   padding-top: 7px;
@@ -5142,23 +5121,11 @@ table.info_table > tbody > tr:hover {
   background-color: #eee;
 }
 
-table.info_table td:last-child img {
-  border: 1px solid red;
-  background-color: pink;
-  background-color: #ffedf0;
-}
-
 .info_table.profile_list > thead > tr > th > a.tip {
   padding: 0px;
 }
 
-/* no confundir con action-buttons */
-/* esta se pa los botones de las tablas de delete etc*/
-/*para cuando solo hay un boton y puede haber iconos que no son botones al lado*/
-.action_button_img {
-  cursor: pointer;
-}
-
+/* This class is for the icons of actions and operations in the tables. */
 .action_buttons a[href] img,
 .action_buttons input[type="image"],
 .action_button_img {
@@ -5170,6 +5137,11 @@ table.info_table td:last-child img {
   background-color: transparent !important; /*BORRAR*/
 }
 
+/* This class is for only one icon to be a button type. */
+.action_button_img {
+  cursor: pointer;
+}
+
 .action_buttons a,
 .action_buttons input[type="image"] {
   margin-right: 5px;
@@ -5190,12 +5162,26 @@ table.info_table td:last-child img {
   background-color: #fff !important;
 }
 
-/* PAGINACION */
+/* Arrows to sort the tables. */
+.sort_arrow {
+  display: inline-grid;
+  vertical-align: middle;
+}
+.sort_arrow a {
+  padding: 0 0 0 5px !important;
+}
+
+/*
+ * ---------------------------------------------------------------------
+ * - PAGINATION
+ * ---------------------------------------------------------------------
+ */
 .pagination {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 10px;
+  margin-top: 15px;
 }
 
 .pagination .page_number {
@@ -5259,12 +5245,3 @@ table.info_table td:last-child img {
   margin-top: 0px;
   align-items: flex-start;
 }
-
-/* FELCHAS ORDENACION */
-.sort_arrow {
-  display: inline-grid;
-  vertical-align: middle;
-}
-.sort_arrow a {
-  padding: 0 0 0 5px !important;
-}