diff options
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.html | 19 | ||||
| -rw-r--r-- | frontend/src/app/_elements/form-model/form-model.component.css | 34 | ||||
| -rw-r--r-- | frontend/src/styles/layout.css | 34 |
3 files changed, 43 insertions, 44 deletions
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 5f4412a1..0c33786e 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -186,8 +186,8 @@ </div> <div class="container-fluid text-offwhite belowColumn"> - <div class="row "> - <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary)"> + <div class="ns-row"> + <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary)"> <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> <div class="text-center pt-0 mt-0">Trening @@ -195,14 +195,15 @@ Test</div> </div> - <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> + <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;"> <div class="text-center text-offwhite justify-content-center align-items-center"> - <mat-checkbox class="pt-4" color="accent">Nasumicni redosled podataka</mat-checkbox> + <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox> </div> </div> - <div class="col-sm-2 rounded"> + <div class="break-2"></div> + <div class="ns-col rounded"> <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> <mat-label>Tip problema</mat-label> <mat-select value="ToDo1"> @@ -211,19 +212,17 @@ <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option> </mat-select> </mat-form-field> - </div> - <div class="col-sm-2 rounded"> - + <div class="ns-col rounded"> <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> <mat-label>Izlazna kolona</mat-label> <mat-select> <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option> </mat-select> </mat-form-field> - </div> - <div class="col-sm-1 d-flex align-items-center justify-content-center"> + <div class="break-1"></div> + <div class="ns-col d-flex align-items-center justify-content-center"> <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom"> <div class="f-row" style="justify-content: space-around;"> <div>Potvrdi</div> diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index c0ae9365..b69b2dbb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -44,44 +44,10 @@ col-1 { padding: 0; } -.ns-row { - width: 98%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: 0; - padding: 0; -} - -.ns-col { - flex-grow: 1; - padding: 2px; - margin-bottom: 0; - padding-bottom: 0; -} - ::ng-deep .mat-form-field-wrapper { margin-bottom: -1.85em; } -.break-1, -.break-2 { - height: 1px; - width: 100%; -} - -@media screen and (min-width: 1200px) { - .break-1 { - display: none; - } -} - -@media screen and (min-width: 2175px) { - .break-2 { - display: none; - } -} - #layers-control { display: flex; flex-direction: row; diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css index 33f4cf2b..9dd146b2 100644 --- a/frontend/src/styles/layout.css +++ b/frontend/src/styles/layout.css @@ -15,4 +15,38 @@ body { .align-items-view>*:last-child { transform: perspective(100em) rotateY(-25deg) translateZ(1em); +} + +.ns-row { + width: 98%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; + padding: 0; +} + +.ns-col { + flex-grow: 1; + padding: 2px; + margin-bottom: 0; + padding-bottom: 0; +} + +.break-1, +.break-2 { + height: 1px; + width: 100%; +} + +@media screen and (min-width: 1200px) { + .break-1 { + display: none; + } +} + +@media screen and (min-width: 2175px) { + .break-2 { + display: none; + } }
\ No newline at end of file |