aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/angular.json216
-rw-r--r--frontend/src/app/_elements/folder/folder.component.css4
-rw-r--r--frontend/src/app/_elements/folder/folder.component.html4
-rw-r--r--frontend/src/app/_elements/folder/folder.component.ts1
-rw-r--r--frontend/src/app/_elements/navbar/navbar.component.html2
-rw-r--r--frontend/src/app/_pages/experiment/experiment.component.css47
-rw-r--r--frontend/src/app/_pages/experiment/experiment.component.html83
-rw-r--r--frontend/src/app/_pages/experiment/experiment.component.ts16
-rw-r--r--frontend/src/app/app.component.html6
-rw-r--r--frontend/src/app/app.component.ts18
-rw-r--r--frontend/src/custom-theme.scss267
-rw-r--r--frontend/src/styles/layout.css5
-rw-r--r--frontend/src/styles/theme.css18
13 files changed, 452 insertions, 235 deletions
diff --git a/frontend/angular.json b/frontend/angular.json
index d1983d31..13c27f40 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -1,117 +1,113 @@
{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "version": 1,
- "newProjectRoot": "projects",
- "projects": {
- "frontend": {
- "projectType": "application",
- "schematics": {
- "@schematics/angular:application": {
- "strict": true
- }
- },
- "root": "",
- "sourceRoot": "src",
- "prefix": "app",
- "architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "outputPath": "dist/frontend",
- "index": "src/index.html",
- "main": "src/main.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "tsconfig.app.json",
- "assets": [
- "src/favicon.ico",
- "src/assets"
- ],
- "styles": [
- "src/custom-theme.scss",
- "node_modules/bootstrap/dist/css/bootstrap.min.css",
- "src/styles.css",
- "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
- ],
- "scripts": [
- "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
- ]
- },
- "configurations": {
- "production": {
- "budgets": [
- {
- "type": "initial",
- "maximumWarning": "2mb",
- "maximumError": "4mb"
- },
- {
- "type": "anyComponentStyle",
- "maximumWarning": "10kb",
- "maximumError": "15kb"
- }
- ],
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "frontend": {
+ "projectType": "application",
+ "schematics": {
+ "@schematics/angular:application": {
+ "strict": true
}
- ],
- "outputHashing": "all"
},
- "development": {
- "buildOptimizer": false,
- "optimization": false,
- "vendorChunk": true,
- "extractLicenses": false,
- "sourceMap": true,
- "namedChunks": true
- }
- },
- "defaultConfiguration": "production"
- },
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "configurations": {
- "production": {
- "browserTarget": "frontend:build:production"
- },
- "development": {
- "browserTarget": "frontend:build:development"
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/frontend",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.app.json",
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "node_modules/bootstrap/dist/css/bootstrap.min.css",
+ "src/styles.css",
+ "src/custom-theme.scss"
+ ],
+ "scripts": [
+ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+ ]
+ },
+ "configurations": {
+ "production": {
+ "budgets": [{
+ "type": "initial",
+ "maximumWarning": "2mb",
+ "maximumError": "4mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "10kb",
+ "maximumError": "15kb"
+ }
+ ],
+ "fileReplacements": [{
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }],
+ "outputHashing": "all"
+ },
+ "development": {
+ "buildOptimizer": false,
+ "optimization": false,
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "browserTarget": "frontend:build:production"
+ },
+ "development": {
+ "browserTarget": "frontend:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "frontend:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.spec.json",
+ "karmaConfig": "karma.conf.js",
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+ "src/styles.css"
+ ],
+ "scripts": []
+ }
+ }
}
- },
- "defaultConfiguration": "development"
- },
- "extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "browserTarget": "frontend:build"
- }
- },
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "main": "src/test.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
- "assets": [
- "src/favicon.ico",
- "src/assets"
- ],
- "styles": [
- "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
- "src/styles.css"
- ],
- "scripts": []
- }
}
- }
- }
- },
- "defaultProject": "frontend",
- "cli": {
- "warnings": {
- "versionMismatch": false
+ },
+ "defaultProject": "frontend",
+ "cli": {
+ "warnings": {
+ "versionMismatch": false
+ }
}
- }
} \ No newline at end of file
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);
- })
}
-
-
}
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index a6538c37..8f716240 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -1,35 +1,250 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwNjNhYiIsIj9lcjwjYjNkMGU2IiwiO2VyPCMwMDQ3OTF$LCIlPmBePCMwMGE4ZTgiLCI~ZXI8I2IzZTVmOCIsIjtlcjwjMDA4ZGRlfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCMwMDQxNjUiLCI~PTwjZGZkN2Q3IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDQxNjV$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
+*/
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
-// Plus imports for other components in your app.
-
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
+// Fonts
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+$fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
+// Foreground Elements
+// Light Theme Text
+$dark-text: #004165;
+$dark-primary-text: rgba($dark-text,
+0.87);
+$dark-accent-text: rgba($dark-primary-text,
+0.54);
+$dark-disabled-text: rgba($dark-primary-text,
+0.38);
+$dark-dividers: rgba($dark-primary-text,
+0.12);
+$dark-focused: rgba($dark-primary-text,
+0.12);
+$mat-light-theme-foreground: ( base : black,
+divider : $dark-dividers,
+dividers : $dark-dividers,
+disabled : $dark-disabled-text,
+disabled-button : rgba($dark-text, 0.26),
+disabled-text : $dark-disabled-text,
+elevation : black,
+secondary-text : $dark-accent-text,
+hint-text : $dark-disabled-text,
+accent-text : $dark-accent-text,
+icon : $dark-accent-text,
+icons : $dark-accent-text,
+text : $dark-primary-text,
+slider-min : $dark-primary-text,
+slider-off : rgba($dark-text, 0.26),
+slider-off-active: $dark-disabled-text,
+);
+// Dark Theme text
+$light-text: #dfd7d7;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text,
+0.7);
+$light-disabled-text: rgba($light-primary-text,
+0.5);
+$light-dividers: rgba($light-primary-text,
+0.12);
+$light-focused: rgba($light-primary-text,
+0.12);
+$mat-dark-theme-foreground: ( base : $light-text,
+divider : $light-dividers,
+dividers : $light-dividers,
+disabled : $light-disabled-text,
+disabled-button : rgba($light-text, 0.3),
+disabled-text : $light-disabled-text,
+elevation : black,
+hint-text : $light-disabled-text,
+secondary-text : $light-accent-text,
+accent-text : $light-accent-text,
+icon : $light-text,
+icons : $light-text,
+text : $light-text,
+slider-min : $light-text,
+slider-off : rgba($light-text, 0.3),
+slider-off-active: rgba($light-text, 0.3),
+);
+// Background config
+// Light bg
+$light-background : #dfd7d7;
+$light-bg-darker-5 : darken($light-background,
+5%);
+$light-bg-darker-10 : darken($light-background,
+10%);
+$light-bg-darker-20 : darken($light-background,
+20%);
+$light-bg-darker-30 : darken($light-background,
+30%);
+$light-bg-lighter-5 : lighten($light-background,
+5%);
+$dark-bg-tooltip : lighten(#004165,
+20%);
+$dark-bg-alpha-4 : rgba(#004165,
+0.04);
+$dark-bg-alpha-12 : rgba(#004165,
+0.12);
+$mat-light-theme-background: ( background : $light-background,
+status-bar : $light-bg-darker-20,
+app-bar : $light-bg-darker-5,
+hover : $dark-bg-alpha-4,
+card : $light-bg-lighter-5,
+dialog : $light-bg-lighter-5,
+tooltip : $dark-bg-tooltip,
+disabled-button : $dark-bg-alpha-12,
+raised-button : $light-bg-lighter-5,
+focused-button : $dark-focused,
+selected-button : $light-bg-darker-20,
+selected-disabled-button: $light-bg-darker-30,
+disabled-button-toggle : $light-bg-darker-10,
+unselected-chip : $light-bg-darker-10,
+disabled-list-option : $light-bg-darker-10,
+);
+// Dark bg
+$dark-background : #004165;
+$dark-bg-lighter-5 : lighten($dark-background,
+5%);
+$dark-bg-lighter-10 : lighten($dark-background,
+10%);
+$dark-bg-lighter-20 : lighten($dark-background,
+20%);
+$dark-bg-lighter-30 : lighten($dark-background,
+30%);
+$light-bg-alpha-4 : rgba(#dfd7d7,
+0.04);
+$light-bg-alpha-12 : rgba(#dfd7d7,
+0.12);
+// Background palette for dark themes.
+$mat-dark-theme-background: ( background : $dark-background,
+status-bar : $dark-bg-lighter-20,
+app-bar : $dark-bg-lighter-5,
+hover : $light-bg-alpha-4,
+card : $dark-bg-lighter-5,
+dialog : $dark-bg-lighter-5,
+tooltip : $dark-bg-lighter-20,
+disabled-button : $light-bg-alpha-12,
+raised-button : $dark-bg-lighter-5,
+focused-button : $light-focused,
+selected-button : $dark-bg-lighter-20,
+selected-disabled-button: $dark-bg-lighter-30,
+disabled-button-toggle : $dark-bg-lighter-10,
+unselected-chip : $dark-bg-lighter-20,
+disabled-list-option : $dark-bg-lighter-10,
+);
+// Compute font config
+@include mat.core($fontConfig);
+// Theme Config
+body {
+ --primary-color: #0063ab;
+ --primary-lighter-color: #b3d0e6;
+ --primary-darker-color: #004791;
+ --text-primary-color: #{$light-primary-text};
+ --text-primary-lighter-color: #{$dark-primary-text};
+ --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: ( main: #0063ab,
+lighter: #b3d0e6,
+darker: #004791,
+200: #0063ab, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-primary: mat.define-palette($mat-primary,
+main,
+lighter,
+darker);
+body {
+ --accent-color: #00a8e8;
+ --accent-lighter-color: #b3e5f8;
+ --accent-darker-color: #008dde;
+ --text-accent-color: #{$light-primary-text};
+ --text-accent-lighter-color: #{$dark-primary-text};
+ --text-accent-darker-color: #{$light-primary-text};
+}
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$mat-accent: ( main: #00a8e8,
+lighter: #b3e5f8,
+darker: #008dde,
+200: #00a8e8, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-accent: mat.define-palette($mat-accent,
+main,
+lighter,
+darker);
+body {
+ --warn-color: #f9b7b7;
+ --warn-lighter-color: #fde9e9;
+ --warn-darker-color: #f69f9f;
+ --text-warn-color: #{$dark-primary-text};
+ --text-warn-lighter-color: #{$dark-primary-text};
+ --text-warn-darker-color: #{$dark-primary-text};
+}
-// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$mat-warn: ( main: #f9b7b7,
+lighter: #fde9e9,
+darker: #f69f9f,
+200: #f9b7b7, // For slide toggle,
+contrast: ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, ));
+$theme-warn: mat.define-palette($mat-warn,
+main,
+lighter,
+darker);
+;
+$theme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: true,
+foreground: $mat-dark-theme-foreground,
+background: $mat-dark-theme-background,
+);
+$altTheme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: false,
+foreground: $mat-light-theme-foreground,
+background: $mat-light-theme-background,
+);
+// Theme Init
+@include mat.all-component-themes($theme);
+.theme-alternate {
+ @include mat.all-component-themes($altTheme);
+}
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
- color: (
- primary: $frontend-primary,
- accent: $frontend-accent,
- warn: $frontend-warn,
- )
-));
+// Specific component overrides, pieces that are not in line with the general theming
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button,
+.mat-stroked-button,
+.mat-flat-button {
+ padding: 0 1.15em;
+ margin: 0 .65em;
+ min-width: 3em;
+ line-height: 36.4px
+}
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($frontend-theme);
+.mat-standard-chip {
+ padding: .5em .85em;
+ min-height: 2.5em;
+}
+.material-icons {
+ font-size: 24px;
+ font-family: 'Material Icons', 'Material Icons';
+ .mat-badge-content {
+ font-family: 'Roboto';
+ }
+} \ No newline at end of file
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index e24da375..33f4cf2b 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -1,5 +1,10 @@
/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
+html,
+body {
+ height: 100%;
+}
+
.align-items-view>*:first-child {
transform: perspective(100em) rotateY(25deg) translateZ(1em);
}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index d0ccc935..f2e84e8b 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -35,4 +35,22 @@ a {
.text-offwhite {
color: var(--offwhite) !important;
+}
+
+
+/* Ripple effect */
+
+.bubble {
+ background-position: center;
+ transition: background 0.8s;
+}
+
+.bubble:hover {
+ background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
+}
+
+.bubble:active {
+ background-color: #6eb9f7;
+ background-size: 100%;
+ transition: background 0s;
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 00:43:14 +0000