├── README.md
├── app.controller.filter.js
├── app.controller.splash.js
├── app.controller.table.js
├── app.controller.toolbar.js
├── app.factory.gitlab.js
├── app.js
├── app.service.auth.js
├── callback.html
├── custom.js
├── favico.ico
├── gr-loaders.gif
├── img
    ├── logo.png
    └── logo_dark.png
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | # GitLab Reports
 2 | GitLab Reports is a small utility web app built to help developers (using GitLab for their projects) to generate time tracking reports for their GitLab projects. App's purpose is to provide a clean, quick and to-the-point interface to track progress of the tasks.
 3 | 
 4 | <a href="https://image.prntscr.com/image/iFbYh6lpQGWKbfmOsHk7wQ.png"><img src="https://image.prntscr.com/image/iFbYh6lpQGWKbfmOsHk7wQ.png" /></a>
 5 | 
 6 | ## Features
 7 | + After being authenticated by GitLab, developers can select desired project and then view/generate reports on the web based on select Milestone. 
 8 | + Reports can be created based on select labels (like enhancement, bug, task etc.) and issue states (opened or closed). 
 9 | + Developers can customize reports data by selecting what columns to show or hide.
10 | + GitLab Reports supports calculating Total Estimate Time and Total Time Spent of all issues including in the project report. This helps developers analyzing that how much total time they have spent on specific project milestones which helps tracking progress. 
11 | 
12 | ### Save to PDF
13 | In next releases, we will add support of exporting report to different formats specially PDF along with other enhancements and bug fixes. However, users can still create reports in PDF format by clicking Print button in app's header-toolbar and then selecting **Save as PDF** in destination as shown in below screen shot:
14 | 
15 | <a href="https://image.prntscr.com/image/QNj5IzdjQqmQATdlc0fgBw.png"><img src="https://image.prntscr.com/image/QNj5IzdjQqmQATdlc0fgBw.png" /></a>
16 | 
17 | ## Resources
18 | + **GitLab Reports App:** [http://gitlabreports.cosango.com/](http://gitlabreports.cosango.com/)
19 | + **Cosango Apps:** [http://cosango.com/apps/](http://cosango.com/apps/)
20 | + **Cosango:** [http://cosango.com/](http://cosango.com)


--------------------------------------------------------------------------------
/app.controller.filter.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |     'use strict';
  3 | 
  4 |     function main($rootScope, $scope, $mdSidenav, gitlab, auth) {
  5 | 
  6 |         $scope.$watch('project', function () {
  7 |             $scope.labels = null;
  8 |             $scope.milestone = null;
  9 |             $scope.state = null;
 10 |             localStorage.removeItem('labels');
 11 |             localStorage.removeItem('milestone');
 12 |             localStorage.removeItem('state');
 13 | 
 14 |             if ($scope.project) {
 15 |                 $scope.loadProjectLabels();
 16 |                 $scope.loadProjectMilestones();
 17 |             }
 18 |         });
 19 | 
 20 |         $rootScope.$watch('show_comulative_time_estimate', function () {
 21 |             console.log($rootScope.show_comulative_time_estimate);
 22 |         });
 23 | 
 24 |         $scope.$watch('labels', function () {
 25 |             if ($scope.labels) {
 26 |             }
 27 |         });
 28 | 
 29 |         $scope.$watch('state', function () {
 30 |             if ($scope.state) {
 31 |             }
 32 |         });
 33 | 
 34 |         $scope.$watch('milestone', function () {
 35 |             if ($scope.milestone) {
 36 |             }
 37 |         });
 38 | 
 39 |         $scope.loadProjects = function () {
 40 |             $scope.projects = gitlab.projects.query({
 41 |                 access_token: auth.getAccessToken(),
 42 |                 membership: true
 43 |             });
 44 |         };
 45 | 
 46 |         $scope.loadProjectLabels = function () {
 47 |             if (!$scope.project) {
 48 |                 return;
 49 |             }
 50 | 
 51 |             $scope.project_labels = gitlab.projects_labels.query({
 52 |                 access_token: auth.getAccessToken(),
 53 |                 id: $scope.project.id
 54 |             });
 55 |         };
 56 | 
 57 |         $scope.loadProjectMilestones = function () {
 58 |             if (!$scope.project) {
 59 |                 return;
 60 |             }
 61 | 
 62 |             $scope.project_milestones = gitlab.projects_milestones.query({
 63 |                 access_token: auth.getAccessToken(),
 64 |                 id: $scope.project.id
 65 |             });
 66 |         };
 67 | 
 68 |         $scope.applyFilter = function () {
 69 |             if (!angular.isObject($scope.project)) {
 70 |                 return;
 71 |             }
 72 | 
 73 |             localStorage.setItem('project_id', $scope.project.id);
 74 | 
 75 |             if ($scope.state) {
 76 |                 localStorage.setItem('state', $scope.state);
 77 |             }
 78 |             if (angular.isObject($scope.milestone)) {
 79 |                 localStorage.setItem('milestone', $scope.milestone.title);
 80 |             }
 81 |             if (angular.isObject($scope.labels)) {
 82 |                 var l = [];
 83 |                 angular.forEach($scope.labels, function (item) {
 84 |                     l.push(item.name);
 85 |                 });
 86 |                 localStorage.setItem('labels', l.join(','));
 87 |             }
 88 | 
 89 |             $rootScope.$broadcast('local-storage-updated');
 90 |         };
 91 | 
 92 |         $rootScope.show_comulative_time_estimate = true;
 93 |         $rootScope.show_comulative_time_spent = true;
 94 |         $rootScope.show_show_logo_print = true;
 95 |         $rootScope.table_columns = [
 96 |             'srno',
 97 |             'iid',
 98 |             'title',
 99 |             'created_at',
100 |             'author',
101 |             'assignee',
102 |             'time_estimate',
103 |             'total_time_spent'
104 |         ];
105 |         $scope.loadProjects();
106 |     }
107 | 
108 |     angular.module('GitLabReportApp').controller('FilterController', main);
109 | 
110 | })();
111 | 
112 | 


--------------------------------------------------------------------------------
/app.controller.splash.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 | 
 4 |     function main($scope, auth) {
 5 | 
 6 |         $scope.$watch('authRequired', function () {
 7 |             window.addEventListener('load', function () {
 8 |                 setTimeout(function () {
 9 |                     if ($scope.authRequired) {
10 |                         auth.redirectToOauth();
11 |                     } else {
12 |                         $("#loader").fadeOut("slow");
13 |                     }
14 |                 }, 2000);
15 |             });
16 |         });
17 | 
18 |         $scope.authRequired = localStorage.getItem('access_token') === null;
19 | 
20 | 
21 |     }
22 | 
23 |     angular.module('GitLabReportApp').controller('SplashController', main);
24 | 
25 | })();
26 | 
27 | 


