From 7e1f70af66e8c5fa31929e33bce23d9e63c705b5 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 9 Jan 2018 17:33:54 +0100
Subject: [PATCH] Consistent tables

---
 .../events/rule-events-page.component.html    | 29 ++++++++-----------
 src/Squidex/app/theme/_lists.scss             | 12 ++++++++
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/Squidex/app/features/rules/pages/events/rule-events-page.component.html b/src/Squidex/app/features/rules/pages/events/rule-events-page.component.html
index d6c8f5f3a..7e07ba4d7 100644
--- a/src/Squidex/app/features/rules/pages/events/rule-events-page.component.html
+++ b/src/Squidex/app/features/rules/pages/events/rule-events-page.component.html
@@ -22,47 +22,42 @@
     <div class="panel-main">
         <div class="panel-content panel-content-scroll">
             <table class="table table-items table-fixed">
-                <colgroup>
-                    <col style="width: 100px" />
-                    <col style="width: 40%" />
-                    <col style="width: 60%" />
-                    <col style="width: 180px" />
-                    <col style="width: 80px" />
-                </colgroup>
-
                 <thead>
                     <tr>
-                        <th>
+                        <th class="cell-label">
                             Status
                         </th>
-                        <th>
+                        <th class="cell-40">
                             Event
                         </th>
-                        <th>
+                        <th class="cell-60">
                             Description
                         </th>
-                        <th>
+                        <th class="cell-time">
                             Created
                         </th>
+                        <th class="cell-options">
+
+                        </th>
                     </tr>
                 </thead>
 
                 <tbody>
                     <ng-template ngFor let-event [ngForOf]="eventsItems">
                         <tr [class.expanded]="selectedEventId === event.id">
-                            <td>
+                            <td class="cell-label">
                                 <span class="badge badge-pill badge-{{getBadgeClass(event.jobResult)}}">{{event.jobResult}}</span>
                             </td>
-                            <td>
+                            <td class="cell-40">
                                 <span class="truncate">{{event.eventName}}</span>
                             </td>
-                            <td>
+                            <td class="cell-60">
                                 <span class="truncate">{{event.description}}</span>
                             </td>
-                            <td>
+                            <td class="cell-time">
                                 <small class="item-modified">{{event.created | sqxFromNow}}</small>
                             </td>
-                            <td>
+                            <td class="cell-options">
                                 <button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="selectedEventId === event.id" (click)="selectEvent(event.id)">
                                     <i class="icon-settings"></i>
                                 </button>
diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss
index a4e689a59..b59ae7ee3 100644
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@@ -181,10 +181,22 @@
 // Cell styles
 //
 .cell {
+    &-40 {
+        width: 40%;
+    }
+
+    &-60 {
+        width: 60%;
+    }
+
     &-select {
         width: 50px;
     }
 
+    &-label {
+        width: 100px;
+    }
+
     &-separator {
         width: 60px;
     }