From bbab294d80bfa47f7686a19ba42bc9e22256902f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 23 Dec 2021 12:02:33 +0300 Subject: [PATCH] remove unnecessary css && update app.code --- src/app/app.blockviewer.component.scss | 31 +-------- src/app/app.blockviewer.component.ts | 4 +- src/app/app.code.component.scss | 68 ------------------- src/app/app.code.component.ts | 1 - .../demo/view/documentation.component.html | 22 ++++-- src/assets/demo/documentation.scss | 28 ++++++++ src/styles.scss | 63 +---------------- 7 files changed, 49 insertions(+), 168 deletions(-) delete mode 100644 src/app/app.code.component.scss diff --git a/src/app/app.blockviewer.component.scss b/src/app/app.blockviewer.component.scss index e45224f..7b1e69a 100644 --- a/src/app/app.blockviewer.component.scss +++ b/src/app/app.blockviewer.component.scss @@ -88,7 +88,7 @@ overflow: hidden; } -pre[class*="language-"] { +:host ::ng-deep pre[class*="language-"] { margin: 0 !important; &:before, &:after { @@ -103,31 +103,6 @@ pre[class*="language-"] { color: var(--text-color); font-size: 14px; padding: 0 2rem !important; - - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } - - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } - - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.string { - background: transparent; - } - } } } @@ -141,8 +116,4 @@ pre[class*="language-"] { margin-left: 0; } } -} -::ng-deep pre{ - margin: 0 !important; - padding: 0 !important; } \ No newline at end of file diff --git a/src/app/app.blockviewer.component.ts b/src/app/app.blockviewer.component.ts index 9d8422a..64f7692 100644 --- a/src/app/app.blockviewer.component.ts +++ b/src/app/app.blockviewer.component.ts @@ -1,5 +1,6 @@ import { Component, Input } from '@angular/core'; import { environment } from '../environments/environment'; + enum BlockView { PREVIEW, CODE @@ -30,7 +31,8 @@ enum BlockView {
- {{code}} + {{code}} +
diff --git a/src/app/app.code.component.scss b/src/app/app.code.component.scss deleted file mode 100644 index c080de1..0000000 --- a/src/app/app.code.component.scss +++ /dev/null @@ -1,68 +0,0 @@ -.p-d-flex > div, -.box { - background-color: var(--surface-e); - text-align: center; - padding: 1rem; - border-radius: 4px; - box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); -} - -.p-d-flex > div { - width: 8rem; -} - -i:not([class~="pi"]) { - background-color: var(--surface-b); - color: var(--primary-color); - font-family: Monaco, courier, monospace; - font-style: normal; - font-size: 12px; - padding: 2px 4px; - letter-spacing: .5px; - border-radius: 3px; - font-weight: 600; -} - -:host ::ng-deep pre[class*="language-"] { - box-shadow: none; - border: 0 none; - - &:before, &:after { - display: none !important; - } - - code { - border-left: 0px solid var(--surface-d) !important; - box-shadow: none !important; - background: var(--surface-b) !important; - margin: 0 !important; - padding-bottom: 1.5rem; - color: var(--text-color); - font-size: 14px; - - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } - - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } - - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.string { - background: transparent; - } - } - } -} diff --git a/src/app/app.code.component.ts b/src/app/app.code.component.ts index ba0412b..97fcb87 100644 --- a/src/app/app.code.component.ts +++ b/src/app/app.code.component.ts @@ -7,7 +7,6 @@ import { CommonModule } from '@angular/common';
`, - styleUrls: ['./app.code.component.scss'] }) export class AppCodeComponent implements AfterViewInit { diff --git a/src/app/demo/view/documentation.component.html b/src/app/demo/view/documentation.component.html index b4deaee..20e0d39 100755 --- a/src/app/demo/view/documentation.component.html +++ b/src/app/demo/view/documentation.component.html @@ -14,7 +14,8 @@

Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at Why PrimeNG Templates article.

-npm install -g @angular/cli +npm install -g @angular/cli +

Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.

@@ -22,7 +23,8 @@ npm install -g @angular/cli cd sakai-ng npm install -ng serve +ng serve +

The application should run at http://localhost:4200/, you may now start with the development of your application.

@@ -39,7 +41,8 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github. Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). -Run 'ng help' for more options. +Run 'ng help' for more options. +
Structure

Sakai consists of 2 main parts; the application layout, layout resources. app.component.html inside app folder is the html template for the base layout, @@ -78,7 +81,8 @@ Run 'ng help' for more options. <app-config></app-config> <div *ngIf="menuActiveMobile" class="layout-mask p-component-overlay"></div> -</div> +</div> +

Menu

Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems, @@ -115,8 +119,14 @@ export class AppMenuComponent implements OnInit, AfterViewInit { {label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']}, {label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']}, {label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']}, - {label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']}, - {label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']}, + {label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'], + children:[ + {label: '', component: 'PersonalDemoComponent'}, + {label: 'seat', component: 'SeatDemoComponent'}, + {label: 'payment', component: 'PaymentDemoComponent'}, + {label: 'confirmation', component: 'ConfirmationDemoComponent'}, + ] + }, {label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']}, {label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']}, {label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']}, diff --git a/src/assets/demo/documentation.scss b/src/assets/demo/documentation.scss index e69de29..2e3697e 100644 --- a/src/assets/demo/documentation.scss +++ b/src/assets/demo/documentation.scss @@ -0,0 +1,28 @@ +pre[class*="language-"] { + &:before, &:after { + display: none !important; + } + + code { + border-left: 6px solid var(--surface-border) !important; + box-shadow: none !important; + background: var(--surface-ground) !important; + margin: 1em 0; + color: var(--text-color); + font-size: 14px; + } +} + +i:not([class~="pi"]) { + background-color: transparent; + color: #2196f3; + font-family: Monaco, courier, monospace; + font-style: normal; + font-size: 12px; + font-weight: 500; + padding: 0 4px; + letter-spacing: .5px; + font-weight: 600; + margin: 0 2px; + display: inline-flex; +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index b09c9c3..6f96a8c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -8,65 +8,4 @@ @import "../node_modules/@fullcalendar/timegrid/main.min.css"; @import "assets/demo/flags/flags.css"; @import "assets/demo/badges.scss"; -@import "assets/demo/documentation.scss"; - -.docs { - i:not([class~="pi"]) { - background-color: transparent; - color: #2196f3; - font-family: Monaco, courier, monospace; - font-style: normal; - font-size: 12px; - font-weight: 500; - padding: 0 4px; - letter-spacing: .5px; - font-weight: 600; - margin: 0 2px; - display: inline-flex; - } - - a { - font-weight: 500; - } -} - -pre[class*="language-"] { - &:before, &:after { - display: none !important; - } - - code { - border-left: 6px solid var(--surface-border) !important; - box-shadow: none !important; - background: var(--surface-ground) !important; - margin: 1em 0; - color: var(--text-color); - font-size: 14px; - } - - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } - - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } - - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.variable, - &.string { - background: transparent; - } - } -} \ No newline at end of file +@import "assets/demo/documentation.scss"; \ No newline at end of file