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

@@ -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

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;

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";

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'>\" +
+							$(\"table#list_events tbody\").append(
-									\"<th></th>\" +
+								\"<tr class='events'>\" +
-									\"<td>\" + event[0] + \"</td>\" +
+									\"<th class='head_vertical'></th>\" +
+									\"<td class='cell_0'>\" +
+										event[0] +
+									\"</td>\" +
 									\"<td>\" + event[1] + \"</td>\" +
 									\"<td>\" + event[2] + \"</td>\" +
 									\"<td>\" + event[3] + \"</td>\" +