fix(table): change table td padding (#17)

worktile · Jun 3, 2020 · 41d89d9 · 41d89d9
1 parent a66964a
commit 41d89d9
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/example/src/app/examples/examples.component.html b/example/src/app/examples/examples.component.html
@@ -1,7 +1,7 @@
 <div class="content">
   <ngx-gantt start="1514736000" end="1609430400" [items]="items" [groups]="groups" [draggable]="true">
     <ngx-gantt-table>
-      <ngx-gantt-column [width]="200" name="标题">
+      <ngx-gantt-column name="标题" [width]="400">
         <ng-template #cell let-item>
           {{ item.title }}
         </ng-template>

diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html
@@ -25,7 +25,7 @@
                   ></ng-template>
                 </ng-container>
                 <ng-template #default>
-                  <span class="group-title"> {{ group.title }}</span>
+                  <span class="group-title">{{ group.title }}</span>
                 </ng-template>
               </div>
             </td>

diff --git a/packages/gantt/src/components/table/gantt-table.component.scss b/packages/gantt/src/components/table/gantt-table.component.scss
@@ -5,14 +5,13 @@
   .gantt-table-group {
     background: $gantt-group-background-color;
     td {
-      &::after {
-        background: transparent;
-      }
+      padding: 0 10px !important;
     }
     .gantt-table-group-title {
       cursor: pointer;
       .expand-icon {
         color: #aaa;
+        margin-right: 6px;
       }
     }
   }
@@ -36,7 +35,12 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        max-width: 150px;
+        min-width: 100px;
 
+        &:first-child {
+          padding: 0 50px;
+        }
         &::before {
           position: absolute;
           top: 0;

diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -23,9 +23,9 @@
     }
 
     .gantt-side-container {
-      // height: calc(100% - #{$gantt-header-height});
       height: 100%;
-      overflow: auto;
+      overflow-y: auto;
+      overflow-x: scroll;
 
       &::-webkit-scrollbar {
         display: none;

diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -8,7 +8,7 @@ $gantt-container-background-color: #fafafa !default;
 $gantt-item-height: 44px !default;
 $gantt-group-background-color: rgba($color: #f3f3f3, $alpha: 0.5) !default;
 $gantt-group-height: 44px !default;
-$gantt-table-td-padding: 0 15px !default;
+$gantt-table-td-padding: 0 20px !default;
 
 // calendar
 $gantt-date-primary-color: #888 !default;