fix: make summary elements responsive #527

Author: Angeluz-07

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -111,7 +111,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   onSelectedProject(item) {
-    this.projectSelected.emit({'projectId': item.id});
+    this.projectSelected.emit({ projectId : item.id});
     this.entryForm.patchValue(
       {
         project_id: item.id,

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html

@@ -1,20 +1,22 @@
 <h6 class="text-left"><strong>Summary</strong></h6>
 <hr />
-<div class="row pb-4">
-  <div class="col-3">
-    <h6>Current</h6>
-    <h3>{{ currentWorkingTime }}</h3>
-  </div>
-  <div class="col-3">
-    <h6>Day</h6>
-    <h3>{{ timeEntriesSummary?.day | timeDetails }}</h3>
-  </div>
-  <div class="col-3">
-    <h6>Week</h6>
-    <h3>{{ timeEntriesSummary?.week | timeDetails }}</h3>
-  </div>
-  <div class="col-3">
-    <h6>Month</h6>
-    <h3>{{ timeEntriesSummary?.month | timeDetails }}</h3>
+<div class ="container px-0">
+  <div class="row pb-4">
+    <div class="col-12 col-sm-3">
+      <h6>Current</h6>
+      <h3>{{ currentWorkingTime }}</h3>
+    </div>
+    <div class="col-12 col-sm-3">
+      <h6>Day</h6>
+      <h3>{{ timeEntriesSummary?.day | timeDetails }}</h3>
+    </div>
+    <div class="col-12 col-sm-3">
+      <h6>Week</h6>
+      <h3>{{ timeEntriesSummary?.week | timeDetails }}</h3>
+    </div>
+    <div class="col-12 col-sm-3">
+      <h6>Month</h6>
+      <h3>{{ timeEntriesSummary?.month | timeDetails }}</h3>
+    </div>
   </div>
 </div>

src/app/modules/time-entries/pages/time-entries.component.spec.ts

@@ -361,7 +361,7 @@ describe('TimeEntriesComponent', () => {
     state.timeEntriesDataSource.data = [ lastEntry ];
     mockEntriesSelector = store.overrideSelector(getTimeEntriesDataSource, state.timeEntriesDataSource);
 
-    component.projectSelected({'projectId' : 'id'});
+    component.projectSelected({ projectId : 'id'});
     expect(component.entry).toEqual(lastEntry);
   }));