added project detail report (#2651)

- avatars via css only
- random colors for entities
- improves print view
- added colors for teams
- added color to tag

assets/sass/app.scss

@@ -29,3 +29,4 @@
 @import 'forms';
 @import 'modal';
 @import 'progressbar';
+@import 'avatar';

assets/sass/avatar.scss

@@ -0,0 +1,78 @@
+
+$avatar-base-size: 30;
+
+.avatar {
+    text-align: center;
+    background-color: #d2d6de;
+    border-radius: 50%;
+    display: inline-block;
+    height: ($avatar-base-size)+px;
+    width: ($avatar-base-size)+px;
+    vertical-align: middle;
+}
+
+.initials {
+    line-height: 1;
+    position: relative;
+    font-weight: bold;
+    font-size: ($avatar-base-size / 2 - 2)+px;
+    top: ($avatar-base-size / 4 - 1)+px;
+}
+
+.avatar-xs {
+    width: ($avatar-base-size * 0.75)+px;
+    height: ($avatar-base-size * 0.75)+px;
+    .initials {
+        font-size: ($avatar-base-size * .75 / 2 - 2)+px;
+        top: ($avatar-base-size * .75 / 4 - 1)+px;
+    }
+}
+
+.avatar-sm {
+    width: ($avatar-base-size * 1.25)+px;
+    height: ($avatar-base-size * 1.25)+px;
+    .initials {
+        font-size: ($avatar-base-size * 1.25 / 2 - 2)+px;
+        top: ($avatar-base-size * 1.25 / 4 - 1)+px;
+    }
+}
+
+.avatar-md {
+    width: ($avatar-base-size * 1.5)+px;
+    height: ($avatar-base-size * 1.5)+px;
+    .initials {
+        font-size: ($avatar-base-size * 1.5 / 2 - 2)+px;
+        top: ($avatar-base-size * 1.5 / 4 - 1)+px;
+    }
+}
+
+.avatar-lg {
+    width: ($avatar-base-size * 2)+px;
+    height: ($avatar-base-size * 2)+px;
+    .initials {
+        font-size: ($avatar-base-size * 2 / 2 - 2)+px;
+        top: ($avatar-base-size * 2 / 4 - 1)+px;
+    }
+}
+
+.widget-user-image {
+    border-radius: 50%;
+    border: 3px solid #fff;
+    .avatar {
+        width: ($avatar-base-size * 2.75)+px;
+        height: ($avatar-base-size * 2.75)+px;
+        .initials {
+            font-size: ($avatar-base-size * 2.75 / 2 - 2)+px;
+            top: ($avatar-base-size * 2.75 / 4 - 1)+px;
+        }
+    }
+}
+
+/* Detail tables like my teams (Dashboard) or */
+table.dataTable.table > tbody > tr > td {
+    &.avatars {
+        .avatar {
+            margin: 1px;
+        }
+    }
+}

assets/sass/content.scss

@@ -36,23 +36,6 @@ td {
     margin-right: 15px;
 }
 
-/* Profile */
-.avatar-xs {
-    width: 20px;
-    height: 20px;
-}
-.avatar-sm {
-    width: 25px;
-    height: 25px;
-}
-.avatar-md {
-    width: 30px;
-    height: 30px;
-}
-.avatar-lg {
-    width: 40px;
-    height: 40px;
-}
 .box-profile {
     img.img-circle {
         width: 100px;
@@ -64,6 +47,7 @@ td {
 
 .label-gray {
     background-color: $gray-lte;
+    color: #666;
 }
 
 /* Delete link in action dropdowns */
@@ -84,4 +68,14 @@ td.w-min {
 table.dataTable thead > tr > th.hw-min {
     width: 1%;
     white-space: normal;
+}
+
+.badge {
+    font-weight: normal;
+    color: #000;
+    background-color: $kimai-default;
+}
+
+.label {
+    font-weight: normal;
 }

assets/sass/datatable-extensions.scss

@@ -5,9 +5,27 @@
  * file that was distributed with this source code.
  */
 
+
+/* custom extension to make the column wide enough to show the sortable icons */
+table.dataTable th.sortable {
+    padding-left: 22px;
+}
+
+table.dataTable.table > tbody > tr > td {
+    vertical-align: middle;
+    .img-circle {
+        max-width: 30px;
+        margin-right: 0;
+        &.teamlead {
+            box-shadow: 0 0 5px 3px $gray-lte;
+        }
+    }
+}
+
 span.label-color,
 span.label-meta,
 span.label-tag,
+span.label-user,
 span.label-activity,
 span.label-project,
 span.label-customer {
@@ -37,6 +55,9 @@ table.dataTable {
         &.overlapping {
             border-top: 2px dotted red;
         }
+        &.exported {
+            opacity: 0.7;
+        }
     }
     td {
         /*
@@ -48,7 +69,6 @@ table.dataTable {
         }
         .label {
             font-size: 85%;
-            font-weight: 500;
             padding: .3em .6em .3em;
             line-height: 24px;
         }
@@ -69,3 +89,13 @@ table.dataTable {
         }
     }
 }
+
+table.table-hover {
+    tr {
+        &.exported {
+            &:hover {
+                opacity: 1.0;
+            }
+        }
+    }
+}

assets/sass/datatable.scss

@@ -266,22 +266,3 @@ div.dataTables_scrollHead table.table-bordered {
 .table-striped.dataTable tbody tr.active:nth-child(odd) th {
     background-color: #017ebc;
 }
-
-/* custom extension to make the column wide enough to show the sortable icons */
-table.dataTable th.sortable {
-    padding-left: 22px;
-}
-
-table.dataTable.table > tbody > tr > td {
-    &.avatars {
-        line-height: 40px;
-    }    
-    vertical-align: middle;
-    .img-circle {
-        max-width: 35px;
-        margin-right: 10px;
-        &.teamlead {
-            box-shadow: 0 0 5px 3px $gray-lte;
-        }
-    }
-}

assets/sass/navbar.scss

@@ -10,6 +10,14 @@
         max-height: 26px;
         margin-top: -2px;
     }
+    .avatar {
+        max-height: 26px;
+        max-width: 26px;
+        margin-top: -2px;
+        .initials {
+            top: 4px;
+        }
+    }
     li>a.ddt-large {
         padding: 15px 12px 11px 10px;
         font-size: 10px;

assets/sass/print.scss

@@ -6,6 +6,21 @@
  */
 
 @media print{
-    .sf-toolbar, .control-sidebar {display: none !important;}
-    .col-print-12{width:100%;}
+    .sf-toolbar, .control-sidebar {
+        display: none !important;
+    }
+    .col-print-12{
+        width:100%;
+    }
+    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .right-side {
+        margin: 0!important;
+    }
+    section.content {
+        margin: 0;
+        padding: 0;
+    }
+    span i.dot {
+        display: none;
+        margin-right: 0!important;
+    }
 }

assets/sass/variables.scss

@@ -37,6 +37,7 @@ $blue: #0073b7;
 //$maroon: #D81B60;
 //$black: #111;
 $gray-lte: #d2d6de;
+$kimai-default: $gray-lte;
 
 // LAYOUT
 // --------------------------------------------------------