@mjhls/mjh-framework 1.0.110 → 1.0.111

package/dist/index.js

@@ -11113,7 +11113,7 @@ var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
   }
 };
 
-var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory) {
   return React__default.createElement(
     'div',
     null,
@@ -11170,6 +11170,19 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
                 return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
               }),
+              showCategory && article.contentCategory && React__default.createElement(
+                'p',
+                {
+                  style: {
+                    background: 'var(--highlight)',
+                    color: 'var(--highlight-accent)',
+                    marginBottom: '.25rem',
+                    display: 'inline-block',
+                    padding: '0 .25rem',
+                    fontSize: '.8rem'
+                  } },
+                article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
+              ),
               article.summary && React__default.createElement(
                 'p',
                 { className: 'pt-2 card-text' },
@@ -11221,7 +11234,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       seoPaginate = props.seoPaginate,
       pageview = props.pageview,
       defaultImage = props.defaultImage,
-      showAuthor = props.showAuthor;
+      showAuthor = props.showAuthor,
+      showCategory = props.showCategory;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -11279,7 +11293,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           reactBootstrap.Container,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
         )
       ),
       React__default.createElement(
@@ -11293,7 +11307,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       React__default.createElement(
         reactBootstrap.Container,
         null,
-        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
       ),
       React__default.createElement(
         'div',
@@ -12190,6 +12204,7 @@ var NavFooter = function NavFooter(props) {
 
 var NavMagazine = function NavMagazine(props) {
   var logo = props.logo,
+      mobileLogo = props.mobileLogo,
       dataObject = props.dataObject,
       subNav = props.subNav,
       website = props.website;
@@ -12201,6 +12216,11 @@ var NavMagazine = function NavMagazine(props) {
       isSticky = _useState2[0],
       setIsSticky = _useState2[1];
 
+  var _useState3 = React.useState(0),
+      _useState4 = slicedToArray(_useState3, 2),
+      screenWidth = _useState4[0],
+      setScreenWidth = _useState4[1];
+
   React.useEffect(function () {
     document.addEventListener('scroll', trackScrolling);
     return function () {
@@ -12209,6 +12229,10 @@ var NavMagazine = function NavMagazine(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  React.useEffect(function () {
+    setScreenWidth(parseInt(window.innerWidth));
+  }, []);
+
   var trackScrolling = function trackScrolling() {
     var offsetTop = navRef.current.getBoundingClientRect().top;
 
@@ -12241,7 +12265,7 @@ var NavMagazine = function NavMagazine(props) {
               React__default.createElement(
                 'a',
                 null,
-                React__default.createElement('img', { src: logo, style: { height: '55px' } })
+                mobileLogo && screenWidth < 776 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, style: { height: '55px' } })
               )
             )
           )
@@ -12255,8 +12279,12 @@ var NavMagazine = function NavMagazine(props) {
       React__default.createElement(
         Container,
         { className: 'mobile-nav' },
-        React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
-        React__default.createElement(Search, { device: 'mobile' }),
+        React__default.createElement(
+          'div',
+          { className: 'nav-toggle' },
+          React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
+          React__default.createElement(Search, { device: 'mobile' })
+        ),
         subNav && React__default.createElement(
           Navbar.Collapse,
           { id: 'basic-navbar-sub' },
@@ -12365,7 +12393,7 @@ var NavMagazine = function NavMagazine(props) {
     React__default.createElement(
       'style',
       { jsx: true },
-      '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        @media screen and (max-width: 991px) {\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n        }\n        .mobile-nav {\n          position: relative;\n        }\n        .mobile-nav .navbar-toggler {\n          width: 100%;\n          min-height: 45px;\n        }\n        .mobile-nav .navbar-toggler-icon {\n          float: left;\n        }\n        .mobile-nav .form-inline {\n          position: absolute;\n          right: 2px;\n          top: 4px;\n        }\n        .mobile-nav .form-inline .mobile-search {\n          width: 69%;\n        }\n      '
+      '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        @media screen and (max-width: 991px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 367px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            width: 70%;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n           margin-right: 5px\n          }\n        }\n      '
     )
   );
 };
@@ -13637,7 +13665,7 @@ var TemplateNormal = function TemplateNormal(props) {
       case 'normal':
         return React__default.createElement(NavNormal, { logo: website.logo, dataObject: config.navItems });
       case 'magazine':
-        return React__default.createElement(NavMagazine, { logo: website.logo, dataObject: config.navItems, subNav: config.leftItems, website: website });
+        return React__default.createElement(NavMagazine, { logo: website.logo, mobileLogo: website.mobileLogo, dataObject: config.navItems, subNav: config.leftItems, website: website });
       case 'native':
         return React__default.createElement(NavNative, { logo: website.logo, dataObject: config.navItems, subNav: config.leftItems, website: website });
       case 'dvm':