Promenio temu material-a tako da se poklapa sa nasom temom. Dodao responzivnost za eksperiment stranu.

3 files changed, 71 insertions, 75 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 34e412ef..5cb8c325 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -1,37 +1,32 @@
-ul{
+ul {
     list-style: none;
 }
-.navmenu{
-    position: absolute;
-    background-color: var(--ns-bg-dark-50);
-    height: 90%;
-    width: 250px;
+
+.holder {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
 }
-.navmenuwrapper{
-    position: relative;
-    top:40%;
-    transform: translateY(-50%);
+
+.sidenav {
+    width: 250px;
+    background-color: var(--ns-bg-dark-50);
 }
 
+@media only screen and (max-width: 400px) {
+    .sidenav {
+        width: 100%;
+        background-color: var(--ns-bg-dark-100);
+    }
+    .holder {
+        flex-direction: column;
+    }
+}
 
-mat-stepper{
+mat-stepper {
     background-color: transparent;
 }
 
-::ng-deep .mat-step-header .mat-step-icon .mat-step-content{
-    background-color: white;
-    color:var(--ns-primary); 
-  }
-::ng-deep .mat-step-header .mat-step-icon{
-    color:white;
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done{
-    background: var(--ns-primary);
-    color:var(--ns-primary)
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done .label{
-    color:var(--ns-primary)
-}
-.label{
+.label {
     color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2f1a86fd..2c69ae9c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,46 +1,51 @@
+<!--<div #wrapper class="text-offwhite d-flex flex-row">
+    <div class="navmenu d-flex flex-column flex-shrink-0 p-3">
+        
+    </div>
+
+    <div class="position-relative">
+        <div *ngIf="event==0" class="overflow-y-auto">
+            <app-folder></app-folder>
+        </div>
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>-->
 
-<div class="wrapper">   
-    
-    <nav class="navmenu">
-        <div class="navmenuwrapper text-offwhite">
-          <mat-stepper orientation="vertical" (selectionChange)="ChangePage($event)">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+    <div class="d-flex flex-colum align-items-center sidenav">
+        <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
-              <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
-              <ng-template matStepContent>
-                <p>Izaberite vas izvor podataka</p>
-              </ng-template>
+                <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Izaberite vas izvor podataka</p>
+                </ng-template>
             </mat-step>
             <mat-step>
-              <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
-              <ng-template matStepContent>
-                <p>Pripremite podatke i izaberite izlazne kolone</p>
-              </ng-template>
+                <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                </ng-template>
             </mat-step>
-            <mat-step >
-              <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
-              <p>Odaberite parametre i trenirajte model</p>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
+                <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
-          </mat-stepper>
+        </mat-stepper>
+    </div>
+    <div class="d-flex flex-colum w-100 position-relative">
+        <div *ngIf="event==0">
+            <app-folder></app-folder>
         </div>
-
-          
-
-    </nav>
-    
-    
-
-    
-
-</div>
-
-<div *ngIf="event==0"><app-folder></app-folder></div>
-<div *ngIf="event==1">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
-</div>
-<div *ngIf="event==2">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
-</div>
-
-
-
-
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index c8b301ca..2d623709 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,24 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent implements OnInit {
-
-event:number=0;
+export class ExperimentComponent {
 
+  event: number = 0;
 
   constructor() { }
 
-  ngOnInit(): void {
-  }
-
-  ChangePage(event:StepperSelectionEvent){
-    this.event=event.selectedIndex;
+  changePage(event: StepperSelectionEvent) {
+    this.event = event.selectedIndex;
     console.log(this.event);
-
   }
 
+
 }