j1-template 2022.4.10 → 2022.5.0.rc0

data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc

@@ -0,0 +1,91 @@
+---
+title:                                  Roundtrip
+tagline:                                advanced bootstrap modals
+date:                                   2020-11-08 00:00:00
+description: >
+                                        Advanced Bootstrap modals are used to add dialogs to your
+                                        web pages for user notifications. To highlight important
+                                        information to your visitors. Modals are positioned over
+                                        everything else in the document so that messages get the
+                                        user's attention.
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Introduction, Bootstrap, Modal, Extension ]
+
+flowtext:                               false
+fab_menu_id:                            page_ctrl
+
+permalink:                              /pages/public/learn/roundtrip/modals/
+regenerate:                             false
+
+resources:                              [ animate ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
+          alt:                          bootstrap
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+Advanced Bootstrap Modals are based on the free package of
+link:{url-mdb--home}[Material Design for Bootstrap, {browser-window--new}] on version
+*4.3.2*. This version can be found following this link:
+link:{url-mdb--bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A more
+current version is available from here:
+link:{url-mdb--bs-modals}[Modal examples & templates, {browser-window--new}].
+Bootstrap modals are used to add dialogues to your web pages for user
+notifications. To highlight important information to your visitors. Modals
+are positioned over everything else in the document so that messages
+get the user's attention.
+
+To improve your visitor's experience on important information that shouldn't
+be missed. Modals are a great choice to bring the user's attention. Using the
+J1 Template BS enhanced predefined modal styles, some emotional weight is
+added to the information displayed - ranging from an info level, a simple
+warning to critical messages.
+
+NOTE: For more information on how to use Bootstrap’s JavaScript modal
+plugin, refer to: link:{url-bs-doc--components-modal}[Bootstrap Docs, {browser-window--new}].
+
+// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
+include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
+
+== What next
+
+Bootstrap is a helpful framework that offers in the current V5
+version a complete set of styles to create excellent responsive designs.
+In the sense of all can be improved, the responsive tables support of BS
+needs some enhancement to display tables on low-resolution devices or smaller
+(browser-) window sizes.
+
+The first version for improved responsive tables that scale better is available
+for the J1 Template. Check out from here what the
+link:{url-roundtrip--responsive-tables}[BS Table Extensions] can do!
+
+// Include the modals HTML portion
+// -----------------------------------------------------------------------------
+include::{documentdir}/419_advanced_modals_demo.asciidoc[]

data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc

@@ -0,0 +1,420 @@
+---
+title:                                  Roundtrip
+tagline:                                responsive tables
+date:                                   2020-11-09 00:00:00
+description: >
+                                        Creating a design for responsive tables is challenging. The approach used by
+                                        J1 Template is based on pure CSS on top of the classic Bootstrap styles for
+                                        simplicity and portability to be viewed best on all devices and browsers.
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Introduction, Bootstrap, Table, Extension ]
+
+flowtext:                               false
+fab_menu_id:                            page_ctrl
+
+permalink:                              /pages/public/learn/roundtrip/responsive_tables/
+regenerate:                             false
+
+resources:                              [ animate, rouge ]
+resource_options:
+  - attic:
+      opacity:                          0.7
+      slides:
+        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/@markusspiske/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+Creating a design for responsive tables is challenging. The approach used by
+J1 Template is based on pure CSS on top of the classic Bootstrap styles for
+simplicity and portability to be viewed best on all devices and browsers.
+
+== Table types
+
+But, for sure, the solution provided is a compromise. To fit the everyday needs
+for tables viewed on desktop and mobile devices, three types of responsive
+tables are implemented:
+
+.Types of responsive tables
+[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===
+|Type |Style |Description
+
+|J Table (default)
+|`r-text-xxx`
+|J Tables are used by J1 Template for default. Those tables are using the
+*responsive text* feature (see link:{url-roundtrip--typography}[Typography])
+with no additional CSS classes to be applied. For smaller viewports, the text
+scales down and should fit the cells automatically. The default text size for
+J1 is `r-text-300`.
+
+|B Table (Bootstrap)
+|`table-responsive`
+|If adding the class `table-responsive`, it creates a responsive table based
+on Bootstrap CSS styles. The table will then scroll horizontally on small
+devices. Making any table responsive across *all* viewports, the additional
+class `table-responsive` is to applied. For specific (Bootstrap) breakpoints,
+the classes `table-responsive-lg{-sm\|-md\|-lg\|-xl}` are available to have
+better control on what viewport sizes tables are being transformed.
+
+|F Table (fixed)
+|`no-rtext`
+|If the responsive text feature from J1 is *not* wanted, the CSS class
+`no-rtext` is to be applied. J tables are *not* responsive per default,
+but in combination with the CSS class `table-responsive{-sm|-md|-lg|-xl`
+from Bootstrap, this type behaves like classic Bootstrap responsive tables
+(see above) but *no* responsive text is used.
+
+|R Tables (stacked)
+|`rtable`
+|The style `rtable` *rebuilds* a table. The header is set to invisible, and
+all columns get vertically *stacked as rows*. The rebuild of responsive
+tables takes effect if the viewport (window size) is smaller than 992px for
+the width (x-axis); typical for small devices like tablets or mobiles.
+
+|===
+
+To see the transformation on a table in action, resize for desktop devices the
+browser window or use a device the viewport is smaller than 768px (mobiles or
+tablets).
+
+== Tables 2-column
+
+Tables are widely used for documentation pages. Below, simple 2-column tables
+are used to explain some of the Jekyll variables for templating your content
+pages.
+
+=== Bootstrap tables
+
+Bootstrap tables support tables to be scrolled horizontally on smaller
+viewports. From a specified breakpoint and up, the table will behave normally
+and do not scroll horizontally.
+
+.Example, Bootstrap using fixed text size `no-rtext`
+[source, no_theme, role="noclip"]
+----
+[cols="6,6", options="header", width="100%", role="table-responsive no-rtext"]
+|===
+|Variable |Description
+...
+|===
+----
+
+.Bootstrap, fixed text size `no-rtext`
+[cols="6a,6a", options="header", width="100%", role="table-responsive no-rtext mt-3"]
+|===
+|Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|===
+
+.Example, Bootstrap using responsive text size
+[source, no_theme, role="noclip"]
+----
+[cols="6,6", options="header", width="100%", role="table-responsive"]
+|===
+|Variable |Description
+...
+|===
+----
+
+.Bootstrap, responsive text size
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===
+|Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|===
+
+
+=== Responsive tables
+
+Responsive tables *rebuild* a table. The header is set to invisible, and
+all columns get vertically *stacked as rows*.
+
+.Example, R Table using responsive text size
+[source, no_theme, role="noclip"]
+----
+[cols="6,6", options="header", width="100%", role="rtable"]
+|===
+|Variable |Description
+...
+|===
+----
+
+.R Table, responsive text size
+[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
+|===
+|Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|===
+
+.Example, R Table using fixed font size
+[source, no_theme, role="noclip"]
+----
+[cols="6,6", options="header", width="100%", role="rtable no-rtext"]
+|===
+|Variable |Description
+...
+|===
+----
+
+.R Table, stacked, fixed text size `no-rtext`
+[cols="6a,6a", options="header", width="100%", role="rtable no-rtext mt-3"]
+|===
+|Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|===
+
+
+== Tables multi-column
+
+Responsive Bootstrap tables support tables to be scrolled horizontally
+on smaller viewports. Making any table responsive across all viewports,
+the additional class `rtable` is used. For specific (Bootstrap)
+breakpoints, the classes `rtable{-sm|-md|-lg|-xl}` are available
+to better control over what viewport sizes table are transformed.
+From a specified breakpoint and up, the table will behave normally and do
+not scroll horizontally.
+
+=== Bootstrap tables
+
+Bootstrap responsive tables make use of overflow-y: hidden, which clips off
+any content that goes beyond the bottom or top edges of the table.
+In particular, this can clip off dropdown menus and other third-party
+widgets.
+
+.Example, Bootstrap using fixed text size `no-rtext`
+[source, no_theme, role="noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="table-responsive no-rtext"]
+|===
+|Parameter |Type |Default |Description |Example
+...
+|===
+----
+
+.Bootstrap, fixed text size `no-rtext`
+[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive no-rtext mt-3"]
+|===
+|Parameter |Type |Default |Description |Example
+
+|`color`
+|Hash
+|`md_white`
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===
+
+.Example, Bootstrap using responsive text size
+[source, no_theme, role="noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="table-responsive"]
+|===
+|Parameter |Type |Default |Description |Example
+...
+|===
+----
+
+.Bootstrap, responsive text size
+[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive mt-3"]
+|===
+|Parameter |Type |Default |Description |Example
+
+|`color`
+|Hash
+|`md_white`
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===
+
+=== Responsive tables
+
+.Example, R Table using fixed text size `no-rtext`
+[source, no_theme, role="noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+|===
+|Parameter |Type |Default |Description |Example
+...
+|===
+----
+
+.R Table, fixed text size `no-rtext`
+[cols="2,2,2,3,3", options="header", width="100%", role="rtable no-rtext mt-3"]
+|===
+|Parameter |Type |Default |Description |Example
+
+|`color`
+|Hash
+|`md_white`
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===
+
+.Example, R Table using fixed text size `no-rtext`
+[source, no_theme, role="noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+|===
+|Parameter |Type |Default |Description |Example
+...
+|===
+----
+
+.R Table, responsive text size
+[cols="2,2,2,3,3", options="header", width="100%", role="rtable mt-3"]
+|===
+|Parameter |Type |Default |Description |Example
+
+|`color`
+|Hash
+|`md_white`
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+|The background_color hash contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===
+
+
+== What next
+
+Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
+An exciting feature may be the use of themes. But much, much more can the J1
+do for your Web Site.
+
+Check out what themes can do. Have a look at the
+link:{url-roundtrip--themes}[BS Themes] feature!