Merge pull request #820 from deckgo/enterprise

Enterprise

Author: peterpeterparker

studio/src/app/app-root.tsx

@@ -126,10 +126,14 @@ export class AppRoot {
     return [
       <ion-app class={this.loading ? 'loading' : undefined}>
         <ion-router useHash={false}>
-          <ion-route url="/" component="app-home" />
+          <ion-route url="/" component="app-welcome" />
+
+          <ion-route url="/home" component="app-home" />
 
           <ion-route url="/discover" component="app-discover" />
 
+          <ion-route url="/enterprise" component="app-enterprise" />
+
           <ion-route url="/editor" component="app-editor" />
           <ion-route url="/editor/:deckId" component="app-editor" />
 

studio/src/app/components/core/app-menu/app-menu.tsx

@@ -43,6 +43,7 @@ export class AppMenu {
 
         {this.renderHome()}
         {this.renderDiscover()}
+        {this.renderEnterprise()}
         {this.renderDashboard()}
         {this.renderSettings()}
         {this.renderSignInOut()}
@@ -53,7 +54,7 @@ export class AppMenu {
   private renderUser() {
     if (authStore.state.loggedIn) {
       return (
-        <ion-item class="user">
+        <ion-item class="user ion-margin-bottom">
           <app-user-info avatarColSize={3}></app-user-info>
         </ion-item>
       );
@@ -95,18 +96,14 @@ export class AppMenu {
 
   private renderHome() {
     return (
-      <ion-item button class="home" href="/" routerDirection="forward">
-        <ion-icon lazy={true} name="home-outline" slot="start"></ion-icon>
-        <ion-label>Home</ion-label>
+      <ion-item button class="home" href="/home" routerDirection="forward">
+        <app-logo slot="start"></app-logo>
+        <ion-label>DeckDeckGo</ion-label>
       </ion-item>
     );
   }
 
   private renderDiscover() {
-    if (authStore.state.loggedIn) {
-      return undefined;
-    }
-
     return (
       <ion-item button class="home" href="/discover" routerDirection="forward">
         <ion-icon lazy={true} name="search-outline" slot="start"></ion-icon>
@@ -115,6 +112,15 @@ export class AppMenu {
     );
   }
 
+  private renderEnterprise() {
+    return (
+      <ion-item button class="home" href="/enterprise" routerDirection="forward">
+        <ion-icon lazy={true} name="business-outline" slot="start"></ion-icon>
+        <ion-label>Enterprise</ion-label>
+      </ion-item>
+    );
+  }
+
   private renderSettings() {
     return (
       <ion-item button class="home" href="/settings" routerDirection="forward">

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -39,7 +39,6 @@ export class AppNavigationActions {
   render() {
     return (
       <div>
-        {this.renderFeed()}
         {this.renderSignIn()}
         {this.renderPresentationButton()}
         {this.renderPublishButton()}
@@ -48,18 +47,6 @@ export class AppNavigationActions {
     );
   }
 
-  private renderFeed() {
-    if (authStore.state.loggedIn || !this.signIn) {
-      return undefined;
-    } else if (this.presentation || this.publish) {
-      return (
-        <ion-router-link href="/discover" routerDirection="forward" class="wide-device ion-padding-start ion-padding-end">
-          <ion-label>Discover</ion-label>
-        </ion-router-link>
-      );
-    }
-  }
-
   private renderSignIn() {
     if (authStore.state.loggedIn || !this.signIn) {
       return undefined;

studio/src/app/components/core/app-navigation/app-navigation.scss

@@ -32,13 +32,17 @@ app-navigation {
       user-select: none;
     }
 
+    ion-router-link.nav:not(:last-of-type) {
+      margin-right: 24px;
+    }
+
     &.deck-name-visible {
       ion-label.deck-name {
         visibility: initial;
         opacity: 1;
       }
 
-      ion-router-link.home div.logo ion-label {
+      ion-router-link.nav ion-label {
         display: none;
       }
     }
@@ -111,11 +115,11 @@ body.dark {
   }
 }
 
-@media screen and (max-width: 720px) {
+@media screen and (max-width: 768px) {
   ion-nav {
     div.title:not(.offline) {
       ion-label.deck-name,
-      ion-router-link.home ion-label {
+      ion-router-link.nav ion-label {
         display: none;
       }
     }

studio/src/app/components/core/app-navigation/app-navigation.tsx

@@ -40,15 +40,43 @@ export class AppNavigation {
 
     return (
       <div class={titleClass}>
-        <ion-router-link onClick={() => this.closeMenu()} href="/" routerDirection="forward" class="home">
+        <ion-router-link onClick={() => this.closeMenu()} href="/home" routerDirection="forward" class="nav">
           {this.renderLogo()}
         </ion-router-link>
 
+        {this.renderFeed()}
+
+        {this.renderEnterprise()}
+
         <ion-label class="deck-name">{store.state.name}</ion-label>
       </div>
     );
   }
 
+  private renderFeed() {
+    if (this.presentation || this.publish) {
+      return (
+        <ion-router-link href="/discover" routerDirection="forward" class="nav discover">
+          <ion-label>Discover</ion-label>
+        </ion-router-link>
+      );
+    } else {
+      return undefined;
+    }
+  }
+
+  private renderEnterprise() {
+    if (this.presentation || this.publish) {
+      return (
+        <ion-router-link href="/enterprise" routerDirection="forward" class="nav">
+          <ion-label>Enterprise</ion-label>
+        </ion-router-link>
+      );
+    } else {
+      return undefined;
+    }
+  }
+
   private renderTitleOffline() {
     if (offlineStore.state.offline === undefined) {
       return undefined;

studio/src/app/components/core/app-footer/app-footer.scss renamed to studio/src/app/components/core/footer/app-footer/app-footer.scss

@@ -20,6 +20,8 @@
 }
 
 app-footer {
+  display: block;
+
   div.footer-container {
     font-size: var(--font-size-small);
 

studio/src/app/components/core/app-footer/app-footer.tsx renamed to studio/src/app/components/core/footer/app-footer/app-footer.tsx

@@ -1,10 +1,14 @@
-app-landing-footer {
-  main {
+app-section-footer {
+  footer {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
+    section {
+      padding: 0;
+    }
+
     section.links {
       margin-top: 48px;
       max-width: 768px;

studio/src/app/components/landing/app-landing-footer/app-landing-footer.scss renamed to studio/src/app/components/core/footer/app-section-footer/app-section-footer.scss

@@ -0,0 +1,41 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+  tag: 'app-section-footer',
+  styleUrl: 'app-section-footer.scss',
+  shadow: false,
+})
+export class AppSectionFooter {
+  @Prop()
+  action: boolean = true;
+
+  render() {
+    return (
+      <footer>
+        <img src={`/assets/img/landing/wave-remote.svg`} role="presentation" loading="lazy" class="wave-section" />
+
+        {this.renderAction()}
+
+        <section class="ion-padding links">
+          <app-footer display="landing"></app-footer>
+        </section>
+      </footer>
+    );
+  }
+
+  private renderAction() {
+    if (!this.action) {
+      return undefined;
+    }
+
+    return (
+      <section class="ion-padding ion-text-center">
+        <h3>Start now.</h3>
+
+        <ion-button class="ion-margin-top" shape="round" href="/editor" routerDirection="root" mode="md" color="primary">
+          <ion-label>Write a presentation</ion-label>
+        </ion-button>
+      </section>
+    );
+  }
+}

studio/src/app/components/core/footer/app-section-footer/app-section-footer.tsx

@@ -63,7 +63,7 @@ app-actions-editor {
     }
   }
 
-  @media screen and (max-width: 720px) {
+  @media screen and (max-width: 768px) {
     ion-tab-button,
     app-action-share,
     app-action-busy,
@@ -74,7 +74,7 @@ app-actions-editor {
     }
   }
 
-  @media screen and (min-width: 720px) {
+  @media screen and (min-width: 768px) {
     ion-tab-button,
     app-action-share,
     app-action-busy,