RubyGems - j1-template - Versions diffs - 2020.0.10 → 2020.0.15 - Mend

j1-template 2020.0.10 → 2020.0.15

Files changed (542) hide show

data/lib/starter_web/pages/public/learn/{floating_sidebar.adoc → examples/floating_div.adoc} RENAMED

@@ -1,7 +1,7 @@
 ---
-title:                                  Floating SideBar
-tagline:                                where to go
-description:                            Where to go
+title:                                  CSS Examples
+tagline:                                floating div
+description:                            floating div
 tags:                                   [ Page, Roundtrip ]
 index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
@@ -12,17 +12,6 @@ regenerate:                             false
 resources:                              [ lightbox ]
 resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
-          alt:                          Photo by Alexander Redl on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexander Redl
-            href:                       https://unsplash.com/@alexanderredl
 ---
 // Enable the Liquid Preprocessor
@@ -53,7 +42,6 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :images-dir:                         {imagesdir}/path/to/page/images
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -61,7 +49,21 @@ resource_options:
 // -----------------------------------------------------------------------------
 ++++
-<div class="sidebar">
+    <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">Secondary</button>
+        <button type="button" class="btn btn-success btn-raised">Success</button>
+        <button type="button" class="btn btn-info btn-raised">Info</button>
+        <button type="button" class="btn btn-warning btn-raised">Warning</button>
+        <button type="button" class="btn btn-danger btn-raised">Danger</button>
+        <button type="button" class="btn btn-link btn-raised">Link</button>
+      </div>
+    </div>
+++++
+++++
+<div class="">
   <div class="floating-div">
     <p>This "floating div" could be a form, a call to action, an ad,
       or whatever other content you want to float in sidebar as the user
@@ -86,54 +88,52 @@ use the English language for our international vistors (we are German),
 right (LTR), and from top to down a page. The same to all menus, sections
 and pages.
-To read the site it is recommended to go for LTR. Other languages, other
-countries and cultures go for RTL, but currently we've *no* support for RTL
-implemented.
-For that reason, it was a good decision to start from here.
-== Whats up
-First of all, you've started already! The important first step in to find
-your way to Jekyll is done. Congratiulations.
-The *Learn* section contains all you need to learn what Jekyll and J1 can do
-for your website. For your new static web - if you like.
-With this section you'll find a:
-. *Roundtrip* to show some of the main features of the template system
-  *J1*.
-. *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
-  This tutorial guides you through all the steps to build a website using
-  the template system Jekyll One - your site using Jekyll and the template J1.
-== Where to go
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
-You should go for the *Roundtrip* first. See what you will get. As an overview
-of some of the main features of *J1*. The roundtrip is a *visual* tour. No
-technical stuff, nothing academic.
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
-Let's go more deeper and make things real - and your hands dirty. We
-recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
-diving into the world of Jekyll. You'll learn a lot and at the end of that day
-you know what Jekyll, static webs and the template system J1 is all about.
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
-You're welcome!
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
-If you like, continue by walking through the roundtrip examples
-link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
 ++++
 <style>
+  .adblock {
+  }
+  .adblock-fixed {
+    position: fixed;
+  }
   .sidebar {
     width:33.33%;
     float:left;
     padding: 0 10px;
   }
+/*
   .floating-div {
     background-color: #333;
     padding: 10px 50px;
@@ -143,6 +143,16 @@ link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
     position: absolute;
     right: -40px;
   }
+*/
+  .floating-div {
+      background-color: #333;
+      /* padding: 10px 50px; */
+      color: #EEE;
+      font-size: 20px;
+      /* margin-top: 10px; */
+      /* position: absolute; */
+      /* right: -40px; */
+  }
   .sticky {
     position: fixed;

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc CHANGED

@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
 And some more related ones. If you'd like to explore the Chocolatey CLI a bit
 *more*, give it a try before moving on.
-[cols="8a,4", options="header", role="table-responsive, full-width"]
+[cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
 |===============================================================================
 |Command |Description

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.webp
           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.webp
           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.webp
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
           badge:
             type:                       unsplash
@@ -116,7 +116,7 @@ var tour = Tour({
 });
 ----
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description
@@ -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);
   }
-});
+});
 ----
@@ -381,7 +381,7 @@ tour.addStep({
 // |Name |Type |Description |Default
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description
@@ -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

@@ -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_table_3_column.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
+[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Postion |Class | Example

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc CHANGED

@@ -128,7 +128,7 @@
     <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">
+        <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>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp" 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>
@@ -409,7 +409,7 @@
           <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>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp" alt="admin-dashboard-bootstrap" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp" 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>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc CHANGED

@@ -11,10 +11,10 @@ toc:                                    true
 scrollbar:                              false
 permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
+regenerate:                             true
 resources:                              [
-                                          bs_tour, carousel, lightbox,
+                                          carousel, lightbox,
                                           justified_gallery, light_gallery
                                         ]
 resource_options:
@@ -23,7 +23,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-1920x1280-bw.webp
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc CHANGED

@@ -26,7 +26,7 @@ resource_options:
         color_2:                        md_grey_400
       slides:
         # Broadway Underground - still image (animate default)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.webp
           alt:                          Broadway Underground
           alignY:                       top
           animateFirst:                 false
@@ -37,7 +37,7 @@ resource_options:
           loop:                         false
           duration:                     12000
         # Broadway Underground - still image (animate random)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.webp
           alt:                          Broadway Underground
           alignY:                       top
           transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut