diff options
Diffstat (limited to 'frontend/src/app/_elements/column-table')
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.css | 57 | ||||
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.html | 18 |
2 files changed, 45 insertions, 30 deletions
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 4dfb32ee..fdf69dbc 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -8,9 +8,15 @@ table.fixed { border-radius: 4px; } +#divTable { + height: 100%; + overflow-y: auto; +} + table.fixed td { overflow: hidden; max-width: 200px; + min-width: 200px; vertical-align: middle; background-color: var(--ns-bg-dark-100); margin: 4px; @@ -18,7 +24,8 @@ table.fixed td { table.fixed th { overflow: hidden; - max-width: 350px; + max-width: 120px; + min-width: 120px; vertical-align: middle; background-color: var(--ns-bg-dark-100); font-size: 14px; @@ -43,32 +50,11 @@ table.fixed th:first-child { } mat-slider { - width: 150px; -} - -.belowColumn { - background-color: transparent; + width: 300px; } .slider { - background-color: var(--ns-bg-dark-50); -} - -.bottom-button { - font-size: large; - position: relative; - background-color: var(--ns-primary); - width: 10rem; - height: 2.3rem; - border-color: var(--ns-primary); - border-style: solid; - border-width: 0px 1px 1px 1px; -} - -#footer { - display: flex; - flex-direction: row; - justify-content: center; + background-color: var(--ns-bg-dark-100); } #missingValuesHeader { @@ -85,9 +71,14 @@ mat-slider { flex-direction: row; justify-content: space-between; align-items: center; + vertical-align: middle; height: 100%; } +.text-left { + text-align: left !important; +} + table ::ng-deep .mat-form-field-wrapper { margin-top: -2rem; } @@ -125,6 +116,7 @@ table ::ng-deep .mat-form-field-wrapper { #folder-table { border: 1px solid var(--ns-primary); border-radius: 4px; + height: 70%; } #tabs { @@ -201,4 +193,21 @@ table ::ng-deep .mat-form-field-wrapper { .hidden { display: none; +} + +.bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-primary); + width: 10rem; + height: 2.3rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} + +#footer { + display: flex; + flex-direction: row; + justify-content: center; }
\ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 0c33786e..811df4bd 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -12,7 +12,7 @@ </div> <div id="folder-table" *ngIf="dataset && experiment"> <!--<div [ngSwitch]="tabToDisplay">--> - <div> + <div id="divTable"> <div [ngClass]="{'hidden': tabToDisplay != Table.Data}"> <table class="table text-offwhite fixed bg-blur"> @@ -20,8 +20,10 @@ <tr> <th>#</th> <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> - #{{i + 1}} {{colInfo.columnName}} - <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + <div class="cell-align"> + #{{i + 1}} {{colInfo.columnName}} + <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + </div> </th> </tr> </thead> @@ -50,7 +52,11 @@ </thead> <tbody> <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> - <th>#{{i + 1}} {{colInfo.columnName}}</th> + <th> + <div class="text-left"> + {{colInfo.columnName}} + </div> + </th> <td *ngFor="let colInfo of dataset.columnInfo; let j = index"> <div class="text-overflow"> 0.1 @@ -69,7 +75,7 @@ <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> <div class="cell-align"> #{{i + 1}} {{colInfo.columnName}} - <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> </tr> @@ -185,7 +191,7 @@ </div> </div> -<div class="container-fluid text-offwhite belowColumn"> +<div class="container-fluid text-offwhite belowColumn mt-3"> <div class="ns-row"> <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary)"> |