@mjhls/mjh-framework 1.0.110 → 1.0.112

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.
package/dist/index.js CHANGED
@@ -11113,7 +11113,7 @@ var renderAuthor = function renderAuthor(authorDetail, index$$1, length) {
11113
11113
  }
11114
11114
  };
11115
11115
 
11116
- var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor) {
11116
+ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory) {
11117
11117
  return React__default.createElement(
11118
11118
  'div',
11119
11119
  null,
@@ -11170,6 +11170,19 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
11170
11170
  showAuthor && article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index$$1) {
11171
11171
  return renderAuthor(authorDetail, index$$1, article.authorMapping.length);
11172
11172
  }),
11173
+ showCategory && article.contentCategory && React__default.createElement(
11174
+ 'p',
11175
+ {
11176
+ style: {
11177
+ background: 'var(--highlight)',
11178
+ color: 'var(--highlight-accent)',
11179
+ marginBottom: '.25rem',
11180
+ display: 'inline-block',
11181
+ padding: '0 .25rem',
11182
+ fontSize: '.8rem'
11183
+ } },
11184
+ article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
11185
+ ),
11173
11186
  article.summary && React__default.createElement(
11174
11187
  'p',
11175
11188
  { className: 'pt-2 card-text' },
@@ -11221,7 +11234,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
11221
11234
  seoPaginate = props.seoPaginate,
11222
11235
  pageview = props.pageview,
11223
11236
  defaultImage = props.defaultImage,
11224
- showAuthor = props.showAuthor;
11237
+ showAuthor = props.showAuthor,
11238
+ showCategory = props.showCategory;
11225
11239
  var initialCurrentPage = props.currentPage,
11226
11240
  showPublished = props.showPublished;
11227
11241
 
@@ -11279,7 +11293,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
11279
11293
  React__default.createElement(
11280
11294
  reactBootstrap.Container,
11281
11295
  null,
11282
- cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor)
11296
+ cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
11283
11297
  )
11284
11298
  ),
11285
11299
  React__default.createElement(
@@ -11293,7 +11307,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
11293
11307
  React__default.createElement(
11294
11308
  reactBootstrap.Container,
11295
11309
  null,
11296
- cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor)
11310
+ cardLoader(data, builder, mapping, values, seoPaginate, pageview, router$$1, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory)
11297
11311
  ),
