chore(): update all examples based on changes from previous commit

Ks89 · Nov 3, 2018 · c1a4704 · c1a4704
1 parent 6509bd1
commit c1a4704
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.html b/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.html
@@ -2,15 +2,16 @@ <h2 class="title">Carousel legacy (IE11) support</h2>
 <br>
 
 <p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
-  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation.</a>
+<p class="red-text">In case of legacy mode, you should set an appropriate carouselConfig.maxHeight to look better, that could be different without legacyMode.</p>
 
 <h3>Examples with legacy mode enabled</h3>
 <section>
   <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
   <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
   <br>
   <ks-carousel [id]="300" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -19,8 +20,8 @@ <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le
   <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
   <br>
   <ks-carousel [id]="301" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
+               [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -29,8 +30,8 @@ <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac
   <h3>D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled</h3>
   <br>
   <ks-carousel [id]="302" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [carouselImageConfig]="{description: {strategy: 2}}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -47,7 +48,7 @@ <h3>D4 - (id=303) - carousel example for IE11 (previews with different heights b
   <h3>D5 - (id=304) - carousel example for IE11 with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100)</h3>
   <br>
   <ks-carousel [id]="304" [images]="imagesRect"
-               [carouselConfig]="{maxWidth: '500px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselConfig]="{maxWidth: '500px', maxHeight: '333px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
                [previewConfig]="{visible: true, breakpoints: {xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100}}"></ks-carousel>
 </section>
 <br>
diff --git a/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.html b/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.html
@@ -2,15 +2,16 @@ <h2 class="title">Carousel legacy (IE11) support</h2>
 <br>
 
 <p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
-  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation.</a>
+<p class="red-text">In case of legacy mode, you should set an appropriate carouselConfig.maxHeight to look better, that could be different without legacyMode.</p>
 
 <h3>Examples with legacy mode enabled</h3>
 <section>
   <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
   <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
   <br>
   <ks-carousel [id]="300" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -19,8 +20,8 @@ <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le
   <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
   <br>
   <ks-carousel [id]="301" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
+               [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -29,8 +30,8 @@ <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac
   <h3>D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled</h3>
   <br>
   <ks-carousel [id]="302" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [carouselImageConfig]="{description: {strategy: 2}}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -47,7 +48,7 @@ <h3>D4 - (id=303) - carousel example for IE11 (previews with different heights b
   <h3>D5 - (id=304) - carousel example for IE11 with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100)</h3>
   <br>
   <ks-carousel [id]="304" [images]="imagesRect"
-               [carouselConfig]="{maxWidth: '500px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselConfig]="{maxWidth: '500px', maxHeight: '333px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
                [previewConfig]="{visible: true, breakpoints: {xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100}}"></ks-carousel>
 </section>
 <br>
diff --git a/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.html b/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.html
@@ -2,15 +2,16 @@ <h2 class="title">Carousel legacy (IE11) support</h2>
 <br>
 
 <p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
-  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation.</a>
+<p class="red-text">In case of legacy mode, you should set an appropriate carouselConfig.maxHeight to look better, that could be different without legacyMode.</p>
 
 <h3>Examples with legacy mode enabled</h3>
 <section>
   <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
   <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
   <br>
   <ks-carousel [id]="300" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -19,8 +20,8 @@ <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le
   <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
   <br>
   <ks-carousel [id]="301" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
+               [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -29,8 +30,8 @@ <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac
   <h3>D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled</h3>
   <br>
   <ks-carousel [id]="302" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [carouselImageConfig]="{description: {strategy: 2}}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -47,7 +48,7 @@ <h3>D4 - (id=303) - carousel example for IE11 (previews with different heights b
   <h3>D5 - (id=304) - carousel example for IE11 with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100)</h3>
   <br>
   <ks-carousel [id]="304" [images]="imagesRect"
-               [carouselConfig]="{maxWidth: '500px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselConfig]="{maxWidth: '500px', maxHeight: '333px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
                [previewConfig]="{visible: true, breakpoints: {xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100}}"></ks-carousel>
 </section>
 <br>
diff --git a/examples/systemjs/app/carousel-ie11/carousel-ie11.html b/examples/systemjs/app/carousel-ie11/carousel-ie11.html
@@ -2,15 +2,16 @@ <h2 class="title">Carousel legacy (IE11) support</h2>
 <br>
 
 <p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
-  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation.</a>
+<p class="red-text">In case of legacy mode, you should set an appropriate carouselConfig.maxHeight to look better, that could be different without legacyMode.</p>
 
 <h3>Examples with legacy mode enabled</h3>
 <section>
   <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
   <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
   <br>
   <ks-carousel [id]="300" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -19,8 +20,8 @@ <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le
   <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
   <br>
   <ks-carousel [id]="301" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
+               [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -29,8 +30,8 @@ <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac
   <h3>D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled</h3>
   <br>
   <ks-carousel [id]="302" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [carouselImageConfig]="{description: {strategy: 2}}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -47,7 +48,7 @@ <h3>D4 - (id=303) - carousel example for IE11 (previews with different heights b
   <h3>D5 - (id=304) - carousel example for IE11 with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100)</h3>
   <br>
   <ks-carousel [id]="304" [images]="imagesRect"
-               [carouselConfig]="{maxWidth: '500px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselConfig]="{maxWidth: '500px', maxHeight: '333px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
                [previewConfig]="{visible: true, breakpoints: {xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100}}"></ks-carousel>
 </section>
 <br>
diff --git a/examples/universal/src/app/carousel-ie11/carousel-ie11.html b/examples/universal/src/app/carousel-ie11/carousel-ie11.html
@@ -2,15 +2,16 @@ <h2 class="title">Carousel legacy (IE11) support</h2>
 <br>
 
 <p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
-  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation.</a>
+<p class="red-text">In case of legacy mode, you should set an appropriate carouselConfig.maxHeight to look better, that could be different without legacyMode.</p>
 
 <h3>Examples with legacy mode enabled</h3>
 <section>
   <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
   <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
   <br>
   <ks-carousel [id]="300" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -19,8 +20,8 @@ <h3>D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le
   <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
   <br>
   <ks-carousel [id]="301" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
+               [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -29,8 +30,8 @@ <h3>D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac
   <h3>D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled</h3>
   <br>
   <ks-carousel [id]="302" [images]="imagesRect"
-    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
-    [carouselImageConfig]="{description: {strategy: 2}}">
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
@@ -47,7 +48,7 @@ <h3>D4 - (id=303) - carousel example for IE11 (previews with different heights b
   <h3>D5 - (id=304) - carousel example for IE11 with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100)</h3>
   <br>
   <ks-carousel [id]="304" [images]="imagesRect"
-               [carouselConfig]="{maxWidth: '500px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+               [carouselConfig]="{maxWidth: '500px', maxHeight: '333px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
                [previewConfig]="{visible: true, breakpoints: {xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100}}"></ks-carousel>
 </section>
 <br>