From 7220edb95e35bf8f6d59526dc8eaec5405a3e4f6 Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Mon, 1 Apr 2013 16:27:19 +0000
Subject: [PATCH] 2013-04-01 Miguel de Dios <miguel.dedios@artica.es>

	* mobile/operation/events.php, mobile/include/ui.class.php,
	mobile/include/style/main.css: changes for to show better the tables
	with reflow and responsive.




git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@7907 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
---
 pandora_console/ChangeLog                     |  6 ++++
 pandora_console/mobile/include/style/main.css | 34 +++++++++++++++++++
 pandora_console/mobile/include/ui.class.php   |  8 ++---
 pandora_console/mobile/operation/events.php   | 22 ++++++++----
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog
index 2ced3a6d8f..6d3d16df51 100644
--- a/pandora_console/ChangeLog
+++ b/pandora_console/ChangeLog
@@ -1,3 +1,9 @@
+2013-04-01 Miguel de Dios <miguel.dedios@artica.es>
+	
+	* mobile/operation/events.php, mobile/include/ui.class.php,
+	mobile/include/style/main.css: changes for to show better the tables
+	with reflow and responsive.
+
 2013-04-01 Miguel de Dios <miguel.dedios@artica.es>
 	
 	* mobile/operation/events.php, mobile/include/style/main.css: first
diff --git a/pandora_console/mobile/include/style/main.css b/pandora_console/mobile/include/style/main.css
index e924ee81e0..af884c02cb 100644
--- a/pandora_console/mobile/include/style/main.css
+++ b/pandora_console/mobile/include/style/main.css
@@ -276,10 +276,23 @@ table#list_events th {
 	}
 }
 
+#list_events a {
+	color: #333333 !important;
+}
+
+@media screen and (max-width: 35em) {
+	/* Put in new line the event name */
+	#list_events tbody tr.events td.cell_0 b.ui-table-cell-label {
+		display: block;
+	}
+}
+
 /*END-----------Events styles-----------------------------------------*/
 
 
 
+
+
 /*INIT-----------Agents styles----------------------------------------*/
 .red, .redb, .redi, .error {
     color: #CC0000;
@@ -309,6 +322,27 @@ table#list_events th {
 
 
 
+
+/*INIT---------Fix the tons of air between the rows in small table----*/
+.head_vertical {
+	margin-top: 0px !important;
+	border-top: 1px solid grey;
+}
+
+.head_horizontal {
+	border-bottom: 1px solid grey !important;
+}
+
+@media screen and (max-width: 35em) {
+	.ui-table th, .ui-table td {
+		padding: 0px !important;
+	}
+}
+/*END----------Fix the tons of air between the rows in small table----*/
+
+
+
+
 /*INIT---------Fix to avoid clicks under loading message--------------*/
 .ui-loader-background {
     width:100% !important;
diff --git a/pandora_console/mobile/include/ui.class.php b/pandora_console/mobile/include/ui.class.php
index b7cf6f6018..2b13e6f7b1 100755
--- a/pandora_console/mobile/include/ui.class.php
+++ b/pandora_console/mobile/include/ui.class.php
@@ -777,7 +777,7 @@ class Table {
 		//Empty head for white space between rows in the responsive vertical layout
 		$html .= "<th></th>\n";
 		foreach ($this->head as $head) {
-			$html .= "<th>" . $head . "</th>\n";
+			$html .= "<th class='head_horizontal'>" . $head . "</th>\n";
 		}
 		$html .= "</tr>\n";
 		$html .= "</thead>\n";
@@ -792,13 +792,13 @@ class Table {
 			$html .= "<tr class='" . $class . "'>\n";
 			//Empty head for white space between rows in the responsive vertical layout
 			if (isset($this->row_heads[$key])) {
-				$html .= "<th>" . $this->row_heads[$key] . "</th>\n";
+				$html .= "<th class='head_vertical'>" . $this->row_heads[$key] . "</th>\n";
 			}
 			elseif ($this->row_keys_as_head_row) {
-				$html .= "<th>" . $key . "</th>\n";
+				$html .= "<th class='head_vertical'>" . $key . "</th>\n";
 			}
 			else {
-				$html .= "<th></th>\n";
+				$html .= "<th class='head_vertical'></th>\n";
 			}
 			foreach ($row as $key_cell => $cell) {
 				$html .= "<td class='cell_" . $key_cell . "'>" . $cell . "</td>\n";
diff --git a/pandora_console/mobile/operation/events.php b/pandora_console/mobile/operation/events.php
index 2c15656e0d..a02aea7d12 100644
--- a/pandora_console/mobile/operation/events.php
+++ b/pandora_console/mobile/operation/events.php
@@ -59,7 +59,9 @@ class Events {
 					foreach ($events_db as $event) {
 						$end = 0;
 						$row = array();
-						$row[] = '<a href="javascript: openDetails(' . $event['id_evento'] . ')">' . 
+						$row[] = '
+						<b class="ui-table-cell-label">' . __('Event Name') . '</b>
+						<a class="ui-link" href="javascript: openDetails(' . $event['id_evento'] . ')">' . 
 							io_safe_output($event['evento']) . '</a>';
 						/*
 						switch ($event['estado']) {
@@ -83,9 +85,11 @@ class Events {
 								"title" => $title_st,
 								"id" => 'status_img_' . $event["id_evento"]));
 						*/
-						$row[] = ui_print_timestamp ($event['timestamp_rep'], true);
+						$row[] = '<b class="ui-table-cell-label">' . __('Timestamp') . '</b>' .
+							ui_print_timestamp ($event['timestamp_rep'], true);
 						
-						$row[] = ui_print_agent_name ($event["id_agente"], true);
+						$row[] = '<b class="ui-table-cell-label">' . __('Agent') . '</b>' .
+							ui_print_agent_name ($event["id_agente"], true);
 						
 						$status =
 							html_print_image ("mobile/images/" .
@@ -106,7 +110,8 @@ class Events {
 							$status .= '';
 						}
 						
-						$row[] = $status;
+						$row[] = '<b class="ui-table-cell-label">' . __('Status') . '</b>' .
+							$status;
 						
 						
 						$events[$event['id_evento']] = $row;
@@ -864,9 +869,12 @@ class Events {
 					}
 					else {
 						$.each(data.events, function(key, event) {
-							$(\"table#list_events tbody\").append(\"<tr class='events'>\" +
-									\"<th></th>\" +
-									\"<td>\" + event[0] + \"</td>\" +
+							$(\"table#list_events tbody\").append(
+								\"<tr class='events'>\" +
+									\"<th class='head_vertical'></th>\" +
+									\"<td class='cell_0'>\" +
+										event[0] +
+									\"</td>\" +
 									\"<td>\" + event[1] + \"</td>\" +
 									\"<td>\" + event[2] + \"</td>\" +
 									\"<td>\" + event[3] + \"</td>\" +