From 8392d3cf8ba8cdecc7676e2e3d55edae11c048ef Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 13 Apr 2022 20:56:09 +0200
Subject: Sredjen izgled stranica "Napravi eksperiment" i "Treniraj model", kao
 i komponenti model-load i dataset-load. Kod dodavanja modela, postavljeno da
 sve metrike budu automatski cekirane.

---
 frontend/src/app/training/training.component.html | 70 +++++++++++++----------
 1 file changed, 39 insertions(+), 31 deletions(-)

(limited to 'frontend/src/app/training/training.component.html')

diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 2e574c12..0ce4cc89 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -1,38 +1,46 @@
 <div id="header">
-    <h1>Trenirajte veštačku neuronske mrežu</h1>
+    <h1>Trenirajte veštačku neuronsku mrežu</h1>
 </div>
-<div id="wrapper">
-    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+<div id="wrapper" class="mb-4">
+    <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;">
+        <div class="col"></div>
 
-<h2>1. Izaberite eksperiment iz kolekcije</h2>
-<div class="px-5 my-2">
-    <input type="text" class="form-control" placeholder="Pretraga"
-        [(ngModel)]="term">
-</div>
-<div class="overflow-auto" style="max-height: 500px;">
-    <ul class="list-group">
-        <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term"
-            [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
-            <app-item-experiment [experiment]="experiment"
-                (click)="selectThisExperiment(experiment);"></app-item-experiment>
-        </li>
-    </ul>
-</div>
+        <div class="col-10">
 
-<h2>2.Izaberite model</h2>
-<app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
+            <h2>1. Izaberite eksperiment iz kolekcije</h2>
+            <div class="px-5 mt-5 mb-3">
+                <input type="text" class="form-control" placeholder="Pretraga"
+                    [(ngModel)]="term">
+            </div>
+            <div class="overflow-auto px-5" style="max-height: 500px;">
+                <ul class="list-group">
+                    <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term"
+                        [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
+                        <app-item-experiment [experiment]="experiment"
+                            (click)="selectThisExperiment(experiment);"></app-item-experiment>
+                    </li>
+                </ul>
+            </div>
+    
+            <h2 class="mt-5 mb-2">2. Izaberite model</h2>
+            <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
+    
+            <h2 class="my-5">3. Treniranje modela</h2>
 
-<h2>3. Trenirajte model</h2>
-<button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
-    model</button>
+            <div class="d-flex flex-row justify-content-center align-items-center my-3">
+                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+                    model</button>
+            </div>
+    
+            <h2 class="mt-5">Rezultati treniranja</h2>
+            <div class="m-3" *ngIf="trainingResult">
+                <h2 class="my-2">Rezultati treniranja:</h2>
+                <p>
+                    {{trainingResult}}
+                </p>
+            </div>
+        </div>
 
-<h2>Rezultati treniranja</h2>
-<div class="m-3" *ngIf="trainingResult">
-    <h2 class="my-2">Rezultati treniranja:</h2>
-    <p>
-        {{trainingResult}}
-    </p>
-</div>
-
-</div>
+        <div class="col"></div>
+    </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3