From 8e1c8a20a1c098188245552abb2629135c807558 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Wed, 11 May 2022 22:36:22 +0200
Subject: Promenjen stil i dizajn. Dodat naziv u slucaju da je novi
 eksperiment.

---
 .../app/_pages/experiment/experiment.component.css | 10 ++++++++-
 .../_pages/experiment/experiment.component.html    | 26 ++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

(limited to 'frontend/src/app/_pages')

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index a709c98e..4c063f87 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -56,4 +56,12 @@ mat-stepper {
 .ekspName{
     font-weight: bold;
     font-size: large;
-}
\ No newline at end of file
+}
+
+
+.addedElement{
+    color:var(--ns-accent);
+}
+.text-overflow {
+    overflow-wrap: break-word;
+}
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index edae1fc2..a2ede838 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,37 +1,45 @@
 <div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <div>
-        <div class="ekspName">Eskperiment:{{experiment.name}}</div>
+        <div class="ekspName " style="width: 250px;">
+            <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;">
+                Novi Eksperiment
+            </div>
+            <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;">
+                {{experiment.name}}
+            </div>
+
+        </div>
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
                 <!--editable="false"-->
                 <ng-template matStepLabel>
                     <span class="label" *ngIf="dataset==undefined">Izvor podataka</span>
-                    <span class="label" *ngIf="dataset!=undefined">Izvor podataka:{{dataset.name}}</span>
+                    <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Izaberite vas izvor podataka</p>
+                    <p class="text-left">Izaberite vas izvor podataka</p>
                 </ng-template>
             </mat-step>
             <mat-step>
-                <ng-template matStepLabel> 
-                    <span class="label" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
+                <ng-template matStepLabel>
+                    <span class="label addedElement" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
                     <span class="label" *ngIf="experiment.name=='exp1'">Odabir kolona</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                    <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p>
                 </ng-template>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel>
-                    <span class="label" *ngIf="modelToTrain!=undefined">Model:{{modelToTrain.name}}</span>
+                    <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span>
                     <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span>
                 </ng-template>
-                <p>Odaberite parametre i trenirajte model</p>
+                <p class="text-left">Odaberite parametre i trenirajte model</p>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
-                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+                <p class="text-left">Pregledajte tok treniranja i grafički prikaz rezultata</p>
             </mat-step>
         </mat-stepper>
         </div>
-- 
cgit v1.2.3