Merge branch 'master' into 0.29.0

Author: mattlewis92

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [0.28.28](https://github.com/mattlewis92/angular-calendar/compare/v0.28.27...v0.28.28) (2021-09-01)
 
+* no functional changes, just needed to publish a readme update to npm
+
 ### [0.28.27](https://github.com/mattlewis92/angular-calendar/compare/v0.28.26...v0.28.27) (2021-08-27)
 
 

projects/demos/app/carbon-ad/carbon-ad.component.html

@@ -0,0 +1,60 @@
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+  sans-serif;
+  display: flex;
+  max-width: 330px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+  z-index: 100;
+  margin-bottom: 20px;
+}
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+#carbonads a:hover {
+  color: inherit;
+}
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

projects/demos/app/carbon-ad/carbon-ad.component.scss

@@ -0,0 +1,24 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'mwl-carbon-ad',
+  templateUrl: './carbon-ad.component.html',
+  styleUrls: ['./carbon-ad.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CarbonAdComponent implements AfterViewInit {
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+  ngAfterViewInit(): void {
+    const script = document.createElement('script');
+    script.src =
+      '//cdn.carbonads.com/carbon.js?serve=CESIVK3U&placement=mattlewis92githubio';
+    script.id = '_carbonads_js';
+    this.elementRef.nativeElement.append(script);
+  }
+}

projects/demos/app/carbon-ad/carbon-ad.component.ts

@@ -6,18 +6,34 @@ h3 {
   padding-top: 70px;
 }
 
+.demo-container {
+  padding-bottom: 15px;
+}
+
 @media (min-width: 768px) {
   .container-fluid {
     height: 100vh;
   }
 }
 
+@media (max-width: 768px) {
+  .demo-container {
+    flex-basis: initial;
+  }
+
+  .sidebar-nav {
+    width: 100%;
+    margin-left: 10px;
+  }
+}
+
 .spacer-top {
   margin-top: 15px;
 }
 
 .sidebar-nav {
   padding-left: 5px;
+  padding-right: 20px;
 }
 
 .sidebar-nav h4 {

projects/demos/app/demo-app.css

@@ -107,7 +107,7 @@
 <div class="container-fluid">
   <div class="row fill-height">
     <div
-      class="col-md-9 col-xl-10 fill-height scroll-y"
+      class="col fill-height scroll-y demo-container"
       mwlDraggableScrollContainer
     >
       <div class="card" *ngIf="firstDemoLoaded; else loading">
@@ -166,7 +166,8 @@
         </div>
       </div>
     </div>
-    <div class="col-md-3 col-xl-2 fill-height sidebar-nav scroll-y">
+    <div class="fill-height sidebar-nav scroll-y">
+      <mwl-carbon-ad></mwl-carbon-ad>
       <input
         type="search"
         class="form-control"

projects/demos/app/demo-app.html

@@ -15,9 +15,10 @@ import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/mod
 import { environment } from '../environments/environment';
 import { FormsModule } from '@angular/forms';
 import { ClipboardModule } from 'ngx-clipboard';
+import { CarbonAdComponent } from './carbon-ad/carbon-ad.component';
 
 @NgModule({
-  declarations: [DemoAppComponent],
+  declarations: [DemoAppComponent, CarbonAdComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

projects/demos/app/demo-app.module.ts

@@ -3,3 +3,9 @@
 @import '~highlight.js/styles/github.css';
 @import '~flatpickr/dist/flatpickr.css';
 @import '../angular-calendar/src/angular-calendar.scss';
+
+@media (min-width: 768px) {
+  body {
+    overflow-y: hidden;
+  }
+}