feat: demo in about

Author: peterpeterparker

studio/src/app/components/feed/app-demo/app-demo.scss

@@ -1,3 +1,12 @@
+:host {
+  width: 100%;
+
+  div.container {
+    display: var(--demo-display);
+    width: 100%;
+  }
+}
+
 ion-segment {
   margin-bottom: 16px;
 }

studio/src/app/components/feed/app-demo/app-demo.tsx

@@ -22,7 +22,7 @@ export class AppDemo {
     }
 
     render() {
-        return <div>
+        return <div class="container">
             <ion-segment onIonChange={(e: CustomEvent) => this.switchType(e)}>
                 <ion-segment-button value="mobile" checked={this.type === DemoType.MOBILE}>
                     <ion-label>Mobile</ion-label>

studio/src/app/components/feed/app-popular/app-popular.scss

@@ -2,10 +2,13 @@ app-popular {
   ion-card[class*="sc-ion-card"] {
     --background: white;
     color: black;
+    padding: 16px;
   }
 
-  div.demo {
-    position: relative;
+  ion-card.demo {
+    padding: 16px;
+    --background: white;
+    min-height: 340px;
   }
 }
 

studio/src/app/components/feed/app-popular/app-popular.tsx

@@ -18,12 +18,14 @@ export class AppPopular {
 
                     <p padding-top>What does that mean 🤔?</p>
 
-                    <p padding-top padding-bottom>It means that every presentations you write and publish with DeckDeckGo are also <strong>apps</strong> 🤪</p>
+                    <p padding-top>It means that every presentations you write and publish with DeckDeckGo are <strong>apps</strong> too 🤪</p>
+
+                    <p padding-top padding-bottom>It is also an online community for sharing presentations, slides and talks about your interests and ideas.</p>
                 </ion-card-content>
             </ion-card>,
-            <div class="demo">
+            <ion-card class="demo">
                 <app-demo></app-demo>
-            </div>
+            </ion-card>
         ];
     }
 

studio/src/app/pages/core/about/app-about/app-about.scss

@@ -2,6 +2,18 @@ app-about {
   main {
     background: white;
 
+    ion-grid {
+
+      ion-col.demo {
+        display: flex;
+        justify-content: center;
+
+        app-demo {
+          --demo-display: inline-block;
+        }
+      }
+    }
+
     div.team {
       display: flex;
       justify-content: center;

studio/src/app/pages/core/about/app-about/app-about.tsx

@@ -14,13 +14,25 @@ export class AppAbout {
                 <main padding>
                     <h1>About DeckDeckGo</h1>
 
-                    <h3 padding-top>Edit anywhere, display everywhere</h3>
+                    <ion-grid>
+                        <ion-row>
+                            <ion-col size="12" size-md="6">
+                                <h3 padding-top>Edit anywhere, display everywhere</h3>
 
-                    <p padding-top>DeckDeckGo aims to be the open source editor for PWA presentations.</p>
+                                <p padding-top>DeckDeckGo aims to be the open source editor for PWA presentations.</p>
 
-                    <p>What does that mean 🤔? It means that every presentations you write and publish with DeckDeckGo are also <strong>apps</strong> for desktop and mobile 🤪</p>
+                                <p>What does that mean 🤔? It means that every presentations you write and publish with DeckDeckGo are <strong>apps</strong> too 🤪</p>
 
-                    <p>Furthermore, DeckDeckGo aims to be an online community for sharing presentations, slides and talks about your interests and ideas too.</p>
+                                <p>It is also an online community for sharing presentations, slides and talks about your interests and ideas.</p>
+
+                                <p>DeckDeckGo was created with passion in Zürich🇨🇭in 2019</p>
+                            </ion-col>
+
+                            <ion-col class="demo">
+                                <app-demo></app-demo>
+                            </ion-col>
+                        </ion-row>
+                    </ion-grid>
 
                     <h1 class="ion-text-center ion-padding-top">Team</h1>
 
@@ -70,8 +82,6 @@ export class AppAbout {
                         </div>
                     </div>
 
-                    <p padding-top>DeckDeckGo was created with passion in Zürich🇨🇭in 2019</p>
-
                 </main>
 
             </ion-content>