j1-template 2021.1.1 → 2021.1.2

data/_includes/themes/j1/procedures/posts/collate_timeline.proc

@@ -144,7 +144,8 @@
                 <i class="timeline-icon {{icon_family}} {{icon_family}}-{{icon_name}} {{icon_family}}-{{icon_size}} {{icon_family}}-{{icon_color}}"></i>
                 {{excerpt}}
               </div>
-              <div class="card-footer">
+              <div class="card-footer r-text-200 text-lowercase">
+                <hr class="my-3">
                 <a href="{{post.url}}#readmore"
                    class="btn btn-secondary btn-raised btn-flex mb-0">
                    <i class="mdi mdi-eye mdi-lg mr-1" style="color:#FFFFFF;">
@@ -165,7 +166,8 @@
                 {% assign excerpt = post.excerpt|truncatewords: 50|replace:'...',' ...'|strip_html|strip_newlines|strip %}
                 {{excerpt}}
               </div>
-              <div class="card-footer">
+              <div class="card-footer r-text-200 text-lowercase">
+                <hr class="my-3">
                 <a href="{{post.url}}#readmore"
                    class="btn btn-secondary btn-raised btn-flex mb-0">
                    <i class="mdi mdi-eye mdi-lg mr-1" style="color:#FFFFFF;">
@@ -193,21 +195,22 @@
               {% assign comment_count = sharing.comment_count %}
             {% endfor %}
 
-            <div class="card-footer r-text-200">
+            <div class="card-footer r-text-200 text-lowercase">
+              <hr class="my-3">
               <div class="card-footer-text">
                 {% if post.date %}
-                <i class="mdi mdi-calendar-blank mr-1"></i> {{post.date | date: "%Y %B, %e"}}
+                <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> {{post.date | date: "%Y %B, %e"}}
                 {% endif %}
                 {% if likes_count %}
                 <span class="font-weight-bold"> · </span>
-                <i class="mdi mdi-heart mr-1"></i> {{likes_count}}
+                <i class="mdi mdi-heart mdi-md-grey mr-1"></i> {{likes_count}}
                 {% endif %}
                 {% if comment_count %}
                 <span class="font-weight-bold"> · </span>
-                <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
+                <i class="mdi mdi-comment mdi-md-grey mr-1"></i> {{comment_count}}
                 {% endif %}
               </div>
-              <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase"
+              <a class="card-link md-grey text-lowercase"
                 href="{{post.url}}#readmore">
                 Read · {{post.tagline}}
               </a>

data/assets/data/panel.html

@@ -209,7 +209,7 @@ regenerate:                             true
 
               {% if card_type == 'text' and card_enabled %}
                 {% assign card_raised = 'raised-z5' %}
-                <article class="card raised-z5 mb-3">
+                <article class="card raised-z3 mb-3">
                   <div class="card-header bg-primary pt-2 pb-2">
                     <div class="d-flex flex-row align-items-center">
                       <div class="mr-3">
@@ -234,7 +234,7 @@ regenerate:                             true
                   </div>
 
                   <div class="card-body g-min-height-200 r-text-300">{{card_text}}</div>
