RubyGems - j1-template - Versions diffs - 2024.3.18 → 2024.3.19 - Mend

j1-template 2024.3.18 → 2024.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1172) hide show

data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc CHANGED Viewed

@@ -99,15 +99,12 @@ end::tags[]
 // -----------------------------------------------------------------------------
 tag::data[]
-:data-images-standalone:                          "assets/image/modules/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
-:data-images-group:                               "assets/image/modules/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/image/modules/gallery/old_times/image_04.jpg, GrandPa's annual journey"
+:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
+:data-images--styles-menu:                        "assets/image/page/tour/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
-:data-images--themes-menu:                        "assets/image/pages/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
-:data-images--styles-menu:                        "assets/image/pages/tour/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
-:data-quicksearch--icon:                          "assets/image/pages/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
-:data-quicksearch--input:                         "assets/image/pages/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"
-:data-quicksearch--results:                       "assets/image/pages/tour/600_quicksearch/quicksearch_results.jpg, Results for a QuickSearch"
+:data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"
+:data-quicksearch--results:                       "assets/image/page/tour/600_quicksearch/quicksearch_results.jpg, Results for a QuickSearch"
 end::data[]

data/lib/starter_web/pages/public/tour/_includes/documents/419_advanced_modals_demo.asciidoc CHANGED Viewed

@@ -83,7 +83,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/image/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
+        <img src="/assets/image/module/attic/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>
@@ -187,7 +187,7 @@
       <div class="modal-body">
         <div class="row">
           <div class="col-3 text-center">
-            <img src="/assets/image/pages/tour/410_bs_modals_extentions/avatar.jpg" alt="avatar.jpg" class="img-fluid z-depth-1-half rounded-circle">
+            <img src="/assets/image/page/tour/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>

data/lib/starter_web/pages/public/tour/asciidoc_extensions.adoc CHANGED Viewed

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Asciidoc, Extension ]
 image:
-  path:                                 /assets/image/pages/tour/puzzle-1920x1280-bw.jpg
+  path:                                 /assets/image/page/tour/puzzle-1920x1280-bw.jpg
   width:                                1920
   height:                               1280
@@ -36,7 +36,7 @@ resources:                              [
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/pages/tour/puzzle-1920x1280-bw.jpg
+        - url:                          /assets/image/page/tour/puzzle-1920x1280-bw.jpg
           alt:                          puzzle-1920x1280-bw
 ---
@@ -399,7 +399,7 @@ lightbox::<block_id>[ 800, {<data-images-id>} ]
 ----
 .Lightbox block for standalone images
-lightbox::images-standalone[ 800, {data-images-standalone} ]
+lightbox::images-standalone[ 800, {data-images-lightbox--standalone} ]
 [role="mt-5"]
 === Grouped Images
@@ -416,7 +416,7 @@ lightbox::<block_id>[ 400, {<data-images-group_id>}, <group_name> ]
 ----
 .Lightbox block for grouped images
-lightbox::images-group[ 400, {data-images-group}, group_name ]
+lightbox::images-group[ 400, {data-images-lightbox--group}, group_name ]
 [role="mt-5"]

data/lib/starter_web/pages/public/tour/bootstrap_themes.adoc CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 title:                                  Themes
-title_extention:                        Bootstrap V5 Themes for J1 Template
-tagline:                                Individual Themes for Your Web
+title_extention:                        Bootstrap V5 Themes
+tagline:                                Individual Bootstrap Styles
 date:                                   2020-11-10
 #last_modified:                         2023-01-01
@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Module, Theme ]
 image:
-  path:                                 /assets/image/modules/attics/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
   width:                                1920
   height:                               1280
@@ -32,7 +32,7 @@ resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/themes-1920x1280-bw.jpg
+        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
           alt:                          Photo by Clem Onojeghuo on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/tour/highlghter_rouge.adoc CHANGED Viewed

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Rouge ]
 image:
-  path:                                 /assets/image/modules/attics/1920x1280/mohammad-rahmani.jpg
+  path:                                 /assets/image/module/attic/1920x1280/mohammad-rahmani.jpg
   width:                                1920
   height:                               1280
@@ -31,7 +31,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/1920x1280/mohammad-rahmani.jpg
+        - url:                          /assets/image/module/attic/1920x1280/mohammad-rahmani.jpg
           alt:                          Photo by Mohammad Rahmani on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/tour/icon_fonts.adoc CHANGED Viewed

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Icon ]
 image:
-  path:                                 assets/image/pages/tour/icon-fonts-1920x1280-bw.jpg
+  path:                                 assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
   width:                                1920
   height:                               1280
@@ -31,7 +31,7 @@ resources:                              [ iconify ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/pages/tour/icon-fonts-1920x1280-bw.jpg
+        - url:                          /assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
           alt:                          Photo by Harpal Singh on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/tour/modal_extentions.adoc CHANGED Viewed

@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Modal, Extension ]
 image:
