fix(typography): fix typography responsiveness

src/app/pages/ui-features/typography/typography.component.html

@@ -1,7 +1,7 @@
 <div class="row">
-  <div class="col-lg-12 col-xl-8">
+  <div class="col-xxxl-8">
     <div class="row">
-      <div class="col-sm-12 col-md-6 col-xxl-7">
+      <div class="col-md-6 col-xxl-7">
         <nb-card size="medium">
           <nb-card-header>
             Used Fonts
@@ -42,8 +42,32 @@
             </div>
           </nb-card-body>
         </nb-card>
+
+        <nb-card size="small">
+          <nb-card-header>
+            Article Example
+          </nb-card-header>
+          <nb-card-body>
+            <h4>So what's About the grammar?</h4>
+            <p class="text-indent">
+              Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
+              there live the blind texts.
+              They live in <strong>Bookmarksgrove</strong>.
+            </p>
+            <p class="text-indent">
+              A small <strong>river named Duden</strong> 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
+              <a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
+              the far <strong>World of Grammar</strong>.
+            </p>
+          </nb-card-body>
+        </nb-card>
       </div>
-      <div class="col-sm-12 col-md-6 col-xxl-5">
+      <div class="col-md-6 col-xxl-5">
         <nb-card size="medium" class="headings-card">
           <nb-card-header>
             Headings
@@ -105,34 +129,7 @@
             </div>
           </nb-card-body>
         </nb-card>
-      </div>
 
-      <div class="col-sm-12 col-md-6 col-xxl-7">
-        <nb-card size="small">
-          <nb-card-header>
-            Article Example
-          </nb-card-header>
-          <nb-card-body>
-            <h4>So what's About the grammar?</h4>
-            <p class="text-indent">
-              Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
-              there live the blind texts.
-              They live in <strong>Bookmarksgrove</strong>.
-            </p>
-            <p class="text-indent">
-              A small <strong>river named Duden</strong> 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
-              <a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
-              the far <strong>World of Grammar</strong>.
-            </p>
-          </nb-card-body>
-        </nb-card>
-      </div>
-      <div class="col-sm-12 col-md-6 col-xxl-5">
         <nb-card size="small">
           <nb-card-header>
             Blockquotes
@@ -154,8 +151,9 @@
       </div>
     </div>
   </div>
-  <div class="col-lg-12 col-xl-4">
+
-    <nb-card size="xxlarge">
+  <div class="col-md-6 col-xxxl-4">
+    <nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'xxlarge' : 'large'">
       <nb-card-header>
         Font Colors
       </nb-card-header>
@@ -228,13 +226,8 @@
       </nb-card-body>
     </nb-card>
   </div>
-</div>
 
-
+  <div class="col-md-6 col-xxxl-4">
-<div class="row">
-  <div class="col-lg-12 col-xl-8">
-    <div class="row">
-      <div class="col-sm-12 col-md-6 col-xxl-7">
     <nb-card size="large">
       <nb-card-header>
         Alerts
@@ -261,7 +254,8 @@
       </nb-card-body>
     </nb-card>
   </div>
-      <div class="col-sm-12 col-md-6 col-xxl-5">
+
+  <div class="col-md-6 col-xxxl-4">
     <nb-card size="large">
       <nb-card-header>
         Text Types
@@ -285,9 +279,8 @@
       </nb-card-body>
     </nb-card>
   </div>
-    </div>
+
-  </div>
+  <div class="col-md-6 col-xxxl-4">
-  <div class="col-lg-12 col-xl-4">
     <nb-card size="large">
       <nb-card-header>
         Lists

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;
+      });
+  }
 }