--------------------------------------------------------------------------------
/app.controller.table.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 | 
 4 |     function main($rootScope, $scope, gitlab, auth) {
 5 | 
 6 |         $rootScope.$on('local-storage-updated', function () {
 7 |             $scope.comulative_time_spent = 0;
 8 |             $scope.comulative_time_estimate = 0;
 9 |             $scope.loadIssues();
10 |         });
11 | 
12 |         $scope.loadIssues = function () {
13 |             var params = {};
14 |             if (localStorage.getItem('access_token')) {
15 |                 params.access_token = localStorage.getItem('access_token');
16 |             } else {
17 |                 return;
18 |             }
19 |             if (localStorage.getItem('project_id')) {
20 |                 params.id = localStorage.getItem('project_id');
21 |             } else {
22 |                 return;
23 |             }
24 |             if (localStorage.getItem('state')) {
25 |                 params.state = localStorage.getItem('state');
26 |             }
27 |             if (localStorage.getItem('milestone')) {
28 |                 params.milestone = localStorage.getItem('milestone');
29 |             }
30 |             if (localStorage.getItem('labels')) {
31 |                 params.labels = localStorage.getItem('labels');
32 |             }
33 |             $scope.issues = gitlab.projects_issues.query(
34 |                 params,
35 |                 function () {
36 |                 },
37 |                 function () {
38 |                     auth.redirectToOauth();
39 |                 }
40 |             );
41 |         };
42 | 
43 |         $scope.getIssuesTimeStats = function (issue_project_id, issue_iid) {
44 |             var stats = gitlab.issues_time_stats.get(
45 |                 {
46 |                     access_token: localStorage.getItem('access_token'),
47 |                     id: issue_project_id,
48 |                     issue_iid: issue_iid
49 |                 },
50 |                 function () {
51 |                     $scope.comulative_time_estimate += stats.time_estimate;
52 |                     $scope.comulative_time_spent += stats.total_time_spent;
53 |                     console.log($scope.comulative_time_estimate, $scope.comulative_time_spent);
54 |                 }
55 |             );
56 | 
57 |             return stats;
58 |         };
59 | 
60 |     }
61 | 	
62 | 	
63 | 
64 |     angular.module('GitLabReportApp').controller('TableController', main);
65 | 
66 | })();
67 | 
68 | 


--------------------------------------------------------------------------------
/app.controller.toolbar.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 | 
 4 |     function main($rootScope, $scope, $mdSidenav) {
 5 |         $scope.logout = function () {
 6 |             localStorage.removeItem('access_token');
 7 |             location.href = 'http://www.cosango.com/';
 8 |         };
 9 | 
10 |     $scope.showMe = true;
11 | 
12 |         $scope.toggleRightSidenav = function () {
13 |             console.log('$rootScope.right_sidenav_locked_open', $rootScope.right_sidenav_locked_open);
14 |             $rootScope.right_sidenav_locked_open = !$rootScope.right_sidenav_locked_open;
15 |             $scope.showMe = !$scope.showMe;
16 |         };
17 | 
18 |         $rootScope.right_sidenav_locked_open = true
19 |     }
20 | 
21 |     angular.module('GitLabReportApp').controller('ToolbarController', main);
22 | 
23 | })();
24 | 
25 | 


--------------------------------------------------------------------------------
/app.factory.gitlab.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 | 
 4 |     function main($resource) {
 5 | 
 6 |         return {
 7 |             issues: $resource(
 8 |                 'https://gitlab.com/api/v4/issues',
 9 |                 {},
10 |                 {
11 |                     query: {
12 |                         method: 'GET',
13 |                         isArray: true
14 |                     }
15 |                 }
16 |             ),
17 |             issues_time_stats: $resource(
18 |                 'https://gitlab.com/api/v4/projects/:id/issues/:issue_iid/time_stats',
19 |                 {},
20 |                 {
21 |                     get: {
22 |                         method: 'GET'
23 |                     }
24 |                 }
25 |             ),
26 |             projects: $resource(
27 |                 'https://gitlab.com/api/v4/projects',
28 |                 {},
29 |                 {
30 |                     query: {
31 |                         method: 'GET',
32 |                         isArray: true
33 |                     }
34 |                 }
35 |             ),
36 |             projects_issues: $resource(
37 |                 'https://gitlab.com/api/v4/projects/:id/issues',
38 |                 {},
39 |                 {
40 |                     query: {
41 |                         method: 'GET',
42 |                         isArray: true
43 |                     }
44 |                 }
45 |             ),
46 |             projects_labels: $resource(
47 |                 'https://gitlab.com/api/v4/projects/:id/labels',
48 |                 {},
49 |                 {
50 |                     query: {
51 |                         method: 'GET',
52 |                         isArray: true
53 |                     }
54 |                 }
55 |             ),
56 |             projects_milestones: $resource(
57 |                 'https://gitlab.com/api/v4/projects/:id/milestones',
58 |                 {},
59 |                 {
60 |                     query: {
61 |                         method: 'GET',
62 |                         isArray: true
63 |                     }
64 |                 }
65 |             )
66 |         };
67 |     }
68 | 
69 |     angular.module('GitLabReportApp').factory('gitlab', main);
70 | 
71 | })();
72 | 
73 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | (function () {
2 |     'use strict';
3 | 
4 |     angular.module('GitLabReportApp', ['ngMaterial', 'ngResource']);
5 | 
6 | 
7 | })();
8 | 
9 | 


