diff options
Diffstat (limited to 'frontend/src/app')
9 files changed, 82 insertions, 99 deletions
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index cfb0d087..a1c1124a 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -55,7 +55,7 @@ } .tab-link:active { - color: var(--ns-accent) !important; + text-decoration: underline !important; } .selected-tab { @@ -107,7 +107,7 @@ .folder-bottom-button { font-size: large; position: relative; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-bg-dark-50); width: 10rem; height: 2.5rem; display: flex; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 11fccc56..895ac84e 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -51,13 +51,13 @@ {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} </div> <div id="footer"> - <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="newFileSelected"> + <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected"> <a class="tab-link stretched-link">Sačuvaj</a> <div> <mat-icon>check</mat-icon> </div> </div> - <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="!newFileSelected"> + <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected"> <a class="tab-link stretched-link">Ok</a> <div class="icon-double"> <mat-icon>check</mat-icon> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 34c8db82..485a8dd7 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -97,7 +97,6 @@ export class FolderComponent implements OnInit { newFileZIndex() { return (this.files.length + 1); } - } export enum FolderType { diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 5390136d..09d83bd1 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,4 +1,4 @@ -<header class="sticky-top p-3 bg-dark text-white"> +<header class="bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> 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); - } + } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 8c3f4e9e..d15793e7 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -6,10 +6,8 @@ <app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="5" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100"> </app-reactive-background> <app-navbar></app-navbar> -<a class="bg-controls" routerLink="playground"> +<a class="bg-controls" style="z-index: 1000;" routerLink="playground"> <mat-icon color="accent">settings_suggest</mat-icon> </a> -<div class="h-100"> - <router-outlet></router-outlet> -</div> +<router-outlet></router-outlet> <app-notifications></app-notifications>
\ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 4a0d85c8..f9bc2726 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { filter, map } from 'rxjs'; @@ -11,10 +11,12 @@ import Shared from './Shared'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent implements OnInit { +export class AppComponent implements OnInit, AfterViewInit { constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) { } + ngAfterViewInit(): void { + } ngOnInit() { this.router.events @@ -42,17 +44,5 @@ export class AppComponent implements OnInit { } this.signalRService.startConnection(); //this.startHttpRequest(); - - - - - } - private startHttpRequest = () => { - this.http.get('http://localhost:5283/chatHub') - .subscribe(res => { - console.log(res); - }) } - - } |