11298
11312
  React__default.createElement(
11299
11313
  'div',
@@ -12190,6 +12204,7 @@ var NavFooter = function NavFooter(props) {
12190
12204
 
12191
12205
  var NavMagazine = function NavMagazine(props) {
12192
12206
  var logo = props.logo,
12207
+ mobileLogo = props.mobileLogo,
12193
12208
  dataObject = props.dataObject,
12194
12209
  subNav = props.subNav,
12195
12210
  website = props.website;
@@ -12201,6 +12216,11 @@ var NavMagazine = function NavMagazine(props) {
12201
12216
  isSticky = _useState2[0],
12202
12217
  setIsSticky = _useState2[1];
12203
12218
 
12219
+ var _useState3 = React.useState(0),
12220
+ _useState4 = slicedToArray(_useState3, 2),
12221
+ screenWidth = _useState4[0],
12222
+ setScreenWidth = _useState4[1];
12223
+
12204
12224
  React.useEffect(function () {
12205
12225
  document.addEventListener('scroll', trackScrolling);
12206
12226
  return function () {
@@ -12209,6 +12229,10 @@ var NavMagazine = function NavMagazine(props) {
12209
12229
  // eslint-disable-next-line react-hooks/exhaustive-deps
12210
12230
  }, []);
12211
12231
 
12232
+ React.useEffect(function () {
12233
+ setScreenWidth(parseInt(window.innerWidth));
12234
+ }, []);
12235
+
12212
12236
  var trackScrolling = function trackScrolling() {
12213
12237
  var offsetTop = navRef.current.getBoundingClientRect().top;
12214
12238
 
@@ -12241,7 +12265,7 @@ var NavMagazine = function NavMagazine(props) {
12241
12265
  React__default.createElement(
12242
12266
  'a',
12243
12267
  null,
12244
- React__default.createElement('img', { src: logo, style: { height: '55px' } })
12268
+ mobileLogo && screenWidth < 776 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, style: { height: '55px' } })
12245
12269
  )
12246
12270
  )
12247
12271
  )
@@ -12255,8 +12279,12 @@ var NavMagazine = function NavMagazine(props) {
12255
12279
  React__default.createElement(
12256
12280
  Container,
12257
12281
  { className: 'mobile-nav' },
12258
- React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
12259
- React__default.createElement(Search, { device: 'mobile' }),
12282
+ React__default.createElement(
12283
+ 'div',
12284
+ { className: 'nav-toggle' },
12285
+ React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
12286
+ React__default.createElement(Search, { device: 'mobile' })
12287
+ ),
12260
12288
  subNav && React__default.createElement(
12261
12289
  Navbar.Collapse,
12262
12290
  { id: 'basic-navbar-sub' },
@@ -12365,7 +12393,7 @@ var NavMagazine = function NavMagazine(props) {
12365
12393
  React__default.createElement(
12366
12394
  'style',
12367
12395
  { jsx: true },
12368
- '\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 '
12396
+ '\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 '
12369
12397
  )
12370
12398
  );
12371
12399
  };
@@ -13637,7 +13665,7 @@ var TemplateNormal = function TemplateNormal(props) {
13637
13665
  case 'normal':
13638
13666
  return React__default.createElement(NavNormal, { logo: website.logo, dataObject: config.navItems });
13639
13667
  case 'magazine':
13640
- return React__default.createElement(NavMagazine, { logo: website.logo, dataObject: config.navItems, subNav: config.leftItems, website: website });
13668
+ return React__default.createElement(NavMagazine, { logo: website.logo, mobileLogo: website.mobileLogo, dataObject: config.navItems, subNav: config.leftItems, website: website });
13641
13669
  case 'native':
13642
13670
  return React__default.createElement(NavNative, { logo: website.logo, dataObject: config.navItems, subNav: config.leftItems, website: website });
13643
13671
  case 'dvm':
@@ -13784,22 +13812,21 @@ var FigureComponent = function FigureComponent(_ref) {
13784
13812
  _node$alignment = node$$1.alignment,
13785
13813
  alignment = _node$alignment === undefined ? 'center' : _node$alignment;
13786
13814
 
13787
-
13788
- var imgWidth = widthP ? widthP + '%' : 'auto';
13815
+ var imgWidth = widthP ? widthP + '%' : '100%';
13789
13816
 
13790
13817
  var figureMargin = void 0;
13791
13818
  if (imgFloat === 'none') {
13792
13819
  figureMargin = '0 auto 1rem';
13793
13820
  }
13794
13821
  if (imgFloat === 'left') {
13795
- figureMargin = '0 1rem 1rem 10%';
13822
+ figureMargin = '0 10% 1rem 1rem';
13796
13823
  }
13797
13824
  if (imgFloat === 'right') {
13798
- figureMargin = '0 10% 1rem 1rem';
13825
+ figureMargin = '0 1rem 1rem 10%';
13799
13826
  }
13800
13827
 
13801
13828
  var loadImg = function loadImg() {
13802
- setcaptionWidth(imgElement.current.naturalWidth);
13829
+ setcaptionWidth(imgElement.current.width);
13803
13830
  };
13804
13831
 
13805
13832
  React.useEffect(function () {
@@ -13807,14 +13834,13 @@ var FigureComponent = function FigureComponent(_ref) {
13807
13834
  if (screenWidth > 1000) {
13808
13835
  var align = alignment.toLowerCase() === 'center' ? 'none' : alignment.toLowerCase();
13809
13836
  setimgFloat(align);
13810
- loadImg();
13811
13837
  }
13812
13838
  // eslint-disable-next-line react-hooks/exhaustive-deps
13813
13839
  }, []);
13814
13840
 
13815
13841
  return React__default.createElement(
13816
13842
  reactBootstrap.Figure,
13817
- { className: 'd-block text-center mb-3', style: { width: imgWidth, clear: 'both', float: imgFloat, margin: figureMargin } },
13843
+ { className: 'd-block text-center mb-3', style: { width: imgWidth, float: imgFloat, clear: 'both', margin: figureMargin } },
13818
13844
  link ? React__default.createElement(
13819
13845
  'a',
13820
13846
  { href: link, target: blank ? '_blank' : '_self' },