--------------------------------------------------------------------------------
/app.service.auth.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 | 
 4 |     function main() {
 5 | 
 6 |         return {
 7 |             getAccessToken: function () {
 8 |                 return localStorage.getItem('access_token');
 9 |             },
10 |             redirectToOauth: function () {
11 |                 var client_id = 'f2a8860f24b57b1359af88f83b925ceef95f47a139b42e3abd08f87fe8b97830';
12 |                 var redirect_uri = encodeURI('http://gitlabreports.cosango.com/callback.html');
13 |                 var authorize_url = "https://gitlab.com/oauth/authorize?&client_id=" + client_id + "&redirect_uri=" + redirect_uri + "&scope=api&response_type=token&state=1";
14 |                 location.href = authorize_url;
15 |             }
16 | 
17 |         };
18 |     }
19 | 
20 |     angular.module('GitLabReportApp').service('auth', main);
21 | 
22 | })();
23 | 
24 | 


--------------------------------------------------------------------------------
/callback.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <script>
 5 |         function getParameterByName(name) {
 6 |             var queryString = location.hash.substring(1);
 7 |             var params = {};
 8 |             var regex = /([^&=]+)=([^&]*)/g, m;
 9 |             while (m = regex.exec(queryString)) {
10 |                 params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
11 |             }
12 |             return params['access_token'];
13 |         }
14 | 
15 |         var access_token = getParameterByName('access_token');
16 |         console.log('access_token', access_token);
17 | 
18 |         if (typeof(access_token) !== 'undefined' && access_token !== null && access_token !== '') {
19 |             localStorage.setItem('access_token', access_token);
20 |             location.href = '/';
21 |         }
22 |     </script>
23 | </head>
24 | </html>
25 | 
26 | 


--------------------------------------------------------------------------------
/custom.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 | 
 3 |     $(".togglefilters").click(function(){
 4 |     $(".sidenavfilter").toggleClass("togglefiltershow");
 5 | });
 6 |     $(".filterbtn").click(function(){
 7 |     $(".sidenavfilter").toggleClass("togglefiltershow");
 8 | });
 9 | }); 
10 | 


--------------------------------------------------------------------------------
/favico.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosango/gitlabreports/2aa8a33b5adfa5a3716e5f1f6ba1bd774d4d0962/favico.ico


--------------------------------------------------------------------------------
/gr-loaders.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosango/gitlabreports/2aa8a33b5adfa5a3716e5f1f6ba1bd774d4d0962/gr-loaders.gif


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosango/gitlabreports/2aa8a33b5adfa5a3716e5f1f6ba1bd774d4d0962/img/logo.png


--------------------------------------------------------------------------------
/img/logo_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosango/gitlabreports/2aa8a33b5adfa5a3716e5f1f6ba1bd774d4d0962/img/logo_dark.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" ng-app="GitLabReportApp">
  3 | <head>
  4 |     <title>GitLab Project Reports, Milestone Reports, Time Tracking Reports</title>
  5 |     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="shortcut icon" href="favico.ico" type="image/vnd.microsoft.icon" />    
  8 |     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
  9 |     <link rel='stylesheet'
 10 |           href='//fonts.googleapis.com/icon?family=Material+Icons|Roboto+Condensed:400,700|Source+Sans+Pro:300,400,600,700,900'>
 11 |     <link rel='stylesheet' href='//fontawesome.io/assets/font-awesome/css/font-awesome.css'>
 12 |     <link rel='stylesheet' href='style.css'>
 13 |     <script src="//code.jquery.com/jquery-latest.min.js"></script>
 14 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 15 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
 16 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
 17 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
 18 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.min.js"></script>
 19 |     <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
 20 |     <script src="app.js"></script>
 21 |     <script src="app.service.auth.js"></script>
 22 |     <script src="app.factory.gitlab.js"></script>
 23 |     <script src="app.controller.splash.js"></script>
 24 |     <script src="app.controller.toolbar.js"></script>
 25 |     <script src="app.controller.table.js"></script>
 26 |     <script src="app.controller.filter.js"></script>
 27 |     </head>
 28 | <body>
 29 | 
 30 | <div ng-controller="SplashController" id="loader">
 31 |     <div class="loader">
 32 |         <img src="gr-loaders.gif">
 33 |         <p>
 34 |             GITLAB<b>REPORTS</b></br></br>
 35 |             <span ng-show="authRequired">You will be redirected to <b>GitLab Sign-in</b> page.</span>
 36 |         </p>
 37 |     </div>
 38 | </div>
 39 | <md-content ng-cloak class="gitlab-reports-container">
 40 |     <md-toolbar ng-controller="ToolbarController" layout="row"
 41 |                 class="md-toolbar-tools md-scroll-shrink md-whiteframe-4dp gr-header hide-print">
 42 |         <h1 class="gr-logo">
 43 |             <div class="material-icons logoicon">beenhere</div>
 44 |             <a href="/" title="GitLab Reports Generator">GITLAB<em>REPORTS</em></a>
 45 |             <span><i>by</i> <a href="http://cosango.com" title="cosango.com">COSANGO.com</a></span>
 46 |         </h1>
 47 |         <div flex></div>
 48 |         <md-button class="md-icon-button downloadpdf" aria-label="Download"  onclick="javascript:window.print()">
 49 |             <md-tooltip md-direction="bottom">Print</md-tooltip>
 50 |             <i class="material-icons">print</i>
 51 |         </md-button>
 52 |         <md-button class="md-icon-button downloadpdf" aria-label="Download">
 53 |             <md-tooltip md-direction="bottom">PDF Download</md-tooltip>
 54 |             <i class="material-icons">file_download</i>
 55 |         </md-button>
 56 |         <md-button class="md-icon-button" aria-label="Logout" ng-click="logout()">
 57 |             <md-tooltip md-direction="bottom">Log Out</md-tooltip>
 58 |             <md-icon>exit_to_app</md-icon>
 59 |         </md-button>
 60 |         <md-button class="md-icon-button togglefilters" aria-label="Filters" ng-click="toggleRightSidenav()">
 61 |             <md-tooltip md-direction="bottom">Filters</md-tooltip>
 62 |             <md-icon>tune</md-icon>
 63 |         </md-button>
 64 |     </md-toolbar>
 65 |     <div class="hide-screen" ng-show="show_logo_print">
 66 |         <img src="img/logo.png" alt="Cosango" class="print_spacer">
 67 |     </div>
 68 | 
 69 |     <md-content flex layout="row" id="reportresult">
 70 |         <div class="tablecontent" ng-controller="TableController">
 71 |             <div ng-show="issues" class="totaltimevalue">
 72 |                 <md-content flex id="content" layout="column">
 73 |                     <ul>
 74 |                         <li ng-show="show_comulative_time_estimate" class="totaltimevaluetd">
 75 |                             Total Time Estimate
 76 |                         </li>
 77 |                         <li ng-show="show_comulative_time_estimate">
 78 |                             {{ comulative_time_estimate/3600 | number:0 }}h
 79 |                         </li>
 80 |                         <li ng-show="show_comulative_time_spent" class="totaltimevaluetd">
 81 |                             Total Time Spent
 82 |                         </li>
 83 |                         <li ng-show="show_comulative_time_spent">
 84 |                             {{ comulative_time_spent/3600 | number:0 }}h
 85 |                         </li>
 86 |                     </ul>
 87 |                 </md-content>
 88 |             </div>
 89 |             <div ng-hide="issues" class="hide-print">
 90 |                 Select a project from right.
 91 |             </div>
 92 | 
 93 |             <table ng-show="issues" class="res-table" id="table">
 94 |                 <thead>
 95 |                 <tr>
 96 |                     <th ng-show="$root.table_columns.indexOf('srno') >= 0">No</th>
 97 |                     <th ng-show="$root.table_columns.indexOf('iid') >= 0">ID</th>
 98 |                     <th ng-show="$root.table_columns.indexOf('title') >= 0">
 99 |                         <i class="material-icons md-18">short_text</i>
