From 99ce49007aacc0e9dd048096bc5b27bd5b96453f Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Mon, 18 Sep 2017 14:18:24 +0300 Subject: [PATCH] fix(typography): fix typography responsiveness --- .../typography/typography.component.html | 173 +++++++++--------- .../typography/typography.component.ts | 12 ++ 2 files changed, 95 insertions(+), 90 deletions(-) diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html index 7971b602..1cfcb988 100644 --- a/src/app/pages/ui-features/typography/typography.component.html +++ b/src/app/pages/ui-features/typography/typography.component.html @@ -1,7 +1,7 @@
-
+
-
+
Used Fonts @@ -42,8 +42,32 @@
+ + + + Article Example + + +

So what's About the grammar?

+

+ Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, + there live the blind texts. + They live in Bookmarksgrove. +

+

+ A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly + into your mouth. + Even the all-powerful Pointing has no control about the blind texts it is an almost + unorthographic life One day however a small + line of blind text by the name of + Lorem Ipsum decided to leave for + the far World of Grammar. +

+ +
-
+
Headings @@ -105,34 +129,7 @@
-
-
- - - Article Example - - -

So what's About the grammar?

-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - They live in Bookmarksgrove. -

-

- A small river named Duden flows by their place and supplies it with the - necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly - into your mouth. - Even the all-powerful Pointing has no control about the blind texts it is an almost - unorthographic life One day however a small - line of blind text by the name of - Lorem Ipsum decided to leave for - the far World of Grammar. -

- - -
-
Blockquotes @@ -154,8 +151,9 @@
-
- + +
+ Font Colors @@ -228,66 +226,61 @@
-
- -
-
-
-
- - - Alerts - - - - - - - - - - -
-
- - - Text Types - - -

Highlighted text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

-

Bold Text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

-

Link Text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

- - -
-
+
+ + + Alerts + + + + + + + + + +
-
+ +
+ + + Text Types + + +

Highlighted text

+

+ Far far away, behind the word mountains, far from the countries + Vokalia and Consonantia, there live the blind texts. +

+

Bold Text

+

+ Far far away, behind the word mountains, far from the countries + Vokalia and Consonantia, there live the blind texts. +

+

Link Text

+

+ Far far away, behind the word mountains, far from the countries + Vokalia and Consonantia, there live the blind texts. +

+ + +
+ +
Lists diff --git a/src/app/pages/ui-features/typography/typography.component.ts b/src/app/pages/ui-features/typography/typography.component.ts index b212cbb2..ad4abf8c 100644 --- a/src/app/pages/ui-features/typography/typography.component.ts +++ b/src/app/pages/ui-features/typography/typography.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme'; @Component({ selector: 'ngx-typography', @@ -6,5 +7,16 @@ import { Component } from '@angular/core'; templateUrl: './typography.component.html', }) export class TypographyComponent { + breakpoint: NbMediaBreakpoint; + breakpoints: any; + constructor(private themeService: NbThemeService, + private breakpointService: NbMediaBreakpointsService) { + + this.breakpoints = breakpointService.getBreakpointsMap(); + themeService.onMediaQueryChange() + .subscribe(([oldValue, newValue]) => { + this.breakpoint = newValue; + }); + } }