From 211b2534aea43ff0df771fb700688cbf7e35a264 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Fri, 22 Apr 2022 23:29:10 +0200 Subject: Razdvojio css po fajlovima da bi smanjili buduce konflikte. --- frontend/src/styles/helper.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/styles/helper.css (limited to 'frontend/src/styles/helper.css') diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css new file mode 100644 index 00000000..bed289e4 --- /dev/null +++ b/frontend/src/styles/helper.css @@ -0,0 +1,15 @@ +@keyframes logo-animation { + from { + transform: perspective(100em) rotateX(50deg) rotateZ(0deg); + } + to { + transform: perspective(100em) rotateX(50deg) rotateZ(360deg); + } +} + +.ann-logo { + animation-name: logo-animation; + animation-duration: 3140ms; + animation-timing-function: linear; + animation-iteration-count: infinite; +} \ No newline at end of file -- cgit v1.2.3 From 6fe49c5cd6ef20dc477f11dac098e4c18c2584ee Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 03:01:02 +0200 Subject: Dodao korisnička podešavanja za pozadinu. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reactive-background.component.ts | 52 +++++++++++++++------- .../_pages/playground/playground.component.html | 19 +++++++- .../app/_pages/playground/playground.component.ts | 18 +++++++- frontend/src/app/app.component.html | 7 +-- frontend/src/app/app.component.ts | 15 ++++--- frontend/src/app/material.module.ts | 6 ++- frontend/src/styles/helper.css | 12 +++++ 7 files changed, 100 insertions(+), 29 deletions(-) (limited to 'frontend/src/styles/helper.css') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 73cdb326..4cafbc6d 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -1,4 +1,5 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-reactive-background', @@ -22,6 +23,9 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + @Input() animate: boolean = true; + @Input() fill: number = 1.0; + private fleeSpeed = 0.005; private points: Point[] = []; @@ -35,7 +39,7 @@ export class ReactiveBackgroundComponent implements AfterViewInit { private time: number = 0; - constructor() { } + constructor(private cookie: CookieService) { } private mouseX = 0; private mouseY = 0; @@ -77,6 +81,13 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.resize(); setInterval(() => { + if (this.cookie.check('animateBackground')) { + this.animate = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.fill = parseFloat(this.cookie.get('backgroundFill')); + } + this.drawBackground(); }, 1000 / 60); } @@ -85,7 +96,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { scrollBackground(e: Event) { const scrolledAmount = window.scrollY - this.lastScrollY; - this.points.forEach((point) => { + this.points.forEach((point, index) => { + if (index > this.numPoints * this.fill) return; point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed; this.keepPointWithinBounds(point); }) @@ -100,19 +112,21 @@ export class ReactiveBackgroundComponent implements AfterViewInit { //this.ctx.fillRect(0, 0, this.width, this.height); this.points.forEach((point, index) => { - this.updatePoint(point); + if (index > this.numPoints * this.fill) return; + this.drawLines(point, index); this.drawPoint(point); + + if (this.animate) + this.updatePoint(point); }); //this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0)); - - this.time += 1; } drawLines(p: Point, index: number) { let i = index + 1; - while (i < this.points.length) { + while (i < this.points.length * this.fill) { const otherPoint = this.points[i]; const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y); @@ -151,24 +165,22 @@ export class ReactiveBackgroundComponent implements AfterViewInit { } updatePoint(p: Point) { - const vx = Math.sin(p.direction); - const vy = Math.cos(p.direction); - - p.x = p.x + vx * this.speed; - p.y = p.y + vy * this.speed; - const mx = this.mouseX; const my = this.mouseY; const distToCursor = this.distance(p.x, p.y, mx, my); + if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; - p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; + const t = (distToCursor / this.cursorDistance); + p.x -= ((mx - p.x) / distToCursor) * this.speed * (1 + t * 2); + p.y -= ((my - p.y) / distToCursor) * this.speed * (1 + t * 2); + + p.direction = this.lerp(p.direction, Math.atan2(my - p.y, mx - p.x) * 180 / Math.PI, t); const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; grd.addColorStop(0, this.cursorLineColor + alpha); - grd.addColorStop(1, this.cursorLineColor + '00'); + grd.addColorStop(0.5, this.cursorLineColor + '00'); this.ctx.strokeStyle = grd; this.ctx.beginPath(); this.ctx.moveTo(p.x * this.width, p.y * this.height); @@ -176,9 +188,19 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.ctx.stroke(); } + const vx = Math.sin(p.direction); + const vy = Math.cos(p.direction); + + p.x = p.x + vx * this.speed; + p.y = p.y + vy * this.speed; + this.keepPointWithinBounds(p); } + lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end + } + keepPointWithinBounds(p: Point) { p.x = p.x % 1.0; p.y = p.y % 1.0; diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html index 5622cd83..d3751d5c 100644 --- a/frontend/src/app/_pages/playground/playground.component.html +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -1 +1,18 @@ -
\ No newline at end of file +
+
+

