Move CSS to separate file

modules/statistics/templates/statistics.tpl.php

@@ -3,7 +3,8 @@ $this->data['header'] = 'SimpleSAMLphp Statistics';
 
 $this->data['jquery'] = array('core' => true, 'ui' => true, 'css' => true);
 
-$this->data['head'] = '';
+$this->data['head'] = '$this->data['head']  = '<link rel="stylesheet" type="text/css" href="/' .
+    $this->data['baseurlpath'] . 'module.php/statistics/style.css" />';
 $this->data['head'] .= '<script type="text/javascript">
 $(document).ready(function() {
     $("#tabdiv").tabs();
@@ -45,62 +46,17 @@ function getBaseURL($t, $type = 'get', $key = null, $value = null)
         return $text;
     }
 }
-?>
 
-        <style type="text/css" media="all">
-.ui-tabs-panel { padding: .5em }
-div#content {
-        margin: .4em ! important;
-}
-.tableview {
-        border-collapse: collapse;
-        border: 1px solid #ccc;
-        margin: 1em;
-        width: 80%;
-}
-.tableview th, .tableview td{
-        border: 1px solid: #ccc;
-        padding: 0px 5px;
-}
-.tableview th {
-        background: #e5e5e5;
-}
-.tableview tr.total td {
-        color: #500; font-weight: bold;
-}
-.tableview tr.even td {
-        background: #f5f5f5;
-        border-top: 1px solid #e0e0e0;
-        border-bottom: 1px solid #e0e0e0;
-}
-.tableview th.value, .tableview td.value {
-        text-align: right;
-}
-div.corner_t {
-    max-width: none ! important;
-}
-table.timeseries tr.odd td {
-        background-color: #f4f4f4;
-}
-table.timeseries td {
-        padding-right: 2em; border: 1px solid #ccc
-}
-td.datacontent {
-        text-align: right;
-}
-        </style>
-
-<?php
 echo '<h1>'. $this->data['available.rules'][$this->data['selected.rule']]['name'] . '</h1>';
 echo '<p>' . $this->data['available.rules'][$this->data['selected.rule']]['descr'] . '</p>';
 
 // Report settings
-echo '<table class="selecttime" style="width: 100%; border: 1px solid #ccc; background: #eee; margin: 1px 0px; padding: 0px">';
-echo '<tr><td style="width: 50px; padding: 0px"><img style="margin: 0px" src="../../resources/icons/crystal_project/kchart.32x32.png" alt="Report settings" /></td>';
+echo '<table class="selecttime">';
+echo '<tr><td class="selecttime_icon"><img src="../../resources/icons/crystal_project/kchart.32x32.png" alt="Report settings" /></td>';
 
 // Select report
 echo '<td>';
