From 2bdb6fbef16d4a9bb8de3f6b9c3287406c032688 Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Sat, 3 Jul 2021 19:15:33 -0600 Subject: [PATCH] Add sidebar component --- src/main/webapp/app/app.module.ts | 11 +- .../layouts/sidebar/sidebar.component.html | 1 + .../layouts/sidebar/sidebar.component.scss | 0 .../layouts/sidebar/sidebar.component.spec.ts | 24 +++ .../app/layouts/sidebar/sidebar.component.ts | 12 ++ src/main/webapp/content/css/demo.css | 194 ++++++++++++++++++ .../webapp/content/scss/paper-dashboard.scss | 2 +- 7 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 src/main/webapp/app/layouts/sidebar/sidebar.component.html create mode 100644 src/main/webapp/app/layouts/sidebar/sidebar.component.scss create mode 100644 src/main/webapp/app/layouts/sidebar/sidebar.component.spec.ts create mode 100644 src/main/webapp/app/layouts/sidebar/sidebar.component.ts create mode 100644 src/main/webapp/content/css/demo.css diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index 036daec..0809527 100644 --- a/src/main/webapp/app/app.module.ts +++ b/src/main/webapp/app/app.module.ts @@ -28,6 +28,7 @@ import { FooterComponent } from './layouts/footer/footer.component'; import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component'; import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive'; import { ErrorComponent } from './layouts/error/error.component'; +import { SidebarComponent } from './layouts/sidebar/sidebar.component'; @NgModule({ imports: [ @@ -59,7 +60,15 @@ import { ErrorComponent } from './layouts/error/error.component'; { provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter }, httpInterceptorProviders, ], - declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent], + declarations: [ + MainComponent, + NavbarComponent, + ErrorComponent, + PageRibbonComponent, + ActiveMenuDirective, + FooterComponent, + SidebarComponent, + ], bootstrap: [MainComponent], }) export class AppModule { diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.html b/src/main/webapp/app/layouts/sidebar/sidebar.component.html new file mode 100644 index 0000000..52a8ffc --- /dev/null +++ b/src/main/webapp/app/layouts/sidebar/sidebar.component.html @@ -0,0 +1 @@ +

sidebar works!

diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.scss b/src/main/webapp/app/layouts/sidebar/sidebar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.spec.ts b/src/main/webapp/app/layouts/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..fa74fb1 --- /dev/null +++ b/src/main/webapp/app/layouts/sidebar/sidebar.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SidebarComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.ts b/src/main/webapp/app/layouts/sidebar/sidebar.component.ts new file mode 100644 index 0000000..078b9f4 --- /dev/null +++ b/src/main/webapp/app/layouts/sidebar/sidebar.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'jhi-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'], +}) +export class SidebarComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/main/webapp/content/css/demo.css b/src/main/webapp/content/css/demo.css new file mode 100644 index 0000000..a9b0bdd --- /dev/null +++ b/src/main/webapp/content/css/demo.css @@ -0,0 +1,194 @@ +/*! + + ========================================================= + * Paper Dashboard Pro Angular - v1.3.0 + ========================================================= + + * Product Page: https://www.creative-tim.com/product/paper-dashboard-pro-angular + * Copyright 2018 Creative Tim (http://www.creative-tim.com) + + ========================================================= + + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + + */ +.tim-row { + margin-bottom: 20px; +} + +.tim-white-buttons { + background-color: #777777; +} + +.typography-line { + padding-left: 25%; + margin-bottom: 35px; + position: relative; + display: block; + width: 100%; +} + +.typography-line span { + bottom: 10px; + color: #c0c1c2; + display: block; + font-weight: 400; + font-size: 13px; + line-height: 13px; + left: 0; + position: absolute; + width: 260px; + text-transform: none; +} + +.tim-row { + padding-top: 60px; +} + +.tim-row h3 { + margin-top: 0; +} + +.offline-doc .page-header { + display: flex; + align-items: center; +} + +.offline-doc .footer { + position: absolute; + width: 100%; + background: transparent; + bottom: 0; + color: #fff; + z-index: 1; +} + +#map { + position: relative; + width: 100%; + height: 100vh; +} + +.demo-iconshtml { + font-size: 62.5%; +} + +.demo-icons body { + font-size: 1.6rem; + font-family: sans-serif; + color: #333333; + background: white; +} + +.demo-icons a { + color: #608cee; + text-decoration: none; +} + +.demo-icons header { + text-align: center; + padding: 100px 0 0; +} + +.demo-icons header h1 { + font-size: 2.8rem; +} + +.demo-icons header p { + font-size: 1.4rem; + margin-top: 1em; +} + +.demo-icons header a:hover { + text-decoration: underline; +} + +.demo-icons .nc-icon { + font-size: 34px; +} + +.demo-icons section h2 { + border-bottom: 1px solid #e2e2e2; + padding: 0 0 1em 0.2em; + margin-bottom: 1em; +} + +.demo-icons ul { + padding-left: 0; +} + +.demo-icons ul::after { + clear: both; + content: ''; + display: table; +} + +.demo-icons ul li { + width: 20%; + float: left; + padding: 16px 0; + text-align: center; + border-radius: 0.25em; + -webkit-transition: background 0.2s; + -moz-transition: background 0.2s; + transition: background 0.2s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; +} + +.demo-icons ul li:hover { + background: #f4f4f4; +} + +.demo-icons ul p, +.demo-icons ul em, +.demo-icons ul input { + display: inline-block; + font-size: 1rem; + color: #999999; + -webkit-user-select: auto; + -moz-user-select: auto; + -ms-user-select: auto; + user-select: auto; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; +} + +.demo-icons ul p { + padding: 20px 0 0; + font-size: 12px; + margin: 0; +} + +.demo-icons ul p::selection, +.demo-icons ul em::selection { + background: #608cee; + color: #efefef; +} + +.demo-icons ul em { + font-size: 12px; +} + +.demo-icons ul em::before { + content: '['; +} + +.demo-icons ul em::after { + content: ']'; +} + +.demo-icons ul input { + text-align: center; + background: transparent; + border: none; + box-shadow: none; + outline: none; + display: none; +} diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss index 1b8d69d..12f7903 100644 --- a/src/main/webapp/content/scss/paper-dashboard.scss +++ b/src/main/webapp/content/scss/paper-dashboard.scss @@ -27,7 +27,7 @@ @import 'paper-dashboard/plugins/plugin-datetimepicker'; @import 'paper-dashboard/plugins/plugin-bootstrap-select'; @import 'paper-dashboard/plugins/plugin-jasny-fileupload'; -// @import 'paper-dashboard/plugins/plugin-tagsinput'; +@import 'paper-dashboard/plugins/plugin-tagsinput'; @import 'paper-dashboard/plugins/plugin-datatables.net'; @import 'paper-dashboard/plugins/plugin-jquery.jvectormap'; @import 'paper-dashboard/plugins/plugin-fullcalendar';