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>\" +