Podesio korake eksperimenta tako da korisnik ne moze da skroluje do koraka koje nije otkljucao. Promenio slajdere za trening, test, validacione skupove tako da se vide minimumi od 10%. Popravio skrolove koji nisu trebali da se pojavljuju, i dimenzije nekih elemenata.

2 files changed, 53 insertions, 18 deletions

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 95ace1ef..34c1a5c5 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -86,12 +86,12 @@ hr {
     max-height: 20 rem;
 }
 
-mat-slider {
-    width: 50%;
-}
-
 .slider {
     background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 .center-center {
@@ -102,3 +102,29 @@ mat-slider {
     font-size: 20px !important;
     font-weight: 600;
 }
+
+.slider-pad {
+    min-width: 10%;
+    background-color: gray;
+    height: 2px;
+}
+
+.slider-pad:first-child {
+    margin-right: -8px;
+}
+
+.slider-pad:last-child {
+    margin-left: -8px;
+}
+
+.slider-extended {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 95%;
+}
+
+.slide {
+    width: 80%;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 1b4eb834..c7a9d5ca 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -91,24 +91,33 @@
 
     <div class="m-2">
         <div class="row">
-            <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px;">
-                <div class="row slider rounded" style="margin-left: 10px;margin-bottom: 0;">
+            <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; width: fit-content;">
+                <!-- <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> 
                     <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 p-0">Trening
-                        <mat-slider min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
-                        Test</div>
-                </div>
-                <div class="row p-0" style="margin-left: 10px;margin-bottom: 0; padding: 0;">
-                    <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox>
+                    <div class="text-center pt-0 mt-0 p-0">Trening ////slider////// Test</div>
+                -->
+                <div class="slider mt-2">
+                    <div>
+                        Trening {{testSetDistribution}}% : Test i validacija {{100-testSetDistribution}}%
+                    </div>
+                    <div class="slider-extended">
+                        <div class="slider-pad"></div>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
+                        <div class="slider-pad"></div>
+                    </div>
+                    <div>
+                        Test {{validationSize}}% : Validacija {{100-validationSize}}%
+                    </div>
+                    <div class="slider-extended">
+                        <div class="slider-pad"></div>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider>
+                        <div class="slider-pad"></div>
+                    </div>
                 </div>
-                <hr style="color:accent;">
-                <div class="row ">
-                    <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b>
-                    <mat-slider class="text-center justify-content-center " style="margin-left:80px;" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider>
 
+                <div class="d-flex justify-content-center mt-3">
+                    <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox>
                 </div>
-
-
             </div>
 
             <div class="col-sm-9">