-  path:                                 /assets/image/pages/tour/bootstrap-1920x1000-bw.jpg
+  path:                                 /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
   width:                                1920
   height:                               1280
@@ -32,7 +32,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/pages/tour/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
           alt:                          Bootstrap Framework Logo
 ---

data/lib/starter_web/pages/public/tour/play_audio.adoc CHANGED Viewed

@@ -19,7 +19,7 @@ categories:                             [ Tour ]
 tags:                                   [ Audio, Module ]
 image:
-  path:                                 /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+  path:                                 /assets/image/module/attic/1920x1280/alexey-ruban.jpg
   width:                                1920
   height:                               1280
@@ -36,7 +36,7 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+        - url:                          /assets/image/module/attic/1920x1280/alexey-ruban.jpg
           alt:                          Photo by Alexey Ruban on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/tour/play_video.adoc CHANGED Viewed

@@ -40,7 +40,7 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/lianhao-1920x1280.jpg
+        - url:                          /assets/image/module/attic/lianhao-1920x1280.jpg
           alt:                          Playback Video
 ---

data/lib/starter_web/pages/public/tour/present_images.adoc CHANGED Viewed

@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Carousel, Lightbox, Image, Slider, Slick ]
 image:
-  path:                                 /assets/image/modules/attics/1920x1280/quino-al-2.jpg
+  path:                                 /assets/image/module/attic/1920x1280/quino-al-2.jpg
   width:                                1920
   height:                               1280
@@ -39,7 +39,7 @@ resource_options:
       collapseDepth:                    4
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/1920x1280/quino-al-2.jpg
+        - url:                          /assets/image/module/attic/1920x1280/quino-al-2.jpg
           alt:                          Photo by Quino Al Angel on Unsplash
           badge:
             type:                       unsplash
@@ -139,13 +139,13 @@ Find below an example of using the the default lightbox used for standalone
 images. See how individual images are linked.
 .Lightbox for standalone images
-lightbox::example-standalone[800, {data-images-standalone}, role="mt-4 mb-5"]
+lightbox::example-standalone[800, {data-images-lightbox--standalone}, role="mt-4 mb-5"]
 The J1 lightbox module supports groups of images as well. Click on the image
 group below to see how a group is managed.
 .Lightbox for grouped images
-lightbox::example-group[395, {data-images-group}, group, role="mt-4 mb-4 wm-800"]
+lightbox::example-group[395, {data-images-lightbox--group}, group, role="mt-4 mb-4 wm-800"]
 [role="mt-5"]
@@ -175,11 +175,17 @@ slider is a powerful tool to create fully responsive and touch-enabled
 slideshows.
 [role="mt-4"]
-=== Text Slider
+=== Text Sliders
-A slider or carousel is typically used for displaying images. Still, the
-implementation for the J1 Template supports a lot more sources to be
-displayed as a slide show -- simple text for example.
+Swipers are typically used for displaying images. Still, the implementation
+for the J1 Template supports a lot more sources to be displayed as a slide
+show -- simple text for example.
+[TIP]
+====
+Text sliders can be placed like banners on a page's section. For text sliders,
+different animations are available.
+====
 [role="mt-4"]
 ==== Base Text Slider
@@ -193,30 +199,18 @@ line.
 // carousel::demo_text_carousel[role="mb-4"]
 swiper::swiper_text_base[role="mt-4 mb-4"]
 [role="mt-4"]
-==== Parallax Text Silder
+==== Parallax Text Slider
-A more emphasized type of text-based carousel is a parallax text slider. If
-you want to focus the meaning, this kind of a slide show may be interesting.
-Image-based slide shows may draw off the reader's attention from the text,
-therefore a pure text-based presentation maybe the better choice.
+A more emphasized type of text-based slide is a *parallax* text slider. If you
+want to focus the meaning, this kind of a slide show may be interesting.
+Image-based slide may draw off the reader's attention from the text. Therefore,
+a pure text-based presentation may a better choice.
 .Parallax Text Slider
-carousel::demo_text_carousel_parallax[role="mb-4"]
+swiper::swiper_text_parallax[role="mt-4 mb-4"]
-Parallax text shows can be placed as banners on a page. For text shows,
-different animations are available. Internally, J1 Template uses some of
-the great CSS styles offered by _animate.css_.
-[TIP]
-====
-Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page, {browser-window--new}]
-to see all the possible dynamic styles you can create based on pure CSS.
-Some of them are implemented for the J1 Carousel for animation. See the
-documentation for the
-link:{url-j1-docs--carousel-module}[Carousel module, {browser-window--new}]
-for more details.
-====
 [role="mt-5"]
 === Image Slider
@@ -405,55 +399,46 @@ masterslider::ms_00003[role="mt-4 mb-5"]
 [role="mt-4"]
 [[thumb_images]]