+ Broj tačaka: +

+ + + +
+
+

+ Animacija:

+ + +
+
+
+
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts index 007a455e..f8ea8bb4 100644 --- a/frontend/src/app/_pages/playground/playground.component.ts +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-playground', @@ -7,9 +8,24 @@ import { Component, OnInit } from '@angular/core'; }) export class PlaygroundComponent implements OnInit { - constructor() { } + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateBGPrefs() { + this.cookie.set('animateBackground', "" + this.animateBackground); + this.cookie.set('backgroundFill', "" + this.backgroundFill); + console.log(this.animateBackground, this.backgroundFill); + } ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } } } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ba7743b5..984389c4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,11 +1,12 @@ - + - + - + +pozadina
- - -
- Pogledaj sve javne izvore podataka... -
- -
\ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bd9a3b0d..4a0d85c8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; -import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index bcd02646..58f00c20 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -24,4 +24,21 @@ margin-top: 50%; margin-left: auto; transform: translateX(-50%); +} + +.footer-center { + position: relative; + height: 1rem; +} + +.footer-center>* { + position: fixed; + bottom: 8%; + left: 50%; + transform: translateX(-50%); +} + +.row-height { + white-space: nowrap; + height: 1rem; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 3ef44e54..820f5a5a 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,10 @@ :root { --ns-primary: #00a8e8; --ns-bg: #003459; - --ns-bg-transparent: rgba(0, 152, 189, 0.3) + --ns-bg-light-30: rgba(0, 152, 189, 0.3); + --ns-bg-dark-100: rgba(0, 65, 101, 1.0); + --ns-bg-dark-50: rgba(0, 65, 101, 0.5); + --offwhite: #ebe6e6; } body { @@ -10,9 +13,19 @@ body { } .bg-light { - background-color: var(--ns-bg-transparent) !important; + background-color: var(--ns-bg-light-30) !important; +} + +.ns-bg-dark-50 {} + +.ns-bg-dark-100 { + background-color: var(--ns-bg-dark-100) !important; } a { color: var(--ns-primary) !important; +} + +.text-offwhite { + color: var(--offwhite); } \ No newline at end of file -- cgit v1.2.3 From 036d29ecf68214704de77956a88cdb2af228f37b Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 23:16:45 +0200 Subject: Dodao folder komponentu, odradjeni tabovi i selekcija, ulazi i izlazi komponente, stil. --- .../src/app/_elements/folder/folder.component.css | 124 +++++++++++++++++++++ .../src/app/_elements/folder/folder.component.html | 69 +++++++++++- .../src/app/_elements/folder/folder.component.ts | 95 +++++++++++++++- .../app/_elements/playlist/playlist.component.css | 2 +- .../app/_elements/playlist/playlist.component.html | 6 +- .../_pages/experiment/experiment.component.html | 1 + frontend/src/app/app.component.html | 6 +- frontend/src/styles/helper.css | 12 +- frontend/src/styles/theme.css | 15 ++- 9 files changed, 315 insertions(+), 15 deletions(-) (limited to 'frontend/src/styles/helper.css') diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index e69de29b..cfb0d087 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -0,0 +1,124 @@ +#folder { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +#tabs { + display: flex; + flex-direction: row; + align-items: flex-end; + height: 4rem; +} + +#tabs>.folder-tab:not(:first-child) { + margin-left: -5px; +} + +.folder-tab { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + overflow-x: hidden; + background-color: var(--ns-bg-dark-100); + height: 2.5rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 0 1px; +} + +.folder-tab:not(:first-child) { + margin-block-start: auto; + width: 4rem; +} + +.selected-tab { + height: 3rem; + background-color: var(--ns-primary); +} + +.hover-tab { + height: 3.2rem; +} + +.selected-tab, +.hover-tab { + width: fit-content !important; +} + +.tab-link { + color: var(--offwhite) !important; + text-decoration: none !important; + cursor: pointer; +} + +.tab-link:active { + color: var(--ns-accent) !important; +} + +.selected-tab { + background-color: var(--ns-primary); +} + +#searchbar { + height: 2.5rem; + background-color: var(--ns-bg-dark-100); + border-bottom: 1px solid var(--ns-primary); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + width: 100%; +} + +.collapse-horizontal { + white-space: nowrap; + height: 2.5rem; + overflow-x: hidden; +} + +#search-options { + margin-left: auto; + margin-top: 7px; + display: flex; + flex-direction: row; + align-items: center; +} + +#selected-content { + background-color: var(--ns-bg-dark-50); + width: 100%; + height: 36rem; + backdrop-filter: blur(2px); + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 1px 1px; + border-top-right-radius: 4px; +} + +#footer { + display: flex; + flex-direction: row; + justify-content: center; +} + +.folder-bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-bg-dark-100); + width: 10rem; + height: 2.5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} + +.folder-bottom-button:hover { + background-color: var(--ns-primary); +} \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e4c376a7..455d43cc 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1 +1,68 @@ -

folder works!

+
+
+ +
+ {{file.name}} +
+
+
+ + {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index c5ff3c45..34c8db82 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import Model from 'src/app/_data/Model'; @Component({ selector: 'app-folder', @@ -7,9 +9,98 @@ import { Component, OnInit } from '@angular/core'; }) export class FolderComponent implements OnInit { - constructor() { } + @Input() folderName: string = 'Moji podaci'; + + @Input() files!: (Dataset | Model)[] + + newFile!: Dataset | Model; + + @Input() type: FolderType = FolderType.Dataset; + + newFileSelected: boolean = true; + + selectedFileIndex: number = -1; + hoveringOverFileIndex: number = -1; + + fileToDisplay?: (Dataset | Model); + + @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter(); + + constructor() { + //PLACEHOLDER + this.files = [ + new Dataset('Titanik'), + new Dataset('Dijamanti'), + new Dataset('Filmovi'), + ] + } ngOnInit(): void { + if (this.files.length > 0) + this.selectFile(0); + else { + this.selectNewFile(); + } + } + + hoverOverFile(i: number) { + this.hoveringOverFileIndex = i; + if (i != -1) { + this.fileToDisplay = this.files[i]; + } else { + if (this.newFileSelected) { + this.fileToDisplay = this.newFile; + } else { + this.fileToDisplay = this.files[this.selectedFileIndex]; + } + } + } + + selectNewFile() { + if (!this.newFile) { + this.createNewFile(); + } + this.fileToDisplay = this.newFile; + this.selectedFileIndex = -1; + this.newFileSelected = true; + this.selectedFileChanged.emit(this.newFile); + } + + selectFile(index: number) { + this.selectedFileIndex = index; + this.fileToDisplay = this.files[index]; + this.newFileSelected = false; + this.selectedFileChanged.emit(this.files[index]); + } + + createNewFile() { + if (this.type == FolderType.Dataset) { + this.newFile = new Dataset(); + } else if (this.type == FolderType.Model) { + this.newFile = new Model(); + } + } + + saveNewFile() { + // TODO + } + + calcZIndex(i: number) { + let zIndex = (this.files.length - i - 1) + if (this.selectedFileIndex == i) + zIndex = this.files.length + 2; + if (this.hoveringOverFileIndex == i) + zIndex = this.files.length + 3; + return zIndex; + } + + newFileZIndex() { + return (this.files.length + 1); } } + +export enum FolderType { + Dataset, + Model +} diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 83448e51..353a094c 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 26rem; + height: 25rem; margin-bottom: 20px; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index 97ebe6a5..b82de163 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,13 +3,13 @@
-
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index bcecd284..7f4e14ec 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1 +1,2 @@

experiment works!

+ \ No newline at end of file diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 06416791..93c27eb8 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,9 +1,9 @@ - + - + - + pozadina diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 58f00c20..9c520ac3 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -33,7 +33,7 @@ .footer-center>* { position: fixed; - bottom: 8%; + bottom: 15px; left: 50%; transform: translateX(-50%); } @@ -41,4 +41,14 @@ .row-height { white-space: nowrap; height: 1rem; +} + +.icon-double>*:nth-child(2) { + margin-left: -1rem; +} + +.no-wrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 820f5a5a..d0ccc935 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,10 +1,11 @@ :root { - --ns-primary: #00a8e8; + --ns-primary: #0063AB; + --ns-accent: #00a8e8; --ns-bg: #003459; --ns-bg-light-30: rgba(0, 152, 189, 0.3); --ns-bg-dark-100: rgba(0, 65, 101, 1.0); --ns-bg-dark-50: rgba(0, 65, 101, 0.5); - --offwhite: #ebe6e6; + --offwhite: #dfd7d7; } body { @@ -16,7 +17,13 @@ body { background-color: var(--ns-bg-light-30) !important; } -.ns-bg-dark-50 {} +.ns-border-primary { + border: 1px solid var(--ns-primary); +} + +.ns-bg-dark-50 { + background-color: var(--ns-bg-dark-50) !important; +} .ns-bg-dark-100 { background-color: var(--ns-bg-dark-100) !important; @@ -27,5 +34,5 @@ a { } .text-offwhite { - color: var(--offwhite); + color: var(--offwhite) !important; } \ No newline at end of file -- cgit v1.2.3 From cdfecf22863385132701aea4356d5f5aabf3805c Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Mon, 25 Apr 2022 03:40:06 +0200 Subject: Osposobio pretragu u folder komponenti. Promenio experiment stranu tako da moze da se skroluje od koraka do koraka. Dodao nacin da komponente manuelno skroluju pozadinu. --- frontend/src/app/Shared.ts | 12 +++- .../src/app/_elements/folder/folder.component.css | 25 ++++---- .../src/app/_elements/folder/folder.component.html | 59 +++++++++-------- .../src/app/_elements/folder/folder.component.ts | 37 ++++++++++- .../reactive-background.component.ts | 19 +++++- .../app/_pages/experiment/experiment.component.css | 17 +++++ .../_pages/experiment/experiment.component.html | 11 ++-- .../app/_pages/experiment/experiment.component.ts | 74 ++++++++++++++++++++-- frontend/src/styles/helper.css | 23 +++++++ 9 files changed, 217 insertions(+), 60 deletions(-) (limited to 'frontend/src/styles/helper.css') diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts index 59a2716d..d088fff9 100644 --- a/frontend/src/app/Shared.ts +++ b/frontend/src/app/Shared.ts @@ -1,4 +1,4 @@ -import { ElementRef } from "@angular/core"; +import { ElementRef, EventEmitter } from "@angular/core"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; @@ -27,18 +27,24 @@ class Shared { }); } } - openYesNoDialog(title: string, message: string,yesFunction:Function): void { + openYesNoDialog(title: string, message: string, yesFunction: Function): void { if (this.dialog) { const dialogRef = this.dialog.open(YesNoDialogComponent, { width: '350px', - data: { title: title, message: message,yesFunction} + data: { title: title, message: message, yesFunction } }); dialogRef.afterClosed().subscribe(res => { //nesto }); } } + + bgScroll: EventEmitter = new EventEmitter(); + + emitBGScrollEvent(value: number) { + this.bgScroll.emit(value); + } } export default new Shared(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 a1c1124a..3e865576 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -1,7 +1,7 @@ #folder { - position: absolute; + /*position: absolute; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%);*/ } #tabs { @@ -22,9 +22,10 @@ align-items: center; position: relative; overflow-x: hidden; - background-color: var(--ns-bg-dark-100); height: 2.5rem; + background-color: var(--ns-bg-dark-100); border-color: var(--ns-primary); + color: var(--ns-primary); border-style: solid; border-width: 1px 1px 0 1px; } @@ -37,6 +38,7 @@ .selected-tab { height: 3rem; background-color: var(--ns-primary); + color: var(--offwhite); } .hover-tab { @@ -91,7 +93,7 @@ background-color: var(--ns-bg-dark-50); width: 100%; height: 36rem; - backdrop-filter: blur(2px); + /*backdrop-filter: blur(2px);*/ border-color: var(--ns-primary); border-style: solid; border-width: 1px 1px 1px 1px; @@ -104,21 +106,18 @@ justify-content: center; } -.folder-bottom-button { +.bottom-button { font-size: large; position: relative; - background-color: var(--ns-bg-dark-50); + background-color: var(--ns-primary); width: 10rem; - height: 2.5rem; - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; + height: 2.3rem; border-color: var(--ns-primary); border-style: solid; border-width: 0px 1px 1px 1px; } -.folder-bottom-button:hover { - background-color: var(--ns-primary); +.rounded-bottom { + border-top-right-radius: 0; + border-top-left-radius: 0; } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 895ac84e..c3da30fc 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,12 +1,12 @@
-
+
-
+
{{file.name}}
@@ -15,27 +15,22 @@
{{folderName}}
keyboard_arrow_right -