RubyGems - j1-template - Versions diffs - 2020.0.12 → 2020.0.17 - Mend

j1-template 2020.0.12 → 2020.0.17

Files changed (480) hide show

data/lib/starter_web/pages/public/blog/navigator/index.html CHANGED

@@ -3,7 +3,7 @@ layout:                                 blog_archive
 title:                                  Creators Blog
 tagline:                                explore posts
-description:                            Page Generator
+description:                            Navigate  all articles
 tags:                                   [ Blog, Creator ]
 resources:                              []
@@ -21,7 +21,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
           alt:                          Photo by Matthaeus

data/lib/starter_web/pages/public/learn/examples/floating_div.adoc CHANGED

@@ -51,7 +51,7 @@ resource_options:
 ++++
     <div id="adblock" class="row no-gutters adblock">
       <div class="doc-example mb-3">
-        <button type="button" class="btn btn-primary btn-raised">Primary</button>
+        <button type="button" class="btn btn-secondary btn-raised">Primary</button>
         <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
         <button type="button" class="btn btn-success btn-raised">Success</button>
         <button type="button" class="btn btn-info btn-raised">Info</button>

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc CHANGED

@@ -1,6 +1,7 @@
 ---
 title:                                  Web in a Day
 tagline:                                meet & greet jekyll
+date:                                   2018-05-01 00:00:00
 description: >
                                         Web in a Day is the first in a series of tutorials to
                                         learn how to create modern websites using Jekyll. This

data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.1.asciidoc CHANGED

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/images/bootstrap-1920x1000-bw.jpg
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
           badge:
             type:                       unsplash
@@ -118,4 +118,3 @@ Javascript libraries to support such functionality.
 </script>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc CHANGED

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/images/bootstrap-1920x1000-bw.jpg
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
           badge:
             type:                       unsplash
@@ -142,4 +142,3 @@ Javascript libraries to support such functionality.
 }).call(this);
 </script>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc CHANGED

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/images/bootstrap-1920x1000-bw.jpg
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
           badge:
             type:                       unsplash
@@ -145,7 +145,7 @@ http://getbootstrap.com/javascript/#popovers[Popover]._
 |autoscroll
 |Boolean
 |`true`
-|Autoscrolls the window when the step popover is out of view.
+|Autoscrolls the window when the step popover is out of view.
 |keyboard
 |Boolean
@@ -167,18 +167,18 @@ Storage interfaces]._
 |Boolean
 |`false`
 |Set this option to true to have some useful
-informations printed in the console.
+informations printed in the console.
 |backdrop
 |Boolean
 |`false`
 |Show a dark backdrop behind the popover and its
-element, highlighting the current step.
+element, highlighting the current step.
 |backdropContainer
 |String
 |`body`
-|HTML element (jQuery selector) on which the backdrop should be shown.
+|HTML element (jQuery selector) on which the backdrop should be shown.
 |backdropPadding
 |Number\|Object
@@ -238,7 +238,7 @@ template so you can easily rewrite it. However, Bootstrap Tour maps the
 _previous_, _next_ and _end_ logics to the elements which have the
 related `data-role` attribute. Therefore, you can also have multiple
 elements with the same `data-role` attribute. +
 |afterGetState \| afterSetState \| afterRemoveState  callout:2[]
 |Function
 |`name(key, value){}`
@@ -258,7 +258,7 @@ A simple example if to send a post request to your server each time
 there is a change.
 |onStart
-|Function
+|Function
 |`name(tour){}`
 |Function to execute when the tour starts.
@@ -341,7 +341,7 @@ var tour = Tour({
   afterSetState: function (key, value) {
     $.post("/some/path", value);
   }
-});
+});
 ----
@@ -449,7 +449,7 @@ _This option should be used in conjunction with `next`._
 |container
 |String
 |`body`
-|Attachment of popover. Pass an element (jQuery selector) to append the
+|Attachment of popover. Pass an element (jQuery selector) to append the
 popover to. By default the popover is appended
 after the 'element' above. This option is particularly helpful for
 Internet Explorer.
@@ -460,10 +460,10 @@ Internet Explorer.
 |Show a dark backdrop behind the popover and its
 element, highlighting the current step.
