fix(table): fix cell size / add text-overflow: clip / minimize "type"…

…/"mode"/"interval" column / define first/last cell size
OptimistikSAS · Feb 8, 2024 · 17d97b8 · 17d97b8
1 parent 1fdb104
commit 17d97b8
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 27 deletions.
diff --git a/frontend/src/app/history-query/history-query-items/history-query-items.component.html b/frontend/src/app/history-query/history-query-items/history-query-items.component.html
@@ -60,10 +60,10 @@
       <table class="table table-sm table-hover oib-table">
         <thead class="light">
           <tr>
-            <th *ngIf="!inMemory" style="width: 3%"></th>
+            <th *ngIf="!inMemory"></th>
             <th translate="history-query.items.name"></th>
             <th *ngFor="let setting of displaySettings">{{ setting.label }}</th>
-            <th style="width: 3%"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/app/history-query/history-query-list.component.html b/frontend/src/app/history-query/history-query-list.component.html
@@ -45,11 +45,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="history-query.name" style="width: 10%"></th>
-            <th translate="history-query.interval" style="width: 25%"></th>
-            <th translate="history-query.description" style="width: 60%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="history-query.name"></th>
+            <th translate="history-query.interval" style="width: 22rem"></th>
+            <th translate="history-query.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -58,10 +58,12 @@ <h1 class="oib-title">
               <div [class]="getStatusClass(query.status)"></div>
             </td>
             <td>{{ query.name }}</td>
-            <td class="d-flex">
-              <div>{{ query.startTime | datetime:'ff' }}</div>
-              <div class="fa fa-arrow-right oib-fa-arrow"></div>
-              <div>{{ query.endTime | datetime:'ff' }}</div>
+            <td>
+              <div>
+                {{ query.startTime | datetime:'ff' }}
+                <div class="fa fa-arrow-right oib-fa-arrow"></div>
+                {{ query.endTime | datetime:'ff' }}
+              </div>
             </td>
             <td>{{ query.description }}</td>
             <td class="text-nowrap action-buttons">

diff --git a/frontend/src/app/history-query/history-query-list.component.spec.ts b/frontend/src/app/history-query/history-query-list.component.spec.ts
@@ -73,12 +73,12 @@ describe('HistoryQueryListComponent', () => {
     expect(tester.title).toContainText('History queries');
     expect(tester.historyQueryList.length).toBe(2);
     expect(tester.historyQueryList[0].elements('td')[1]).toContainText(historyQueries[0].name);
-    expect(tester.historyQueryList[0].elements('td')[2]).toContainText('2 Feb 2020, 03:022 Feb 2022, 03:02');
+    expect(tester.historyQueryList[0].elements('td')[2]).toContainText(' 2 Feb 2020, 03:02  2 Feb 2022, 03:02 ');
     expect(tester.historyQueryList[0].elements('td')[3]).toContainText(historyQueries[0].description);
     expect(tester.historyQueryList[0].elements('td')[4].elements('button').length).toBe(2);
     expect(tester.historyQueryList[0].elements('td')[4].elements('a').length).toBe(3);
     expect(tester.historyQueryList[1].elements('td')[1]).toContainText(historyQueries[1].name);
-    expect(tester.historyQueryList[1].elements('td')[2]).toContainText('2 Feb 2020, 03:022 Feb 2022, 03:02');
+    expect(tester.historyQueryList[1].elements('td')[2]).toContainText(' 2 Feb 2020, 03:02  2 Feb 2022, 03:02 ');
     expect(tester.historyQueryList[1].elements('td')[3]).toContainText(historyQueries[1].description);
     expect(tester.historyQueryList[1].elements('td')[4].elements('button').length).toBe(2);
     expect(tester.historyQueryList[1].elements('td')[4].elements('a').length).toBe(3);

diff --git a/frontend/src/app/north/north-list.component.html b/frontend/src/app/north/north-list.component.html
@@ -1,3 +1,6 @@
+<script>
+  $('').tooltip(options);
+</script>
 <div class="oib-padded-container">
   <div class="d-flex">
     <div class="oib-title-container mb-3">
@@ -45,11 +48,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="north.name" style="width: 10%"></th>
-            <th translate="north.type" style="width: 10%"></th>
-            <th translate="north.description" style="width: 70%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="north.name"></th>
+            <th translate="north.type" style="width: 9rem"></th>
+            <th translate="north.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/app/south/south-detail/south-detail.component.html b/frontend/src/app/south/south-detail/south-detail.component.html
@@ -54,7 +54,7 @@ <h1 id="title" translate="south.title" [translateParams]="{ name: southConnector
               <td>{{ southConnector.enabled | enabled }}</td>
             </tr>
             <tr *ngFor="let setting of displayedSettings">
-              <td style="width: 33%">{{ setting.key }}</td>
+              <td>{{ setting.key }}</td>
               <td>{{ setting.value }}</td>
             </tr>
           </tbody>

diff --git a/frontend/src/app/south/south-items/south-items.component.html b/frontend/src/app/south/south-items/south-items.component.html
@@ -60,11 +60,11 @@
       <table class="mb-2 table table-sm table-hover oib-table">
         <thead class="light">
           <tr>
-            <th *ngIf="!inMemory" style="width: 3%"></th>
+            <th *ngIf="!inMemory"></th>
             <th translate="south.items.name"></th>
-            <th *ngIf="!southManifest.items.scanMode.subscriptionOnly" translate="south.items.scan-mode"></th>
+            <th *ngIf="!southManifest.items.scanMode.subscriptionOnly" translate="south.items.scan-mode" style="width: 8rem"></th>
             <th *ngFor="let setting of displaySettings">{{ setting.label }}</th>
-            <th style="width: 3%"></th>
+            <th style="width: 6rem"></th>
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/app/south/south-list.component.html b/frontend/src/app/south/south-list.component.html
@@ -1,3 +1,6 @@
+<script>
+  $('#test').tooltip(options);
+</script>
 <div class="oib-padded-container">
   <div class="d-flex">
     <div class="oib-title-container mb-3">
@@ -45,11 +48,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="south.name" style="width: 10%"></th>
-            <th translate="south.type" style="width: 10%"></th>
-            <th translate="south.description" style="width: 70%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="south.name"></th>
+            <th translate="south.type" style="width: 9rem"></th>
+            <th translate="south.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -208,10 +208,12 @@ img.oib-image-header {
     // first case of the first line
     th:first-child {
       border-top-left-radius: 1rem;
+      width: 3rem;
     }
     // last case of the first line
     th:last-child {
       border-top-right-radius: 1rem;
+      width: 9rem;
     }
     // alternative case if oib-box-title is on top of table
     .light {
@@ -226,6 +228,10 @@ img.oib-image-header {
       vertical-align: middle;
       padding-left: 1rem;
       border-bottom-width: 0;
+      max-width: 0;
+      text-overflow: clip;
+      overflow: hidden;
+      white-space: nowrap;
     }
     // line
     tr {
@@ -247,6 +253,7 @@ img.oib-image-header {
       td:last-child {
         text-align: right;
         padding-right: 1em;
+        overflow: visible;
       }
     }
     // customised colours on the lines (one out of two)