feat(docs): styling missing code example (#244)

positive-js · Oct 11, 2019 · 7e4a862 · 7e4a862
1 parent ec8e0f3
commit 7e4a862
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -1,5 +1,8 @@
 @mixin example-viewer-theme($theme) {
     $foreground: map-get($theme, foreground);
+    $error: map-get($theme, error);
+    $error-border: mc-color($error, 200);
+    $error-background: mc-color($error, 60);
     $divider: mc-color($foreground, divider);
     $hint-text: mc-color($foreground, hint-text);
 
@@ -16,4 +19,10 @@
         background-color: $divider;
 
     }
+
+    .docs-example-viewer__lost-example {
+        border: 1px solid $error-border;
+        background-color: $error-background;
+        padding: 16px;
+    }
 }
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.html b/packages/docs/src/app/shared/example-viewer/example-viewer.html
@@ -1,11 +1,11 @@
 <div class="docs-example-viewer__wrapper">
-    <div class="docs-example-viewer__example">
+    <div *ngIf="exampleData" class="docs-example-viewer__example">
         <div class="docs-example-viewer-body">
             <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
         </div>
     </div>
 
-    <div [class.docs-example-viewer__source]="true"
+    <div *ngIf="exampleData; else lostExample" [class.docs-example-viewer__source]="true"
          [class.docs-example-viewer__source_hidden]="!showSource">
         <stackblitz-button [example]="example"></stackblitz-button>
         <mc-tab-group mc-light-tabs (selectedTabChange)="setNumbers()">
@@ -45,4 +45,11 @@
             </span>
         </div>
     </div>
+
+    <ng-template #lostExample>
+        <p class="docs-example-viewer__lost-example">Oops, this code example is lost... But you can help us find it!
+            Just send a Pull Request to this repository:
+            <a class="docs-markdown__a" href="https://github.com/positive-js/mosaic.">Mosaic</a>
+        </p>
+    </ng-template>
 </div>