-=== Slider using UI elements
+=== Layout Thumb
+To give the users a more *visual* control over a slideshow, Swiper sliders
+can provide *UI elements* by placing minified images or text elements (thumbs)
+side-by-side (on the left|right), or at the bottom|top of a swiper. Find below
+examples how to control such sliders' by a thumb (slave) silder.
-To give the users *visual control* over a slideshow, Swiper sliders may provide
-UI elements by placing mini-images or short text elements (thumbs) side-by-side
-(on the left|right), or at the bottom of a slideshow. Find below examples how
-to control such sliders by thumbs.
+.Layout Thumb · Top
+swiper::thumb_slider_top[role="mb-5"]
-.Image controls
+.Layout Thumb · Right
 masterslider::ms_00004[role="mt-4 mb-5"]
 .Text controls
 masterslider::ms_00007[role="mt-4 mb-5"]
-////
-[role="mt-4"]
-[[ms_video]]
-=== Masterslider using Video
-lorem:sentences[5]
-.Slider using Video
-masterslider::ms_00010[role="mt-4 mb-5"]
-////
+[role="mt-5"]
+=== Layout Neighbor
+A slideshow typically presents a larger number of slides, which requires a
+sort of navigation. The effect *neighbors* accompanies the *active slide* by
+their *neighbors* on the left and right as *previews*. The neighbor on the
+*left* acts like a *previous button* and scrolls the slides *backward*. The
+neighbor on the *right* acts like a *next button* and scrolls the slides
+*forward*.
-[role="mt-4"]
-[[partialview]]
-=== Slider using a Layout
+[role="mb-5"]
+[TIP]
+====
+The *effect* transforms a slider into a quite *compact* presentation that does
+*not* require any (additional) *navigation* elements.
+====
-The following slider presents a slideshow that combines an MSInfo element
-at the bottom and the MS Layout `partialview`. A slideshow typically presents
-a larger number of slides. The layout `partialview` accompanies the active
-slide by their neighbors on the left and the right.
+.Layout Neighbor
+swiper::neighbor_slider[role="mb-5"]
 .Slider using PartialView
 masterslider::ms_00009[role="mt-4 mb-5"]
-[role="mt-4"]
-.More about Master Slider
-[TIP]
-====
-If you're interested to learn more about Master Slider, go for the following
-documents:
-* Masterslider link:{url-j1-masterslider-previewer}[Previewer, {browser-window--new}]
-* Masterslider link:{url-j1-docs--masterslider-module}[Module documentation, {browser-window--new}]
-====
 [role="mt-5"]
 == Masonry
@@ -497,7 +482,7 @@ It works by placing elements in an optimal position based on available
 horizontal and vertical space. Sort of like mason fitting stones in a wall.
 For sure, you'll have seen it in action all over the Internet.
-.Gallery of Images + lightGallery
+.Gallery of Images + lightGaller
 gallery::jg_mega_cities[role="mt-4 mb-4"]
@@ -520,3 +505,4 @@ HTML5 video for local content and from online sources on the Internet.
 [role="mb-7"]
 Incredible? See the next example page link:{url-tour--present-audio}[Audio Player].

data/lib/starter_web/pages/public/tour/quicksearch.adoc CHANGED Viewed

@@ -24,7 +24,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Site search ]
 image:
-  path:                                 /assets/image/modules/attics/lunr-1280x800.jpg
+  path:                                 /assets/image/module/attic/lunr-1280x800.jpg
   width:                                1920
   height:                               1280
@@ -35,7 +35,7 @@ resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/modules/attics/lunr-1280x800.jpg
+        - url:                          /assets/image/module/attic/lunr-1280x800.jpg
           alt:                          Lunr Search Engine
 ---

data/lib/starter_web/pages/public/tour/responsive_tables.adoc CHANGED Viewed

@@ -19,7 +19,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Tables, Extension ]
 image:
-  path:                                 /assets/image/pages/tour/tables-1920x1280-bw.jpg
+  path:                                 /assets/image/page/tour/tables-1920x1280-bw.jpg
   width:                                1920
   height:                               1280
@@ -30,7 +30,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/pages/tour/tables-1920x1280-bw.jpg
+        - url:                          /assets/image/page/tour/tables-1920x1280-bw.jpg
           alt:                          Photo by Markus Spiske on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/tour/typography.adoc CHANGED Viewed

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Typography ]
 image:
-  path:                                 /assets/image/pages/tour/typography-1920x1280-bw.jpg
+  path:                                 /assets/image/page/tour/typography-1920x1280-bw.jpg
   width:                                1920
   height:                               1280
@@ -35,7 +35,7 @@ resource_options:
       transitionDuration:               fast
       resolutionRefreshRate:            500
       slides:
-        - url:                          /assets/image/pages/tour/typography-1920x1280-bw.jpg
+        - url:                          /assets/image/page/tour/typography-1920x1280-bw.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
           badge:
             type:                       unsplash