feat: TT-37-show-complete-descriptions-on-hover

Author: JaviMiot

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,9 +1,5 @@
 <div class="row scroll-table mt-5 ml-0">
-  <table
-    class="table table-striped mb-0"
-    datatable
-    [dtTrigger]="dtTrigger"
-    [dtOptions]="dtOptions"
+  <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"
     *ngIf="(reportDataSource$ | async) as dataSource">
     <thead class="thead-blue">
       <tr class="d-flex">
@@ -25,7 +21,7 @@
     </thead>
     <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
     <tbody *ngIf="!dataSource.isLoading">
-      <tr class="d-flex" *ngFor="let entry of dataSource.data">
+      <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
         <td class="hidden-col">{{ entry.id }}</td>
         <td class="col md-col">{{ entry.owner_email }}</td>
         <td class="col sm-col">
@@ -48,15 +44,15 @@
             </a>
           </ng-container>
         </td>
-        <td class="col lg-col">{{ entry.description }}</td>
+        <td class="col lg-col-scroll">{{ entry.description }}</td>
         <td class="col lg-col">
           <ng-container *ngIf="entry.technologies.length > 0">
-              <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
-                  {{ technology }}
-              </div>
+            <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
+              {{ technology }}
+            </div>
           </ng-container>
-      </td>
+        </td>
       </tr>
     </tbody>
   </table>
-</div>
+</div>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -1,30 +1,64 @@
 @import '../../../../../styles/colors.scss';
-.col{
+
+.col {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: small;
 }
-.x-sm-col{
+
+.col-height {
+  min-height: 80px;
+  max-height: 150px;
+}
+
+.x-sm-col {
   width: 5em;
   max-width: 7em;
 }
 
-.sm-col{
+.sm-col {
   width: 6em;
   max-width: 8em;
 }
 
-.md-col{
+.md-col {
   width: 9em;
 }
 
-.lg-col{
+.lg-col {
   width: 12em;
   overflow: hidden;
   white-space: normal;
+  border: none;
+}
+
+.lg-col-scroll {
+  width: 40em;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 8px 10px 0px 10px;
+  border: none;
+  overflow-y: auto;
 }
-.hidden-col{
+
+.lg-col-scroll::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+.lg-col-scroll::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+.lg-col-scroll::-webkit-scrollbar-thumb {
+  background-color: #7a8486;
+  outline: 1px solid #7a8486;
+  border-radius: 0.5em;
+}
+
+.hidden-col {
   display: none;
 }
 
@@ -94,4 +128,4 @@ table.dataTable thead .sorting_desc {
   text-transform: capitalize;
   font-style: italic;
   cursor: pointer;
-}
+}