diff --git a/front-end/app-gestao/angular.json b/front-end/app-gestao/angular.json index e2c416e..84d6e8f 100644 --- a/front-end/app-gestao/angular.json +++ b/front-end/app-gestao/angular.json @@ -30,9 +30,14 @@ "styles": [ "@angular/material/prebuilt-themes/azure-blue.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", + "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css", + "https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/4.1.4/css/sb-admin-2.min.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] }, "configurations": { "production": { @@ -88,10 +93,16 @@ ], "styles": [ "@angular/material/prebuilt-themes/azure-blue.css", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.scss" + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css", + "https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/4.1.4/css/sb-admin-2.min.css", + "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + + ] } } } diff --git a/front-end/app-gestao/package-lock.json b/front-end/app-gestao/package-lock.json index f66f6ce..17564b4 100644 --- a/front-end/app-gestao/package-lock.json +++ b/front-end/app-gestao/package-lock.json @@ -17,6 +17,7 @@ "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", "bootstrap": "^5.3.8", + "jquery": "^3.7.1", "ngx-mask": "^20.0.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -426,6 +427,7 @@ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.11.tgz", "integrity": "sha512-+zcP6eq9+h6f09rZWHNIj2nap9P6S38mm75/WjdGZbl1BJy7vaASDnr4fwXKi2JvTyap/vj6mMuadFXEivavPw==", "license": "MIT", + "peer": true, "dependencies": { "parse5": "^8.0.0", "tslib": "^2.3.0" @@ -476,6 +478,7 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.10.tgz", "integrity": "sha512-12fEzvKbEqjqy1fSk9DMYlJz6dF1MJVXuC5BB+oWWJpd+2lfh4xJ62pkvvLGAICI89hfM5n9Cy5kWnXwnqPZsA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -492,6 +495,7 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.10.tgz", "integrity": "sha512-cW939Lr8GZjPSYfbQKIDNrUaHWmn2M+zBbERThfq5skLuY+xM60bJFv4NqBekfX6YqKLCY62ilUZlnImYIXaqA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -505,6 +509,7 @@ "integrity": "sha512-9BemvpFxA26yIVdu8ROffadMkEdlk/AQQ2Jb486w7RPkrvUQ0pbEJukhv9aryJvhbMopT66S5H/j4ipOUMzmzQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "7.28.3", "@jridgewell/sourcemap-codec": "^1.4.14", @@ -537,6 +542,7 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.10.tgz", "integrity": "sha512-g99Qe+NOVo72OLxowVF9NjCckswWYHmvO7MgeiZTDJbTjF9tXH96dMx7AWq76/GUinV10sNzDysVW16NoAbCRQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -562,6 +568,7 @@ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.10.tgz", "integrity": "sha512-9yWr51EUauTEINB745AaHwZNTHLpXIm4uxuykxzOg+g2QskEgVfH26uS8G2ogdNuwYpB8wnsXWr34qhM3qgOWw==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -597,6 +604,7 @@ "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.10.tgz", "integrity": "sha512-UV8CGoB5P3FmJciI3/I/n3L7C3NVgGh7bIlZ1BaB/qJDtv0Wq0rRAGwmT/Z3gwmrRtfHZWme7/CeQ2CYJmMyUQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -663,6 +671,7 @@ "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -1613,6 +1622,7 @@ "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@inquirer/checkbox": "^4.2.1", "@inquirer/confirm": "^5.1.14", @@ -3585,6 +3595,7 @@ "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3937,6 +3948,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", @@ -5022,6 +5034,7 @@ "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.0", @@ -5974,6 +5987,13 @@ "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz", "integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==", "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", "license": "MIT" }, "node_modules/js-tokens": { @@ -6059,6 +6079,7 @@ "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@colors/colors": "1.5.0", "body-parser": "^1.19.0", @@ -6526,6 +6547,7 @@ "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", @@ -8200,6 +8222,7 @@ "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", "license": "Apache-2.0", + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -8256,6 +8279,7 @@ "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -9086,7 +9110,8 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tuf-js": { "version": "3.1.0", @@ -9124,6 +9149,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -9310,6 +9336,7 @@ "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -9713,6 +9740,7 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -9731,7 +9759,8 @@ "version": "0.15.1", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz", "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==", - "license": "MIT" + "license": "MIT", + "peer": true } } } diff --git a/front-end/app-gestao/package.json b/front-end/app-gestao/package.json index 9546546..47061ce 100644 --- a/front-end/app-gestao/package.json +++ b/front-end/app-gestao/package.json @@ -31,6 +31,7 @@ "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", "bootstrap": "^5.3.8", + "jquery": "^3.7.1", "ngx-mask": "^20.0.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/front-end/app-gestao/src/app/app.routes.ts b/front-end/app-gestao/src/app/app.routes.ts index 212ca25..ea2ebbd 100644 --- a/front-end/app-gestao/src/app/app.routes.ts +++ b/front-end/app-gestao/src/app/app.routes.ts @@ -1,11 +1,12 @@ import { Routes } from '@angular/router'; -import { Dashboard } from './pages/dashboard/dashboard'; -import { Login } from './pages/auth/login/login'; -import { SignIn } from './pages/auth/sign-in/sign-in'; +import { Login } from './views/pages/auth/login/login'; +import { SignIn } from './views/pages/auth/sign-in/sign-in'; +import { DefaultLayout } from './layout/default-layout/default-layout'; + export const routes: Routes = [ {path:'login', component:Login}, {path:'signin', component:SignIn}, - {path:'dashboard', component:Dashboard}, + {path:'teste', component:DefaultLayout}, {path:'', redirectTo:'login', pathMatch:'full'} ]; diff --git a/front-end/app-gestao/src/app/app.scss b/front-end/app-gestao/src/app/app.scss index 9116c81..df86666 100644 --- a/front-end/app-gestao/src/app/app.scss +++ b/front-end/app-gestao/src/app/app.scss @@ -1,5 +1,7 @@ .container-fluid{ // background-color: red; + width: 100%; padding: 0; margin: 0; - } \ No newline at end of file + } + diff --git a/front-end/app-gestao/src/app/components/form-login/form-login.scss b/front-end/app-gestao/src/app/components/form-login/form-login.scss index d4b2e51..581506e 100644 --- a/front-end/app-gestao/src/app/components/form-login/form-login.scss +++ b/front-end/app-gestao/src/app/components/form-login/form-login.scss @@ -1,8 +1,19 @@ +@media(min-width:375px){ .form{ border-radius: 3px; box-shadow: -1px 6px 7px 2px #ababab; .btn{ width: 100%; } -} \ No newline at end of file +} +} + +@media(max-width:320px){ +.form{ + border-radius: 3px; + box-shadow: -1px 6px 7px 2px #ababab; + +} +} + diff --git a/front-end/app-gestao/src/app/components/side-bar/side-bar.html b/front-end/app-gestao/src/app/components/side-bar/side-bar.html deleted file mode 100644 index e69de29..0000000 diff --git a/front-end/app-gestao/src/app/components/side-bar/side-bar.scss b/front-end/app-gestao/src/app/components/side-bar/side-bar.scss deleted file mode 100644 index e69de29..0000000 diff --git a/front-end/app-gestao/src/app/components/side-bar/side-bar.ts b/front-end/app-gestao/src/app/components/side-bar/side-bar.ts deleted file mode 100644 index d4108b5..0000000 --- a/front-end/app-gestao/src/app/components/side-bar/side-bar.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-side-bar', - imports: [], - templateUrl: './side-bar.html', - styleUrl: './side-bar.scss', -}) -export class SideBar { - -} diff --git a/front-end/app-gestao/src/app/layout/default-layout/default-layout.html b/front-end/app-gestao/src/app/layout/default-layout/default-layout.html new file mode 100644 index 0000000..69c98f5 --- /dev/null +++ b/front-end/app-gestao/src/app/layout/default-layout/default-layout.html @@ -0,0 +1,11 @@ + +
+ + + + +
+ +
+ +
diff --git a/front-end/app-gestao/src/app/layout/default-layout/default-layout.scss b/front-end/app-gestao/src/app/layout/default-layout/default-layout.scss new file mode 100644 index 0000000..964cdf6 --- /dev/null +++ b/front-end/app-gestao/src/app/layout/default-layout/default-layout.scss @@ -0,0 +1,6 @@ +.wrapper { + display: flex; + min-height: 100vh; /* ocupa a altura toda da tela */ + width: 100%; /* ocupa 100% da largura */ +} + diff --git a/front-end/app-gestao/src/app/components/side-bar/side-bar.spec.ts b/front-end/app-gestao/src/app/layout/default-layout/default-layout.spec.ts similarity index 56% rename from front-end/app-gestao/src/app/components/side-bar/side-bar.spec.ts rename to front-end/app-gestao/src/app/layout/default-layout/default-layout.spec.ts index 3fff534..4052cdf 100644 --- a/front-end/app-gestao/src/app/components/side-bar/side-bar.spec.ts +++ b/front-end/app-gestao/src/app/layout/default-layout/default-layout.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SideBar } from './side-bar'; +import { DefaultLayout } from './default-layout'; -describe('SideBar', () => { - let component: SideBar; - let fixture: ComponentFixture; +describe('DefaultLayout', () => { + let component: DefaultLayout; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SideBar] + imports: [DefaultLayout] }) .compileComponents(); - fixture = TestBed.createComponent(SideBar); + fixture = TestBed.createComponent(DefaultLayout); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/front-end/app-gestao/src/app/layout/default-layout/default-layout.ts b/front-end/app-gestao/src/app/layout/default-layout/default-layout.ts new file mode 100644 index 0000000..fef2d89 --- /dev/null +++ b/front-end/app-gestao/src/app/layout/default-layout/default-layout.ts @@ -0,0 +1,20 @@ +import { CommonModule } from '@angular/common'; +import { Component, ViewEncapsulation } from '@angular/core'; + import { Dashboard } from "../../views/dashboard/dashboard"; +import { Sidebar } from "../../../components/sidebar/sidebar"; + +@Component({ + selector: 'app-default-layout', + imports: [CommonModule, Dashboard, Sidebar], + templateUrl: './default-layout.html', + styleUrl: './default-layout.scss', + encapsulation: ViewEncapsulation.None +}) +export class DefaultLayout { + sidebarToggled = false; + + toggleSidebar():void{ + this.sidebarToggled = !this.sidebarToggled; + } + +} diff --git a/front-end/app-gestao/src/app/pages/dashboard/dashboard.html b/front-end/app-gestao/src/app/pages/dashboard/dashboard.html deleted file mode 100644 index ce5f654..0000000 --- a/front-end/app-gestao/src/app/pages/dashboard/dashboard.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
- - -
-
-
-
-
-
\ No newline at end of file diff --git a/front-end/app-gestao/src/app/pages/dashboard/dashboard.scss b/front-end/app-gestao/src/app/pages/dashboard/dashboard.scss deleted file mode 100644 index e69de29..0000000 diff --git a/front-end/app-gestao/src/app/pages/dashboard/dashboard.ts b/front-end/app-gestao/src/app/pages/dashboard/dashboard.ts deleted file mode 100644 index b5a09ab..0000000 --- a/front-end/app-gestao/src/app/pages/dashboard/dashboard.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, signal } from '@angular/core'; -import { SideBar } from "../../components/side-bar/side-bar"; - -@Component({ - selector: 'app-dashboard', - imports: [SideBar], - templateUrl: './dashboard.html', - styleUrl: './dashboard.scss', -}) -export class Dashboard { - sidebarOpen = signal(false); - - toggleSidebar(){ - this.sidebarOpen.update((v)=> !v); - } -} diff --git a/front-end/app-gestao/src/app/views/dashboard/dashboard.html b/front-end/app-gestao/src/app/views/dashboard/dashboard.html new file mode 100644 index 0000000..977644a --- /dev/null +++ b/front-end/app-gestao/src/app/views/dashboard/dashboard.html @@ -0,0 +1,163 @@ +
+ +
+ + + + +
+
+

Dashboard

+
+ +
+ +
+
+
+
+ Receita Mensal +
+
R$ 40.000
+
+
+
+ +
+
+
+
+ Receita Anual +
+
R$ 215.000
+
+
+
+ +
+
+
+
Tarefas
+ 50% +
+
+
+ +
+
+
+
+ Pendências +
+ 18 +
+
+
+
+ +
+
+
+
+
Painel de Largura Total
+
+
+ Este é um painel simples ocupando toda a largura disponível da página. +
+
+
+
+ +
+
+
+
+
Tabela de Exemplo
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#NomeStatusAção
1Item AAtivo
2Item BPendente
3Item CInativo
+
+
+
+
+
+
+
+
diff --git a/front-end/app-gestao/src/app/views/dashboard/dashboard.scss b/front-end/app-gestao/src/app/views/dashboard/dashboard.scss new file mode 100644 index 0000000..02654b8 --- /dev/null +++ b/front-end/app-gestao/src/app/views/dashboard/dashboard.scss @@ -0,0 +1,9 @@ +.content-wrapper { + flex: 1 1 auto; + display: flex; + flex-direction: column; + // border: 2px solid; + min-height: 100vh; + display: flex; + flex-direction: column; +} diff --git a/front-end/app-gestao/src/app/pages/dashboard/dashboard.spec.ts b/front-end/app-gestao/src/app/views/dashboard/dashboard.spec.ts similarity index 100% rename from front-end/app-gestao/src/app/pages/dashboard/dashboard.spec.ts rename to front-end/app-gestao/src/app/views/dashboard/dashboard.spec.ts diff --git a/front-end/app-gestao/src/app/views/dashboard/dashboard.ts b/front-end/app-gestao/src/app/views/dashboard/dashboard.ts new file mode 100644 index 0000000..1d64783 --- /dev/null +++ b/front-end/app-gestao/src/app/views/dashboard/dashboard.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-dashboard', + imports: [], + templateUrl: './dashboard.html', + styleUrl: './dashboard.scss', +}) +export class Dashboard { + sidebarToggled = false; + + toggleSidebar():void{ + this.sidebarToggled = !this.sidebarToggled; + } +} diff --git a/front-end/app-gestao/src/app/pages/auth/login/login.html b/front-end/app-gestao/src/app/views/pages/auth/login/login.html similarity index 100% rename from front-end/app-gestao/src/app/pages/auth/login/login.html rename to front-end/app-gestao/src/app/views/pages/auth/login/login.html diff --git a/front-end/app-gestao/src/app/pages/auth/login/login.scss b/front-end/app-gestao/src/app/views/pages/auth/login/login.scss similarity index 96% rename from front-end/app-gestao/src/app/pages/auth/login/login.scss rename to front-end/app-gestao/src/app/views/pages/auth/login/login.scss index cab106c..808654c 100644 --- a/front-end/app-gestao/src/app/pages/auth/login/login.scss +++ b/front-end/app-gestao/src/app/views/pages/auth/login/login.scss @@ -31,7 +31,7 @@ .login-form-box{ width: 100%; max-width: 450px; // tamanho padrão moderno - padding: 2rem; + padding: 1rem; } } @@ -55,7 +55,7 @@ .login-container{ flex-direction: column; - padding: 1.5rem; + padding: 1rem; } .login-banner-wrapper{ diff --git a/front-end/app-gestao/src/app/pages/auth/login/login.spec.ts b/front-end/app-gestao/src/app/views/pages/auth/login/login.spec.ts similarity index 100% rename from front-end/app-gestao/src/app/pages/auth/login/login.spec.ts rename to front-end/app-gestao/src/app/views/pages/auth/login/login.spec.ts diff --git a/front-end/app-gestao/src/app/pages/auth/login/login.ts b/front-end/app-gestao/src/app/views/pages/auth/login/login.ts similarity index 59% rename from front-end/app-gestao/src/app/pages/auth/login/login.ts rename to front-end/app-gestao/src/app/views/pages/auth/login/login.ts index 452fe4d..cf63278 100644 --- a/front-end/app-gestao/src/app/pages/auth/login/login.ts +++ b/front-end/app-gestao/src/app/views/pages/auth/login/login.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { FormLogin } from '../../../components/form-login/form-login'; -import { Brand } from '../../../components/brand/brand'; - +import { FormLogin } from '../../../../components/form-login/form-login'; +import { Brand } from '../../../../components/brand/brand'; + @Component({ selector: 'app-login', imports: [FormLogin, Brand], diff --git a/front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.html b/front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.html similarity index 100% rename from front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.html rename to front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.html diff --git a/front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.scss b/front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.scss similarity index 100% rename from front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.scss rename to front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.scss diff --git a/front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.spec.ts b/front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.spec.ts similarity index 100% rename from front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.spec.ts rename to front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.spec.ts diff --git a/front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.ts b/front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.ts similarity index 59% rename from front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.ts rename to front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.ts index 676dd6f..f2d80a1 100644 --- a/front-end/app-gestao/src/app/pages/auth/sign-in/sign-in.ts +++ b/front-end/app-gestao/src/app/views/pages/auth/sign-in/sign-in.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { FormSignIn } from '../../../components/form-sign-in/form-sign-in'; -import { Brand } from '../../../components/brand/brand'; +import { FormSignIn } from '../../../../components/form-sign-in/form-sign-in'; +import { Brand } from '../../../../components/brand/brand'; @Component({ selector: 'app-sign-in', diff --git a/front-end/app-gestao/src/components/sidebar/sidebar.scss b/front-end/app-gestao/src/components/sidebar/sidebar.scss new file mode 100644 index 0000000..a2c9e3d --- /dev/null +++ b/front-end/app-gestao/src/components/sidebar/sidebar.scss @@ -0,0 +1,36 @@ +/* SIDEBAR LARGURA NORMAL */ +.wrapper .sidebar { + width: 14rem; + flex-shrink: 0; + transition: width 0.2s ease; + +} /* ========== DESKTOP (MD+) ========== */ + +.sidebar{ + // border: 2px solid red; + height: 100%; +} + +@media (min-width: 768px) { + .wrapper.sidebar-toggled .sidebar, + .wrapper .sidebar.toggled { + width: 6rem; + overflow: visible; + } /* Esconde texto quando recolhida */ + .wrapper.sidebar-toggled .sidebar .nav-link span, + .wrapper .sidebar.toggled .nav-link span { + display: none; + } /* Esconde títulos */ + .wrapper.sidebar-toggled .sidebar .sidebar-heading, + .wrapper .sidebar.toggled .sidebar-heading { + display: none; + } +} /* ========== MOBILE ========== */ + +@media (max-width: 767.98px) { + .wrapper.sidebar-toggled .sidebar, + .wrapper .sidebar.toggled { + width: 0; + overflow: hidden; + } +} diff --git a/front-end/app-gestao/src/styles.scss b/front-end/app-gestao/src/styles.scss index 940c192..f1b2d6b 100644 --- a/front-end/app-gestao/src/styles.scss +++ b/front-end/app-gestao/src/styles.scss @@ -1,9 +1,6 @@ - -// Include theming for Angular Material with `mat.theme()`. -// This Sass mixin will define CSS variables that are used for styling Angular Material -// components according to the Material 3 design spec. -// Learn more about theming and how to use it for your application's -// custom components at https://material.angular.dev/guide/theming +// ========================= +// 1) THEME ANGULAR MATERIAL +// ========================= @use '@angular/material' as mat; html { @@ -17,23 +14,41 @@ html { )); } +// ========================= +// 2) RESET / BASE GLOBAL +// ========================= + +html, body { - // Default the application to a light color theme. This can be changed to - // `dark` to enable the dark color theme, or to `light dark` to defer to the - // user's system settings. - color-scheme: light; + height: 100%; + margin: 0; // zera margens padrão do navegador +} - // Set a default background, font and text colors for the application using - // Angular Material's system-level CSS variables. Learn more about these - // variables at https://material.angular.dev/guide/system-variables +// Deixa o Angular Material cuidar de peso/tamanho da fonte +// e aqui só garantimos a família +body { + color-scheme: light; background-color: var(--mat-sys-surface); color: var(--mat-sys-on-surface); - font: var(--mat-sys-body-medium); - // Reset the user agent margin. - margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; } -/* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +// ========================= +// 3) LAYOUT PRINCIPAL (DASHBOARD) +// ========================= + +// WRAPPER PRINCIPAL (sidebar + conteúdo) +.wrapper { + display: flex; + min-height: 100vh; + width: 100%; +} + +// ÁREA PRINCIPAL (topbar + conteúdo + footer) +.content-wrapper { + flex: 1 1 auto; + min-height: 100vh; + display: flex; + flex-direction: column; +} diff --git a/lab/dashboard/dashboard-lab/index.html b/lab/dashboard/dashboard-lab/index.html index 0a10514..c33ea3b 100644 --- a/lab/dashboard/dashboard-lab/index.html +++ b/lab/dashboard/dashboard-lab/index.html @@ -466,6 +466,7 @@
+