-                  <div class="card-footer r-text-200">
+                  <div class="card-footer r-text-200 text-lowercase">
                   {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
                     {% assign key   = button[0] %}
                     {% assign value = button[1] %}
@@ -248,10 +248,12 @@ regenerate:                             true
                     {% if key == 'target' %}      {% assign button_target       = value %} {% endif %}
                   {% endfor %} {% endfor %}{% endfor %}
 
+                  <hr class="my-3">
+
                   {% if button_target == null %}
-                    <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase" href="{{button_href}}">{{button_text}}</a>
+                    <a class="card-link md-grey-500" href="{{button_href}}">{{button_text}}</a>
                   {% else %}
-                    <a class="card-link  md-grey-800 font-weight-bold g-font-size-12 text-uppercase" href="{{button_href}}" target="{{button_target}}">{{button_text}}</a>
+                    <a class="card-link  md-grey-500" href="{{button_href}}" target="{{button_target}}">{{button_text}}</a>
                   {% endif %}
                   </div>
 
@@ -472,9 +474,9 @@ regenerate:                             true
                 {% if category == post_category and last_post_written != true %}
                   {% assign posts_written = posts_written|plus:1 %}
                   <!-- Post -->
-                    <article class="card raised-z5 mb-3">
+                    <article class="card raised-z3 mb-3">
                       {% if post.image %}
-                        <img class="img-fluid img__object--cover g-height-200" src="{{post.image}}" alt="{{post.title}}">
+                        <img class="img-fluid img-object--cover g-height-200" src="{{post.image}}" alt="{{post.title}}">
                         {% assign post_width = '80x' %}
                       {% else %}
                         <img class="mt-2" src="" alt="">
@@ -486,12 +488,13 @@ regenerate:                             true
                         {{post.excerpt|truncatewords:50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
                       </div>
                       <!-- End Body|Excerpt -->
-                      <div class="card-footer r-text-200">
+                      <div class="card-footer r-text-200 text-lowercase">
+                        <hr class="my-3">
                         <div class="card-footer-text">
-                          <i class="mdi mdi-calendar-blank mr-1"></i>
+                          <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i>
                           {{post.date|date:"%Y %B, %e"}}
                         </div>
-                        <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase"
+                        <a class="card-link md-grey-500"
                            href="{{post.url}}">
                            {{readmore_text}} · {{post.tagline}}
                         </a>

data/assets/themes/j1/adapter/js/navigator.js

@@ -235,7 +235,16 @@ j1.adapter['navigator'] = (function (j1, window) {
       var navAuthClientOptions                      = {};
       var navAuthMAnagerConfig                      = {};
 
+      var user_state                                = {};
+      var cookie_names                              = j1.getCookieNames();
+      var cookie_user_state_name                    = cookie_names.user_state;
+
       var themerOptions                             = {};
+      var interval_count                            = 0;
+      var user_state_detected;
+      var themes_count;
+      var max_count                                 = 100;
+
 
       navDefaults                                   = $.extend({}, {{navigator_defaults | replace: '=>', ':' }});
       navBarConfig                                  = $.extend({}, {{nav_bar_options | replace: '=>', ':' }});
@@ -339,10 +348,17 @@ j1.adapter['navigator'] = (function (j1, window) {
 
           // load themes (to menu) if themer is enabled|finished
           if (themerEnabled) {
+
+            // Detect|Set J1 UserState
+            user_state_detected = j1.existsCookie(cookie_user_state_name);
+            if (user_state_detected) {
+              user_state        = j1.readCookie(cookie_user_state_name);
+            }
+
             var dependencies_met_page_finished = setInterval(function() {
-              // jadams, 2020-10-03: NOT needed to wait for j1 finished
-//            if (j1.getState() == 'finished') {
-              if (j1.adapter.themer.getState() == 'finished') {
+               // jadams, 2020-10-03: NOT needed to wait for j1 finished
+//             if (j1.getState() == 'finished') {
+               if (j1.adapter.themer.getState() == 'finished') {
                 // initialize theme switcher menus
                 logText = 'theme switcher detect: enabled';
                 logger.info(logText);
@@ -350,19 +366,48 @@ j1.adapter['navigator'] = (function (j1, window) {
                 logText = 'load themes';
                 logger.info(logText);
 
-                // load REMOTE themes from Bootswatch API (localFeed EMPTY!)
-                $('#remote_themes').bootstrapThemeSwitcher({
-                  localFeed: '',
-                  bootswatchApiVersion: themerOptions.bootswatchApiVersion
-                });
-
                 // load LOCAL themes from JSON data
                 logText = 'load local themes (json file)';
                 logger.info(logText);
                 $('#local_themes').bootstrapThemeSwitcher({
                   localFeed: themerOptions.localThemes
                 });
-                clearInterval(dependencies_met_page_finished);
+
+                // load REMOTE themes from Bootswatch API (localFeed EMPTY!)
+                $('#remote_themes').bootstrapThemeSwitcher({
+                  localFeed: '',
+                  bootswatchApiVersion: themerOptions.bootswatchApiVersion
+                });
+
+                // jadams, 2021-04-22: Up to now, it is unclear why in some
+                // cases the menu bar is NOT fully loaded for THEMES
+                // TODO: Add additional checks to find the reason
+
+                // added same checks (as already done by adapter themer) to
+                // check if remote theme menu detected as LOADED
+                //
+                var dependencies_met_remote_themes_loaded = setInterval(function() {
+                  interval_count += 1;
+                  themes_count = document.getElementById("remote_themes").getElementsByTagName("li").length;
+                  if ( themes_count > 0  ) {
+                    logger.info('remote themes loaded: successfully');
+                    logger.info('remote themes loaded: successfully after: ' + interval_count * 25 + ' ms');
+
+                    clearInterval(dependencies_met_remote_themes_loaded);
+//                  clearInterval(dependencies_met_page_finished);
+                  } else {
+                      logger.debug('wait for theme to be loaded: ' + user_state.theme_name);
+                  }
+                  if (interval_count > max_count) {
+                    logger.warn('remote themes loading: failed');
+                    logger.warn('continue processing');
+                    clearInterval(dependencies_met_remote_themes_loaded);
+//                  clearInterval(dependencies_met_page_finished);
+                  }
+                  clearInterval(dependencies_met_page_finished);
+                }, 25);
+
+//              clearInterval(dependencies_met_page_finished);
               }
               _this.setState('initialized');
             }, 25); // END 'dependencies_met_page_finished'

data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css

@@ -155,7 +155,7 @@ body {
   line-height: 1.5;
   color: #212121;
   text-align: left;
-  background-color: #fafafa; }
+  background-color: #ffffff; }
 
 [tabindex="-1"]:focus:not(:focus-visible) {
   outline: 0 !important; }
@@ -489,7 +489,7 @@ mark,
 
 .img-thumbnail {
   padding: 0.25rem;
-  background-color: #fafafa;
+  background-color: #ffffff;
   border: 1px solid #e0e0e0;
   border-radius: 0.1rem;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
@@ -3002,11 +3002,11 @@ input[type="button"].btn-block {
   .custom-range:focus {
     outline: 0; }
     .custom-range:focus::-webkit-slider-thumb {
-      box-shadow: 0 0 0 1px #fafafa, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
+      box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
     .custom-range:focus::-moz-range-thumb {
-      box-shadow: 0 0 0 1px #fafafa, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
+      box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
     .custom-range:focus::-ms-thumb {
-      box-shadow: 0 0 0 1px #fafafa, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
+      box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.2rem rgba(33, 150, 243, 0.25); }
   .custom-range::-moz-focus-outer {
     border: 0; }
   .custom-range::-webkit-slider-thumb {
@@ -3143,8 +3143,8 @@ input[type="button"].btn-block {
   .nav-tabs .nav-link.active,
   .nav-tabs .nav-item.show .nav-link {
     color: #616161;
-    background-color: #fafafa;
-    border-color: #e0e0e0 #e0e0e0 #fafafa; }
+    background-color: #ffffff;
+    border-color: #e0e0e0 #e0e0e0 #ffffff; }
   .nav-tabs .dropdown-menu {
     margin-top: -1px;
     border-top-left-radius: 0;
@@ -7455,7 +7455,11 @@ button:focus {
   outline: none; }
 
 a.btn:hover {
-  color: rgba(0, 0, 0, 0.8) !important; }
+  color: rgba(0, 0, 0, 0.8) !important;
+  -webkit-transition: background-color .5s ease-out;
+  -moz-transition: background-color .5s ease-out;
+  -o-transition: background-color .5s ease-out;
+  transition: background-color .5s ease-out; }
 
 .btn {
   position: relative;
@@ -13212,8 +13216,18 @@ table.tableblock > .title {
 .card-header:first-child {
   border-radius: 0 !important; }
 
+/*
 .card .card-footer {
-  background-color: #f5f5f5; }
+  background-color: $grey-100;
+}
+*/
+.card .card-footer {
+  padding-top: 0;
+  padding-right: 1.25rem;
+  padding-bottom: 1.25rem;
+  padding-left: 1.25rem;
+  border-top: 0;
+  background-color: transparent; }
 
 /* jadams: Overwrite Bootstraps heading margins for cards */
 /* .card > h1, h2, h3, h4, h5 { */
@@ -14126,19 +14140,24 @@ a.card-title:hover {
  # See: https://www.digitalocean.com/community/tutorials/css-cropping-images__object--fit
  # -----------------------------------------------------------------------------
 */
-.img__object--contain {
+.img-bg--fill {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center; }
+
+.img-object--contain {
   object-fit: contain; }
 
-.img__object--cover {
+.img-object--cover {
   object-fit: cover; }
 
-.img__object--fill {
+.img-object--fill {
   object-fit: fill; }
 
-.img__object--none {
+.img-object--none {
   object-fit: fill; }
 
-.img__object--scale-down {
+.img-object--scale-down {
   object-fit: scale-down; }
 
 /*
@@ -16283,14 +16302,57 @@ a.timeline-list-unstyled:hover {
 .btn {
   padding: .5rem 1rem .5rem 1rem; }
 
+.btn.btn-xs {
+  line-height: 1.4;
+  padding: 0.14286rem 0.5rem;
+  font-size: 0.78571rem; }
+
+.btn.btn-md {
+  line-height: 1.4;
+  padding: 0.57143rem 1.42857rem;
+  font-size: 1.07143rem; }
+
+.btn.btn-xl {
+  line-height: 1.4;
+  padding: 0.92857rem 1.85714rem;
+  font-size: 1.28571rem; }
+
+.btn.btn-xxl {
+  line-height: 1.4;
+  padding: 1.07143rem 2.14286rem;
+  font-size: 1.5rem; }
+
 .btn.btn-round {
   border-radius: 30px; }
 
+.btn.btn-skew {
+  -webkit-transform: skewX(-20deg);
+  -ms-transform: skewX(-20deg);
+  transform: skewX(-20deg); }
+
+.btn.skew__inner {
+  -webkit-transform: skewX(20deg);
+  -ms-transform: skewX(20deg);
+  transform: skewX(20deg);
+  display: block; }
+
 .btn.btn-flex {
   display: inline-flex !important;
   align-items: center; }
 
-/* jadams: social media button styles */
+/*
+.btn:not(.btn-just-icon):not(.btn-fab):not(.btn-text) .fa {
+  // margin-right: .5rem;
+}
+
+.btn:not(.btn-just-icon):not(.btn-fab):not(.btn-text) .mdi {
+  // margin-right: .5rem;
+}
+
+.btn:not(.btn-just-icon):not(.btn-fab):not(.btn-text) .zmdi {
+  // margin-right: .5rem;
+}
+*/
 .btn.btn-facebook {
   background-color: #3b5998;
   color: #fff;
@@ -16557,7 +16619,7 @@ a.md-red-600:focus {
   color: #424242; }
 
 .md-red-700 {
-  color: #d32f2f !important; }
+  color: #c62828 !important; }
 
 a.md-red-700:hover,
 a.md-red-700:focus {
@@ -16662,7 +16724,7 @@ a.md-bg-red-600:focus {
   background-color: #424242; }
 
 .md-bg-red-700 {
-  background-color: #d32f2f !important; }
+  background-color: #c62828 !important; }
 
 a.md-bg-red-700:hover,
 a.md-bg-red-700:focus {
@@ -17607,7 +17669,7 @@ a.md-blue-600:focus {
   color: #424242; }
 
 .md-blue-700 {
-  color: #1976d2 !important; }
+  color: #1565c0 !important; }
 
 a.md-blue-700:hover,
 a.md-blue-700:focus {
@@ -17712,7 +17774,7 @@ a.md-bg-blue-600:focus {
   background-color: #424242; }
 
 .md-bg-blue-700 {
-  background-color: #1976d2 !important; }
+  background-color: #1565c0 !important; }
 
 a.md-bg-blue-700:hover,
 a.md-bg-blue-700:focus {
@@ -20439,161 +20501,147 @@ a.md-black-darker:focus {
 
 .btn-md-red:hover,
 .btn-md-red:focus {
-  background-color: #424242; }
+  background-color: #c62828 !important; }
 
 .btn-md-pink {
   background-color: #e91e63 !important; }
 
 .btn-md-pink:hover,
 .btn-md-pink:focus {
-  background-color: #424242; }
+  background-color: #ad1457 !important; }
 
 .btn-md-purple {
   background-color: #9c27b0 !important; }
 
 .btn-md-purple:hover,
 .btn-md-purple:focus {
-  background-color: #424242; }
+  background-color: #6a1b9a !important; }
 
 .btn-md-deep-purple {
   background-color: #673ab7 !important; }
 
 .btn-md-deep-purple:hover,
 .btn-md-deep-purple:focus {
-  background-color: #424242; }
+  background-color: #4527a0 !important; }
 
 .btn-md-indigo {
   background-color: #3f51b5 !important; }
 
 .btn-md-indigo:hover,
 .btn-md-indigo:focus {
-  background-color: #424242; }
+  background-color: #283593 !important; }
 
 .btn-md-blue {
   background-color: #2196f3 !important; }
 
 .btn-md-blue:hover,
 .btn-md-blue:focus {
-  background-color: #424242; }
+  background-color: #1565c0 !important; }
 
 .btn-md-light-blue {
   background-color: #03a9f4 !important; }
 
 .btn-md-light-blue:hover,
 .btn-md-light-blue:focus {
-  background-color: #424242; }
+  background-color: #0277bd !important; }
 
 .btn-md-cyan {
   background-color: #00bcd4 !important; }
 
 .btn-md-cyan:hover,
 .btn-md-cyan:focus {
-  background-color: #424242; }
+  background-color: #00838f !important; }
 
 .btn-md-teal {
   background-color: #009688 !important; }
 
 .btn-md-teal:hover,
 .btn-md-teal:focus {
-  background-color: #424242; }
+  background-color: #00695c !important; }
 
 .btn-md-green {
   background-color: #4caf50 !important; }
 
 .btn-md-green:hover,
 .btn-md-green:focus {
-  background-color: #424242; }
+  background-color: #2e7d32 !important; }
 
 .btn-md-light-green {
   background-color: #8bc34a !important; }
 
 .btn-md-light-green:hover,
 .btn-md-light-green:focus {
-  background-color: #424242; }
+  background-color: #558b2f !important; }
 
 .btn-md-lime {
   background-color: #cddc39 !important; }
 
 .btn-md-lime:hover,
 .btn-md-lime:focus {
-  background-color: #424242; }
+  background-color: #9e9d24 !important; }
 
 .btn-md-yellow {
   background-color: #ffeb3b !important; }
 
 .btn-md-yellow:hover,
 .btn-md-yellow:focus {
-  background-color: #424242; }
+  background-color: #f9a825 !important; }
 
 .btn-md-amber {
   background-color: #ffc107 !important; }
 
 .btn-md-amber:hover,
 .btn-md-amber:focus {
-  background-color: #424242; }
+  background-color: #ff8f00 !important; }
 
 .btn-md-orange {
   background-color: #ff9800 !important; }
 
 .btn-md-orange:hover,
 .btn-md-orange:focus {
-  background-color: #424242; }
+  background-color: #ef6c00 !important; }
 
 .btn-md-deep-orange {
   background-color: #ff5722 !important; }
 
 .btn-md-deep-orange:hover,
 .btn-md-deep-orange:focus {
-  background-color: #424242; }
+  background-color: #d84315 !important; }
 
 .btn-md-brown {
   background-color: #795548 !important; }
 
 .btn-md-brown:hover,
 .btn-md-brown:focus {
-  background-color: #424242; }
+  background-color: #4e342e !important; }
 
 .btn-md-grey {
   background-color: #9e9e9e !important; }
 
 .btn-md-grey:hover,
 .btn-md-grey:focus {
-  background-color: #424242; }
+  background-color: #424242 !important; }
 
 .btn-md-blue-grey {
   background-color: #607d8b !important; }
 
 .btn-md-blue-grey:hover,
 .btn-md-blue-grey:focus {
-  background-color: #424242; }
+  background-color: #37474f !important; }
 
 .btn-md-gray {
   background-color: #9e9e9e !important; }
 
 .btn-md-gray:hover,
 .btn-md-gray:focus {
-  background-color: #424242; }
+  background-color: #424242 !important; }
 
 .btn-md-blue-gray {
   background-color: #607d8b !important; }
 
 .btn-md-blue-gray:hover,
 .btn-md-blue-gray:focus {
-  background-color: #424242; }
-
-.btn-md-black {
-  background-color: #000 !important; }
-
-.btn-md-black:hover,
-.btn-md-black:focus {
-  background-color: #424242; }
-
-.btn-md-white {
-  background-color: #fff !important; }
-
-.btn-md-white:hover,
-.btn-md-white:focus {
-  background-color: #424242; }
+  background-color: #37474f !important; }
 
 /*
  # -----------------------------------------------------------------------------