-echo '<form style="display: inline">';
+echo '<form>';
 echo getBaseURL($this, 'post', 'rule');
 echo '<select onChange="submit();" name="rule">';
 foreach ($this->data['available.rules'] as $key => $rule) {
@@ -114,8 +70,8 @@ echo '</select></form>';
 echo '</td>';
 
 // Select delimiter
-echo '<td style="text-align: right">';
-echo '<form style="display: inline">';
+echo '<td class="td_right">';
+echo '<form>';
 echo getBaseURL($this, 'post', 'd');
 echo '<select onChange="submit();" name="d">';
 foreach ($this->data['availdelimiters'] as $key => $delim) {
@@ -141,17 +97,17 @@ echo '</table>';
 
 
 // Select time and date
-echo '<table class="selecttime" style="width: 100%; border: 1px solid #ccc; background: #eee; margin: 1px 0px; padding: 0px">';
-echo '<tr><td style="width: 50px; padding: 0px"><img style="margin: 0px" src="../../resources/icons/crystal_project/date.32x32.png" alt="Select date and time" /></td>';
+echo '<table class="selecttime">';
+echo '<tr><td class="selecttime_icon"><img src="../../resources/icons/crystal_project/date.32x32.png" alt="Select date and time" /></td>';
 
 if (isset($this->data['available.times.prev'])) {
-    echo '<td style=""><a href="' . getBaseURL($this, 'get', 'time', $this->data['available.times.prev']) . '">« Previous</a></td>';
+    echo '<td><a href="' . getBaseURL($this, 'get', 'time', $this->data['available.times.prev']) . '">« Previous</a></td>';
 } else {
-    echo '<td style="color: #ccc">« Previous</td>';
+    echo '<td class="selecttime_link_grey">« Previous</td>';
 }
 
-echo '<td style="text-align: right">';
-echo '<form style="display: inline">';
+echo '<td class="td_right">';
+echo '<form>';
 echo getBaseURL($this, 'post', 'res');
 echo '<select onChange="submit();" name="res">';
 foreach ($this->data['available.timeres'] as $key => $timeresname) {
@@ -164,8 +120,8 @@ foreach ($this->data['available.timeres'] as $key => $timeresname) {
 echo '</select></form>';
 echo '</td>';
 
-echo '<td style="text-align: left">';
-echo '<form style="display: inline">';
+echo '<td class="td_left">';
+echo '<form>';
 echo getBaseURL($this, 'post', 'time');
 echo '<select onChange="submit();" name="time">';
 foreach ($this->data['available.times'] as $key => $timedescr) {
@@ -179,9 +135,9 @@ echo '</select></form>';
 echo '</td>';
 
 if (isset($this->data['available.times.next'])) {
-    echo '<td style="text-align: right; padding-right: 4px"><a href="' . getBaseURL($this, 'get', 'time', $this->data['available.times.next']) . '">Next »</a></td>';
+    echo '<td class="td_right td_next_right"><a href="' . getBaseURL($this, 'get', 'time', $this->data['available.times.next']) . '">Next »</a></td>';
 } else {
-    echo '<td style="color: #ccc; text-align: right; padding-right: 4px">Next »</td>';
+    echo '<td class="td_right selecttime_link_grey td_next_right">Next »</td>';
 }
 
 echo '</tr></table>';
@@ -198,8 +154,8 @@ echo '
 
 echo '<img src="' . htmlspecialchars($this->data['imgurl']) . '" />';
 
-echo '<form style="display: inline">';
-echo '<p style="text-align: right">Compare with total from this dataset ';
+echo '<form>';
+echo '<p class="p_right">Compare with total from this dataset ';
 echo getBaseURL($this, 'post', 'rule2');
 echo '<select onChange="submit();" name="rule2">';
 echo '	<option value="_">None</option>';
@@ -245,7 +201,7 @@ echo '</table></div>';
 //  - - - - - - - End table view - - - - - - - 
 
 echo '<div id="debug" >';
-echo '<table class="timeseries" style="">';
+echo '<table class="timeseries">';
 echo '<tr><th>Time</th><th>Total</th>';
 foreach ($this->data['topdelimiters'] as $key) {
     $keyName = $key;
@@ -260,7 +216,7 @@ echo '</tr>';
 $i = 0;
 foreach ($this->data['debugdata'] as $slot => $dd) {
     echo '<tr class="' . ((++$i % 2) == 0 ? 'odd' : 'even') . '">';
-    echo '<td style="">' . $dd[0] . '</td>';
+    echo '<td>' . $dd[0] . '</td>';
     echo '<td class="datacontent">' . $dd[1] . '</td>';
 
     foreach ($this->data['topdelimiters'] as $key) {

modules/statistics/www/style.css

+@media all {
+    .ui-tabs-panel { padding: .5em }
+
+    div#content {
+        margin: .4em ! important;
+    }
+
+    .tableview {
+        border-collapse: collapse;
+        border: 1px solid #ccc;
+        margin: 1em;
+        width: 80%;
+    }
+
+    .tableview th, .tableview td{
+        border: 1px solid: #ccc;
+        padding: 0px 5px;
+    }
+
+    .tableview th {
+        background: #e5e5e5;
+    }
+
+    .tableview tr.total td {
+        color: #500; font-weight: bold;
+    }
+
+    .tableview tr.even td {
+        background: #f5f5f5;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .tableview th.value, .tableview td.value {
+        text-align: right;
+    }
+
+    div.corner_t {
+        max-width: none ! important;
+    }
+
+    table.timeseries tr.odd td {
+        background-color: #f4f4f4;
+    }
+
+    table.timeseries td {
+        padding-right: 2em; border: 1px solid #ccc
+    }
+
+    td.datacontent {
+        text-align: right;
+    }
+
+    table.selecttime {
+        width: 100%;
+        border: 1px solid #ccc;
+        background: #eee;
+        margin: 1px 0px; padding: 0px;
+    }
+
+    td.selecttime_icon {
+        width: 50px;
+        padding: 0px;
+    }
+
+    td.selecttime_icon img {
+        margin: 0px;
+    }
+
+    td.selecttime_link_grey {
+        color: #ccc;
+    }
+
+    td.td_right {
+        text-align: right;
+    }
+    td.td_next_right {
+        padding-right: 4px;
+    }
+    td.td_left {
+        text-align: left;
+    }
+
+    p.p_right {
+        text-align: right;
+    }
+
+    form {
+        display: inline;
+    }
+}