1 <?php
 2 /**
 3  * WhResponsive class
 4  * Extends WhGridView to provide responsive Tables
 5  *
 6  * @author Antonio Ramirez <amigo.cobos@gmail.com>
 7  * @copyright Copyright &copy; Antonio Ramirez 2013-
 8  * @license http://www.opensource.org/licenses/bsd-license.php New BSD License
 9  * @package yiiwheels.widgets.grid.behaviors
10  */
11 class WhResponsive extends CBehavior
12 {
13     /**
14      * @var bool whether to make the grid responsive
15      */
16     public $responsiveTable = false;
17 
18     /**
19      * Writes responsiveCSS
20      */
21     public function writeResponsiveCss($columns, $gridId)
22     {
23         $cnt = 1;
24         $labels = '';
25         foreach ($columns as $column) {
26             /** @var WhDataColumn $column */
27             ob_start();
28             $column->renderHeaderCell();
29             $name = strip_tags(ob_get_clean());
30 
31             $labels .= "#$gridId td:nth-of-type($cnt):before { content: '{$name}'; }\n";
32             $cnt++;
33         }
34 
35         $css = <<<EOD
36 @media
37     only screen and (max-width: 760px),
38     (min-device-width: 768px) and (max-device-width: 1024px)  {
39 
40         /* Force table to not be like tables anymore */
41         #{$gridId} table,#{$gridId} thead,#{$gridId} tbody,#{$gridId} th,#{$gridId} td,#{$gridId} tr {
42             display: block;
43         }
44 
45         /* Hide table headers (but not display: none;, for accessibility) */
46         #{$gridId} thead tr {
47             position: absolute;
48             top: -9999px;
49             left: -9999px;
50         }
51 
52         #{$gridId} tr { border: 1px solid #ccc; }
53 
54         #{$gridId} td {
55             /* Behave  like a "row" */
56             border: none;
57             border-bottom: 1px solid #eee;
58             position: relative;
59             padding-left: 50%;
60         }
61 
62         #{$gridId} td:before {
63             /* Now like a table header */
64             position: absolute;
65             /* Top/left values mimic padding */
66             top: 6px;
67             left: 6px;
68             width: 45%;
69             padding-right: 10px;
70             white-space: nowrap;
71         }
72         .grid-view .button-column {
73             text-align: left;
74             width:auto;
75         }
76         /*
77         Label the data
78         */
79         {$labels}
80     }
81 EOD;
82         Yii::app()->clientScript->registerCss(__CLASS__ . '#' . $gridId, $css);
83     }
84 }

YiiWheels API documentation generated by ApiGen 2.8.0