100 |                         Title
101 |                     </th>
102 |                     <th ng-show="$root.table_columns.indexOf('created_at') >= 0">
103 |                         <i class="material-icons md-18">date_range</i>
104 |                         Date
105 |                     </th>
106 |                     <th ng-show="$root.table_columns.indexOf('author') >= 0">
107 |                         Author
108 |                     </th>
109 |                     <th ng-show="$root.table_columns.indexOf('assignee') >= 0">
110 |                         Assignee
111 |                     </th>
112 |                     <th ng-show="$root.table_columns.indexOf('time_estimate') >= 0" class="timeestimtetd">
113 |                         <i class="material-icons md-18">access_time</i>
114 |                         Time Estimate
115 |                     </th>
116 |                     <th ng-show="$root.table_columns.indexOf('total_time_spent') >= 0">
117 |                         <i class="material-icons md-18">slow_motion_video</i>
118 |                         Time Spent
119 |                     </th>
120 |                 </tr>
121 |                 </thead>
122 |                 <tbody>
123 |                 <tr ng-repeat="issue in issues">
124 |                     <td data-th="No." ng-show="$root.table_columns.indexOf('srno') >= 0" data-title="serialno">
125 |                         {{ $index + 1 }}
126 |                     </td>
127 |                     <td data-th="ID" ng-show="$root.table_columns.indexOf('iid') >= 0" data-title="useriid">
128 |                         <a href="{{ issue.web_url }}" target="_blank">{{ issue.iid }}</a>
129 |                     </td>
130 |                     <td data-th="Title" ng-show="$root.table_columns.indexOf('title') >= 0" data-title="tasktitle">
131 |                         {{ issue.title }}
132 |                     </td>
133 |                     <td data-th="Date" ng-show="$root.table_columns.indexOf('created_at') >= 0"
134 |                         data-title="taskcreated">
135 |                         {{ issue.created_at | date:'yyyy-MM-dd' }}
136 |                     </td>
137 |                     <td data-th="Author" ng-show="$root.table_columns.indexOf('author') >= 0">
138 |                         {{ issue.author.name }}
139 |                     </td>
140 |                     <td data-th="Assignee" ng-show="$root.table_columns.indexOf('assignee') >= 0">
141 |                         {{ issue.assignee.name }}
142 |                     </td>
143 |                     <td data-th="Time Estimate" ng-show="$root.table_columns.indexOf('time_estimate') >= 0"
144 |                         ng-init="stats = getIssuesTimeStats(issue.project_id, issue.iid)" data-title="taskestimate">
145 |                         <span ng-hide="stats.time_estimate">Unspecified</span>
146 |                         <span ng-show="stats.time_estimate">{{ stats.human_time_estimate }}</span>
147 |                     </td>
148 |                     <td data-th="Time Spent" ng-show="$root.table_columns.indexOf('total_time_spent') >= 0"
149 |                         date-title="timespent">
150 |                         <span ng-hide="stats.total_time_spent">Unspecified</span>
151 |                         <span ng-show="stats.total_time_spent">{{ stats.human_total_time_spent }}</span>
152 |                     </td>
153 |                 </tr>
154 |                 </tbody>
155 |             </table>
156 | 
157 | 
158 |         </div>
159 | 
160 | 
161 |         <md-sidenav class="md-whiteframe-1dp sidenavfilter hide-print" -md-is-locked-open="$mdMedia('gt-sm')" md-is-locked-open="true"
162 |                     md-component-id="right">
163 | 
164 |             <div class="sidespacer">
165 |                 <h4 class="orangetext">Filters</h4>
166 |                 <section class="ac-container">
167 |                     <div class="ac-head">
168 |                         <input id="ac-1" name="accordion-1" type="checkbox" checked/>
169 |                         <label for="ac-1">
170 |                             <h3>Generate Reports <span class="fr"><md-icon>arrow_down</md-icon></span></h3>
171 |                         </label>
172 |                         <div class="ac-small">
173 | 
174 |                             <div layout="column">
175 |                                 <div ng-controller="FilterController">
176 |                                     <div flex>
177 |                                         <md-select ng-model="project" placeholder="Project" requried>
178 |                                             <md-option ng-value="p" ng-repeat="p in projects">{{ p.name }}</md-option>
179 |                                         </md-select>
180 |                                     </div>
181 |                                     <div flex ng-show="project_milestones.length">
182 |                                         <md-select ng-model="milestone" placeholder="Milestone">
183 |                                             <md-option ng-value="m" ng-repeat="m in project_milestones">{{ m.title }}
184 |                                             </md-option>
185 |                                         </md-select>
186 |                                     </div>
187 |                                     <div flex ng-show="project_labels.length">
188 |                                         <md-select ng-model="labels" placeholder="Labels" multiple>
189 |                                             <md-option ng-value="l" ng-repeat="l in project_labels">{{ l.name }}
190 |                                             </md-option>
191 |                                         </md-select>
192 |                                     </div>
193 |                                     <div flex ng-show="project">
194 |                                         <md-select ng-model="state" placeholder="State">
195 |                                             <md-option value="opened">Opened</md-option>
196 |                                             <md-option value="closed">Closed</md-option>
197 |                                         </md-select>
198 |                                     </div>
199 |                                     <md-button class="md-raised md-primary filterbtn" ng-click="applyFilter()" aria-label="Apply Filters" ng-disabled="!project">
200 |                                         <md-icon>filter_list</md-icon>
201 |                                         Apply Filters
202 |                                     </md-button>
203 |                                     <div flex>
204 |                                         <div class="clearfix">&nbsp;</div>
205 |                                         <h3>Columns</h3>
206 |                                         <md-select ng-model="$root.table_columns" placeholder="Columns" multiple>
207 |                                             <md-option ng-value="'srno'">Sr. No.</md-option>
208 |                                             <md-option ng-value="'iid'">ID</md-option>
209 |                                             <md-option ng-value="'title'">Title</md-option>
210 |                                             <md-option ng-value="'created_at'">Date</md-option>
211 |                                             <md-option ng-value="'author'">Author</md-option>
212 |                                             <md-option ng-value="'assignee'">Assignee</md-option>
213 |                                             <md-option ng-value="'time_estimate'">Time Estimate</md-option>
214 |                                             <md-option ng-value="'total_time_spent'">Time Spent</md-option>
215 |                                         </md-select>
216 |                                     </div>
217 | 
218 |                                     <md-switch ng-model="$root.show_comulative_time_estimate"
219 |                                                aria-label="Show total time estimate">
220 |                                         Total Estimate Time
221 |                                     </md-switch>
222 |                                     <md-switch ng-model="$root.show_comulative_time_spent"
223 |                                                aria-label="Show total time spent">
224 |                                         Total Time Spent
225 |                                     </md-switch>    
226 |                                     <md-switch ng-model="$root.show_logo_print"
227 |                                     aria-label="Show logo on Print">
228 |                              Show Logo on Print
229 |                          </md-switch>                                    
230 |                                 </div>
231 |                             </div>
232 |                         </div>
233 |                     </div>
234 |                 </section>
235 |             </div>
236 |         </md-sidenav>
237 |     </md-content>
238 | </md-content>
239 | 
240 | 
241 | <footer class="footer hide-print" id="colophon" role="contentinfo">
242 |     <div class="footercontent">
243 |         <div class="tl fl footerlogo">
244 |             <a href="http://cosango.com/"><img class="footer-logo" src="img/logo_dark.png"
245 |                  alt="Cosango"></a>
246 |         </div>
247 |         <div class="social-icons fr">
248 |             <ul>
249 |                 <li><a class="animate" href="https://www.facebook.com/cosango"><i class="fa fa-facebook"></i></a></li>
250 |                 <li><a class="animate" href="https://twitter.com/cosangodotcom"><i class="fa fa-twitter"></i></a></li>
251 |                 <li><a class="animate" href="https://www.pinterest.com/cosangodotcom"><i
252 |                         class="fa fa-pinterest"></i></a></li>
253 |                 <li><a class="animate" href="https://www.linkedin.com/company/cosango"><i
254 |                         class="fa fa-linkedin"></i></a></li>
255 |                 <li><a class="animate" href="https://plus.google.com/104221792987400160410"><i
256 |                         class="fa fa-google-plus"></i></a></li>
257 |             </ul>
258 |         </div>
259 |         <p class="uppercase semibold copyright">
260 |             Copyright &copy; 2017
261 |             <a href="http://cosango.com/">COSANGO.com</a>
262 |         </p>
263 |     </div>
264 | </footer>
265 | <script src="custom.js"></script>
266 | <!-- Download PDF file Courtesy "MrRio jsPDF" -->    
267 | </body>
268 | </html>
269 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body, html {
  2 |     height: 100%
  3 | }
  4 | 
  5 | body {
  6 |     font-family: Lato, sans-serif
  7 | }
  8 | 
  9 | @media screen {
 10 |     .hide-screen {
 11 |         display: none;
 12 |     }
 13 | }
 14 | 
 15 | @media print {
 16 | 
 17 |    @page {
 18 |     size: landscape;
 19 | }
 20 |     .hide-print {
 21 |         display: none;
 22 |     }
 23 |     .print_spacer{ margin-top:35px}
 24 | }
 25 | 
 26 | #loader {
 27 |     position: fixed;
 28 |     top: 0;
 29 |     left: 0;
 30 |     height: 100%;
 31 |     width: 100%;
 32 |     background: #fff;
 33 |     z-index: 9999;
 34 |     opacity: 1;
 35 | }
 36 | 
 37 | .loader {
 38 |     position: absolute;
 39 |     width: 250px;
 40 |     margin: 0 auto;
 41 |     top: 50%;
 42 |     left: 0px;
 43 |     margin-top: -60px;
 44 |     right: 0px;
 45 |     text-align: center
 46 | }
 47 | 
 48 | .loader p {
 49 |     margin: 10px 0;
 50 | }
 51 | 
 52 | .loader p b {
 53 |     font-weight: 700;
 54 | }
 55 | 
 56 | .loader p span {
 57 |     font-size: 12px;
 58 | }
 59 | 
 60 | .gr-logo span a, footer p a {
 61 |     text-decoration: none !important
 62 | }
 63 | 
 64 | .gr-header {
 65 |     background: #f58220 !important;
 66 |     box-shadow: none
 67 | }
 68 | 
 69 | .gr-logo {
 70 |     font-size: 26px !important;
 71 |     font-weight: 400 !important;
 72 |     font-style: normal;
 73 |     text-align: right;
 74 |     color: #171818;
 75 |     margin-bottom: 10px !important;
 76 |     font-family: 'Source Sans Pro', sans-serif
 77 | }
 78 | 
 79 | div.logoicon {
 80 |     color: #FFF;
 81 |     margin: 0;
 82 |     display: inline-block;
 83 |     font-size: 18px
 84 | }
 85 | 
 86 | .gr-logo em {
 87 |     font-weight: 700 !important;
 88 |     font-style: normal;
 89 |     color: #FEFEFE
 90 | }
 91 | 
 92 | .gr-logo span {
 93 |     clear: both;
 94 |     display: block;
 95 |     color: #171818;
 96 |     line-height: 0
 97 | }
 98 | 
 99 | .gr-logo i {
100 |     font-size: 12px !important;
101 |     font-weight: 400 !important;
102 |     font-style: normal !important
103 | }
104 | 
105 | .gr-logo span a {
106 |     font-size: 12px !important;
107 |     font-weight: 700 !important;
108 |     font-style: normal
109 | }
110 | 
111 | a:hover {
112 |     opacity: .9
113 | }
114 | 
115 | .tokeninput .flex-gt-sm {
116 |     display: flex !important;
117 |     margin: 10px 0 0 !important
118 | }
119 | 
120 | .tokeninput input {
121 |     color: #FEFEFE;
122 |     border-color: #FFF !important
123 | }
124 | 
125 | .tokeninput label {
126 |     color: #efefef !important
127 | }
128 | 
129 | md-select {
130 |     margin: 5px 0 !important;
131 |     color: #666;
132 |     width: 100%;
133 | }
134 | 
135 | .sidespacer {
136 |     display: block;
137 |     padding: 0px 10px !important
138 | }
139 | 
140 | .sidespacer h3 {
141 |     margin: 0 !important;
142 |     font-weight: 700;
143 |     font-size: 14px;
144 |     color: #666666;
145 | }
146 | 
147 | .sidespacer h3:hover {
148 |     color: #171818;
149 | }
150 | 
151 | .sidespacer h3 span .material-icons {
152 |     color: #f58220 !important
153 | }
154 | 
155 | footer p a, footer ul li a {
156 |     color: #FFF;
157 |     transition: .3s all ease-in-out
158 | }
159 | 
160 | .sidespacer h5 {
161 |     text-transform: uppercase;
162 |     margin-bottom: 5px
163 | }
164 | 
165 | md-input-container input {
166 |     color: #666;
167 |     border-color: #ddd !important
168 | }
169 | .tablecontent table th,.tablecontent table td{
170 | 	border:1px solid #DDDDDD
171 | }
172 | .tablecontent table, .tablecontent table td, .tablecontent table th {
173 |     border-collapse: collapse
174 | }
175 | 
176 | md-input-container label {
177 |     color: #666 !important
178 | }
179 | 
180 | .sidespacer .md-errors-spacer {
181 |     display: none !important
182 | }
183 | 
184 | .sidespacer md-input-container {
185 |     margin: 0 !important
186 | }
187 | 
188 | .sidespacer .md-button {
189 |     margin: 6px 0px;
190 |     font-size: 11px;
191 | }
192 | 
193 | md-sidenav {
194 |     min-height: 90vh
195 | }
196 | 
197 | .tablecontent {
198 |     padding: 15px 15px 100px;
199 |     width: 100%;
200 |     text-align: left
201 | }
202 | 
203 | .tablecontent table {
204 |     width: 100%
205 | }
206 | 
207 | .tablecontent table tbody tr:hover td {
208 |     background: #dddddd !important;
209 | }
210 | 
211 | .tablecontent table th {
212 |     /*    width: 20%;*/
213 |     font-weight: 700;
214 |     background: #efefef;
215 |     padding: 10px;
216 |     font-size: 14px
217 | }
218 | 
219 | .tablecontent table th:nth-child(1), .tablecontent table td:nth-child(1), .tablecontent table th:nth-child(2), .tablecontent table td:nth-child(2) {
220 |     max-width: 6% !important;
221 |     width: 6% !important;
222 |     text-align: center
223 | }
224 | 
225 | .tablecontent table th:nth-child(3) {
226 |     max-width: 28% !important;
227 |     width: 34% !important;
228 | }
229 | 
230 | .tablecontent table td {
231 |     font-weight: 400;
232 |     background: #FFF;
233 |     padding: 5px 10px;
234 |     font-size: 13px;
235 |     line-height: 20px;
236 | }
237 | 
238 | .tablecontent table td a {
239 |     color: #000000;
240 | }
241 | 
242 | .tablecontent table th i {
243 |     vertical-align: middle
244 | }
245 | 
246 | .layout-align-start-stretch button {
247 |     text-align: left !important
248 | }
249 | 
250 | footer {
251 |     position: fixed;
252 |     bottom: 0;
253 |     z-index: 99;
254 |     width: 100%;
255 |     background: #252528;
256 |     padding: 10px 0;
257 |     margin-top: 00px
258 | }
259 | 
260 | footer .footercontent {
261 |     display: table;
262 |     margin: 0 auto;
263 |     width: 100%;
264 |     padding: 0 10px;
265 |     box-sizing: border-box
266 | }
267 | 
268 | footer img {
269 |     width: 100px
270 | }
271 | 
272 | footer p {
273 |     display: table;
274 |     text-align: center;
275 |     color: #FFF !important;
276 |     margin: 5px auto;
277 |     padding: 0;
278 |     font-size: 12px
279 | }
280 | 
281 | footer ul {
282 |     list-style-type: none;
283 |     display: table;
284 |     margin: 5px 0 0
285 | }
286 | 
287 | footer ul li {
288 |     list-style-type: none;
289 |     float: left;
290 |     margin: 0 5px
291 | }
292 | 
293 | footer a:hover {
294 |     color: #f58220 !important;
295 |     transition: .3s all ease-in-out
296 | }
297 | 
298 | .tl {
299 |     text-align: left !important
300 | }
301 | 
302 | .tr {
303 |     text-align: right !important
304 | }
305 | 
306 | .tc {
307 |     text-align: center !important
308 | }
309 | 
310 | .fl {
311 |     float: left !important
312 | }
313 | 
314 | .fn {
315 |     float: none !important
316 | }
317 | 
318 | .fr {
319 |     float: right !important
320 | }
321 | 
322 | .md-input-focused label {
323 |     opacity: 0 !important
324 | }
325 | 
326 | .gitlab-report-container {
327 |     padding-bottom: 70px;
328 |     display: table;
329 |     width: 100%;
330 | }
331 | 
332 | md-sidenav {
333 |     overflow: hidden
334 | }
335 | 
336 | md-option {
337 |     max-height: 36px !important;
338 |     font-size: 14px !important
339 | }
340 | 
341 | md-option span {
342 |     font-size: 14px !important
343 | }
344 | 
345 | .orangetext {
346 |     color: #f58220 !important
347 | }
348 | 
349 | h5, h4 {
350 |     margin-bottom: 0px
351 | }
352 | 
353 | /*Accordion*/
354 | .ac-containera {
355 |     min-height: 100vh
356 | }
357 | 
358 | .ac-head {
359 |     border-bottom: 1px dashed #eee;
360 |     padding: 5px 0;
361 | }
362 | 
363 | .ac-container label {
364 |     position: relative;
365 |     z-index: 20;
366 |     display: block;
367 |     height: 30px;
368 |     cursor: pointer;
369 |     color: #777;
370 |     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
371 |     line-height: 33px;
372 |     font-size: 19px
373 | }
374 | 
375 | .ac-container input:checked + label,
376 | .ac-container input:checked + label:hover {
377 | / / background: #c6e1ec;
378 |     color: #3d7489;
379 |     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
380 | / / box-shadow: 0 px 0 px 0 px 1 px rgba(155, 155, 155, 0.3),
381 | 0 px 2 px 2 px rgba(0, 0, 0, 0.1);
382 | }
383 | 
384 | .ac-container label:after
385 |     /*.ac-container input:checked + label:after*/
386 | {
387 |     content: '';
388 |     position: absolute;
389 |     width: 24px;
390 |     height: 24px;
391 |     right: 0px;
392 |     top: 7px;
393 |     /*background: transparent url(arrow_down.png) no-repeat center center;*/
394 | }
395 | 
396 | /*.ac-container input:checked + label:after {
397 |     background-image: url(arrow_up.png);
398 | }*/
399 | 
400 | .ac-container input {
401 |     display: none;
402 | }
403 | 
404 | .ac-container .ac-small {
405 |     background: rgba(255, 255, 255, 0.5);
406 |     margin-top: -1px;
407 |     overflow: hidden;
408 |     height: 0px;
409 |     position: relative;
410 |     z-index: 10;
411 |     width: 100%;
412 |     transition: height 0.3s ease-in-out,
413 |     box-shadow 0.6s linear;
414 | }
415 | 
416 | .ac-container input:checked ~ .ac-small {
417 |     transition: height 0.5s ease-in-out;
418 | }
419 | 
420 | .ac-container .ac-small p {
421 |     font-style: italic;
422 |     color: #777;
423 |     line-height: 23px;
424 |     font-size: 14px;
425 |     padding: 20px;
426 |     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
427 | }
428 | 
429 | .ac-container input:checked ~ .ac-small.ac-small {
430 |     height: auto;
431 | }
432 | 
433 | .ac-container input:checked ~ .ac-small.ac-medium {
434 |     height: 180px;
435 | }
436 | 
437 | .ac-container input:checked ~ .ac-small.ac-large {
438 |     height: 230px;
439 | }
440 | 
441 | body::-webkit-scrollbar {
442 |     width: .3em;
443 | }
444 | 
445 | body::-webkit-scrollbar-track {
446 |     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
447 | }
448 | 
449 | body::-webkit-scrollbar-thumb {
450 |     background-color: darkgrey;
451 |     outline: 1px solid slategrey;
452 | }
453 | 
454 | .sidespacer {
455 |     min-height: 100vh
456 | }
457 | 
458 | .totaltimevalue {
459 |     display: table;
460 |     max-width: 100%;
461 |     margin-bottom: 20px;
462 |     float: right;
463 |     width: 100%;
464 |     margin-top: 10px;
465 | }
466 | 
467 | .totaltimevalue ul {
468 |     padding: 0;
469 |     margin: 0;
470 |     list-style-type: none;
471 | }
472 | 
473 | .totaltimevalue ul li {
474 |     float: left;
475 |     width: 50%;
476 |     padding: 10px;
477 |     text-align: right;
478 |     border-width: 0px;
479 |     border-style: solid;
480 |     border-color: #ccc;
481 |     border-collapse: collapse;
482 |     font-size: 14px;
483 |     background: #bdc3c7;
484 |     min-height:18px;
485 |     color: #FFFFFF;
486 |     box-sizing: border-box;
487 |     margin: 0;
488 |     font-weight:bold;
489 | }
490 | 
491 | .totaltimevalue ul li.totaltimevaluetd {
492 |     text-align: left;
493 |     font-weight: bold;
494 | 
495 | }
496 | 
497 | .totaltimevalue ul li:first-child,
498 | .totaltimevalue ul li:first-child +li{
499 |     background:#ecf0f1;
500 |     color: #bdc3c7;
501 | }        
502 | 
503 | 
504 | md-switch.md-default-theme.md-checked .md-thumb, md-switch.md-checked .md-thumb{
505 | 	background:#f58220;	
506 | }
507 | md-switch.md-default-theme.md-checked .md-bar, md-switch.md-checked .md-bar{
508 | 	background:rgba(245,130,32,0.5)
509 | }
510 | /*CardBox*/
511 | .cardbox {
512 | 	display: inline-block;
513 |     float: left;
514 |     background: #FFFFFF;
515 |     padding: 8px;
516 |     position: relative;
517 |     box-shadow: 0 10px 10px -10px #ccc;
518 | 	margin:10px;
519 | 	transition:300ms all ease-in-out;
520 | 	border:1px solid #ffffff;
521 | 	box-sizing:border-box;
522 | }
523 | .cardbox:hover{
524 | 	box-shadow: 0 10px 15px -10px #aaa;
525 | 	background:#fefefe;
526 | 	transition:300ms all ease-in-out;
527 | 	border:1px solid #efefef;
528 | }
529 | .cardtitle{
530 | 	font-size: 14px;
531 |     font-weight: bold;
532 |     padding: 0 30px 10px 0;
533 |     width: 199px;
534 |     height: 50px;
535 | 	}
536 | .cardtitle a{ color:#f58220!important}
537 | .cardiid{position: absolute;
538 |     right: 0;
539 |     top: 0;
540 |     background: #f58220!important;
541 |     padding: 5px;
542 |     font-size: 13px;
543 |     color: #FFFFFF;
544 | }
545 | .cardtimedate{
546 |     font-size: 13px;
547 | }
548 | .cardtimedate i{
549 |     font-size: 16px!important;
550 |     vertical-align: bottom!important;
551 | }
552 | .cardtimedate .cardspent, .cardtimedate .cardest, .cardtimedate .carddate{
553 | 	padding:3px 0;}
554 | 
555 | /*Responsive Table */
556 | .res-table tr {
557 |   border-top: 0px solid #ddd;
558 |   border-bottom: 0px solid #ddd;
559 | }
560 | .res-table th {
561 |   display: none;
562 | }
563 | .res-table td {
564 |   display: block;
565 | }
566 | .res-table td:first-child {
567 |   padding-top: .5em;
568 | }
569 | .res-table td:last-child {
570 |   padding-bottom: .5em;
571 | }
572 | .res-table td:before {
573 | 	content: attr(data-th) ": ";
574 |     font-weight: bolder;
575 |     width: 100px;
576 |     display: inline;
577 |     padding: 5px 0;
578 |     font-size: 14px;
579 | }
580 | button.togglefilters{ display: none;}  
581 | 	
582 | @media (min-width: 480px) {
583 |   .res-table td:before {
584 |     display: none;
585 |   }
586 | }
587 | .res-table th, .res-table td {
588 |   text-align: left;
589 | }
590 | @media (min-width: 480px) {
591 | 
592 |   .res-table th, .res-table td {
593 |     display: table-cell;
594 |     padding: .25em .5em;
595 |   }
596 |   .res-table th:first-child, .res-table td:first-child {
597 |     padding-left: 0;
598 |   }
599 |   .res-table th:last-child, .res-table td:last-child {
600 |     padding-right: 0;
601 |   }
602 | }
603 | @media (max-width: 640px) {
604 | .tablecontent table th:nth-child(1), .tablecontent table td:nth-child(1), .tablecontent table th:nth-child(2), .tablecontent table td:nth-child(2){
605 | 	max-width: 100% !important;
606 |     width: 100% !important;
607 |     text-align: left!important;
608 |     box-sizing: border-box!important;
609 | }	
610 | .tablecontent table tbody tr:hover td {
611 |     background: #FFFFFF!important;
612 | }
613 | .res-table tr {
614 |     margin: 0px 0 15px;
615 |     display: block;
616 |     width: 100%;
617 | }
618 | .res-table th, .res-table td {
619 |     padding: .25em .5em!important;
620 |   }
621 | .res-table td:nth-child(1){
622 | background:#f58220; color:#FFFFFF}  
623 | }
624 | .tablecontent table tbody tr:hover td:nth-child(1){
625 | background:#f58220!important; color:#FFFFFF!important}
626 | .res-table td:nth-child(1):before{
627 |     width: 35px;
628 | }
629 | }
630 | 
631 | 	
632 | 	
633 | @media(max-width: 480px) {
634 | 	.logoicon{display:none!important}
635 | .gr-logo{
636 |     font-size: 18px!important;
637 | }
638 | .cardtitle {
639 |     width: inherit!important;
640 |     height: inherit!important;
641 | }
642 | }
643 | 
644 | @media(max-width: 640px) {
645 | 	.cardbox{
646 | 		width:100%;
647 | 		min-width:100%;
648 | 	}
649 | }
650 | @media (max-width: 968px) {
651 | 	md-content{ overflow:inherit;}
652 | 	.tablecontent {
653 |     padding-bottom:80px!important;
654 | }
655 | 	footer{ padding:15px 0;}
656 | 	.footercontent p.uppercase.semibold{ margin;0 auto 0px!important}
657 | 	footer ul {margin:0!important; padding:0!important}
658 | 	md-sidenav{position:absolute!important; right:0;     left: inherit;min-height: 100vh!important;}
659 | 	
660 |     .tablecontent table th i {
661 |         display: none !important
662 |     }
663 | 
664 | /*    .footercontent .tl.fl, .footercontent .social-icons, .footercontent p.uppercase.semibold {
665 |         display: table;
666 |         margin: 0 auto 10px;
667 |         float: none !important;
668 |         text-align: center;
669 |     }
670 | */
671 |     .tokeninput {
672 |         display: none !important
673 |     }
674 | }
675 | 
676 | @media (max-width:872px){
677 | .tablecontent {box-sizing: border-box;}
678 |     md-sidenav{ display: none!important;}
679 |     .sidenavfilter.togglefiltershow{display: block!important;transform: none!important;}
680 |     button.togglefilters{ display: block!important;}  
681 | }
682 | 
683 | @media (max-width:568px){
684 | h1.gr-logo{font-size:18px!important}
685 | h1.gr-logo .logoicon{display: none}
686 | .footerlogo{display: none!important}
687 | .copyright{ margin: 0; text-align: left;}
688 | .tablecontent td span.ng-binding{float: right;}
689 | .totaltimevalue{ width: 100%!important; margin-bottom: 0!important}
690 | .totaltimevalue ul li{ font-size: 13px!important;}
691 | }
692 | .startup{
693 |     width: 200px;height: 200px;border-radius:100%;position: fixed;z-index: 99999;border: 10px solid rgba(0,0,0,.5);top: -120px;right: -80px;box-shadow: 100px 0px 0 100000px rgba(0,0,0,.8);}


--------------------------------------------------------------------------------