-|backdropContainer NEW
+|backdropContainer NEW
 |String (jQuery selector)
 |`body`
-|HTML element on which the backdrop should be shown.
+|HTML element on which the backdrop should be shown.
 |backdropPadding NEW
 |Boolean\|Object
@@ -475,7 +475,7 @@ It can be a number or a object containing optional `top`, `right`,
 |redirect
 |Boolean\|Function
 |`true`
-|Set a custom function to execute as redirect function. The default
+|Set a custom function to execute as redirect function. The default
 redirect relies on the traditional `document.location.href`.
 |reflex UPDATED
@@ -497,7 +497,7 @@ The step is fixed positioned in the middle of the page. +
 You can use a string or function that returns a string of the HTML
 template for the orphan popovers.
-|duration NEW
+|duration NEW
 |Boolean\|String
 |`false`
 |Set a expiration time for the steps. When
@@ -580,7 +580,7 @@ the path of the step. It overrides the global `onRedirectError` option.
 === Methods
-If, for some reasons, you want to force the tour to be displayed, pass
+If, for some reasons, you want to force the tour to be displayed, pass
 *true* to the *start()* method.
 [cols="3,9a",options="header",]
@@ -632,13 +632,11 @@ word)_ .
 |Get the index of the current step.
 |setCurrentStep(`i`)
-|Override the current step. Pass `i` as the index of the step in the
+|Override the current step. Pass `i` as the index of the step in the
 tour (0-based).
 |redraw()
-|Triggers a redraw on the overlay element. Useful for dynamically sized
+|Triggers a redraw on the overlay element. Useful for dynamically sized
 tour targets.
 |===============================================================================

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/attributes.asciidoc CHANGED

@@ -59,8 +59,8 @@ tag::urls[]
 :github-gist-home:                                https://gist.github.com/
 :asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622
-:previewer-emoji:                                 /pages/protected/previewer/twitter_emoji/
-:previewer-mdi:                                   /pages/protected/previewer/mdi_font/
+:previewer-emoji:                                 /pages/public/previewer/twitter_emoji/
+:previewer-mdi:                                   /pages/public/previewer/mdi_font/
 :previewer-theme:                                 /pages/public/previewer/theme/
@@ -89,7 +89,7 @@ tag::tags[]
 :dotdot:                                          &#46;&#46;
 :middot:                                          &middot;
-end::tags[]
+end::tags[]
 // Data - Data elements for Asciidoctor extensions
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_info.asciidoc CHANGED

@@ -4,8 +4,11 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
-    Launch Modal Example
+  <button type="button"
+    class="btn btn-secondary btn-raised"
+    data-toggle="modal"
+    data-target="#frameModalBottomSuccessDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_left_warning.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_right_danger.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_central_success.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_left_info.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_right_success.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_info.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+    Launch Example
   </button>
 </div>
-++++
+++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_left_info.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_right_success.asciidoc CHANGED

@@ -4,8 +4,8 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
-    Launch Modal Example
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_demo.asciidoc ADDED

@@ -0,0 +1,337 @@
+++++
+<!-- Modal Top Info -->
+<div id="frameModalTopInfoDemo"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
+        </div>
+        <div class="row px-4">
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Top Info -->
+<!-- Side Modal Top Right Success -->
+<div id="sideModalTRSuccessDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Right Success -->
+<!-- Side Modal Top Left Info -->
+<div id="sideModalTLInfoDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Left Info -->
+<!-- Modal Bottom Success-->
+<div id="frameModalBottomSuccessDemo"
+  class="modal fade bottom"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Bottom Success -->
+<!-- Side Modal Bottom Right Danger -->
+<div id="sideModalBRDangerDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Right Danger -->
+<!-- Side Modal Bottom Left Warning -->
+<div id="sideModalBLWarningDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="/assets/images/pages/roundtrip/410_bs_modals_extentions/avatar.jpg" alt="avatar.jpg" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Left Warning -->
+<!-- Modal Full Height Right Success Demo -->
+<div id="fluidModalRightSuccessDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Right Success Demo -->
+<!-- Modal Full Height Left Info Demo -->
+<div id="fluidModalLeftInfoDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Left Info Demo -->
+++++