@mjhls/mjh-framework 1.0.692 → 1.0.693

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 (4) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/NavNative.js +28 -21
  3. package/dist/esm/NavNative.js +28 -21
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.692
2
+ # mjh-framework v. 1.0.693
3
3
 
4
4
  > Foundation Framework
5
5
 
package/dist/cjs/NavNative.js CHANGED
@@ -157,6 +157,9 @@ var NavNative = function NavNative(props) {
157
157
  var toggleClass = function toggleClass(selector, type, addOn) {
158
158
  if (type === 'id') {
159
159
  var searchBar = document.getElementById(selector);
160
+ // Aligning search bar below the searchbutton
161
+ var socialComponent = document.getElementById('search-content-desktop').getBoundingClientRect();
162
+ searchBar.style.right = window.innerWidth - socialComponent.left + 'px';
160
163
  if (searchBar && searchBar.classList && searchBar.classList.contains(addOn)) {
161
164
  searchBar.classList.remove(addOn);
162
165
  } else if (searchBar && searchBar.classList) {
@@ -226,7 +229,31 @@ var NavNative = function NavNative(props) {
226
229
  } else if (type === 'desktop') {
227
230
  return React__default.createElement(
228
231
  'div',
229
- { id: 'search-content-desktop' },
232
+ null,
233
+ React__default.createElement(
234
+ 'div',
235
+ { id: 'search-content-desktop' },
236
+ React__default.createElement(
237
+ iconBase.IconContext.Provider,
238
+ { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
239
+ React__default.createElement(index_esm$2.GoSearch, {
240
+ onClick: function onClick() {
241
+ toggleClass('search-bar-desktop', 'id', 'show');
242
+ toggleClass('search-btn-desktop', 'class', 'active-search');
243
+ }
244
+ })
245
+ ),
246
+ website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
247
+ 'div',
248
+ { id: 'social-tab-desktop', style: { display: 'flex' } },
249
+ website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
250
+ ),
251
+ React__default.createElement(
252
+ 'style',
253
+ { jsx: 'true' },
254
+ '\n #social-tab-desktops {\n position: relative;\n display: flex;\n left: 0px;\n }\n #social-tab-desktops svg {\n height: 25px !important;\n width: 25px !important;\n }\n @media screen and (max-width: 1191px) {\n #search-content-desktop {\n display: none !important;\n }\n }\n @media screen and (min-width: 1199px) {\n .mobile-nav {\n width: 100% !important;\n }\n }\n #search-content-desktop {\n display: flex;\n padding-top: 2px;\n height: 35px;\n position: relative;\n }\n .search-btn-desktop {\n padding: 5px;\n height: 35px;\n width: 35px;\n margin: -3px 0px 0px 0px;\n cursor: pointer;\n }\n #search-bar-desktop {\n display: none;\n background-color: var(--primary);\n position: fixed;\n width: 400px;\n border-radius: 5px;\n height: 48px;\n top: 105px;\n }\n #search-bar-desktop .form-inline {\n padding: 5px;\n }\n #search-bar-desktop .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n }\n #search-bar-desktop .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n padding: 7px;\n margin-left: 5px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n margin-right: 1px !important;\n }\n #basic-navbar-nav {\n margin-right: 20%;\n }\n '
255
+ )
256
+ ),
230
257
  React__default.createElement(
231
258
  'div',
232
259
  { id: 'search-bar-desktop' },
@@ -246,26 +273,6 @@ var NavNative = function NavNative(props) {
246
273
  'Search'
247
274
  )
248
275
  )
249
- ),
250
- React__default.createElement(
251
- iconBase.IconContext.Provider,
252
- { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
253
- React__default.createElement(index_esm$2.GoSearch, {
254
- onClick: function onClick() {
255
- toggleClass('search-bar-desktop', 'id', 'show');
256
- toggleClass('search-btn-desktop', 'class', 'active-search');
257
- }
258
- })
259
- ),
260
- website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
261
- 'div',
262
- { id: 'social-tab-desktop', style: { display: 'flex' } },
263
- website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
264
- ),
265
- React__default.createElement(
266
- 'style',
267
- { jsx: 'true' },
268
- '\n #social-tab-desktops {\n position: relative;\n display: flex;\n left: 0px;\n }\n #social-tab-desktops svg {\n height: 25px !important;\n width: 25px !important;\n }\n @media screen and (max-width: 1191px) {\n #search-content-desktop {\n display: none !important;\n }\n }\n @media screen and (min-width: 1199px) {\n .mobile-nav {\n width: 100% !important;\n }\n }\n #search-content-desktop {\n display: flex;\n padding-top: 2px;\n height: 35px;\n position: fixed;\n right: 5%;\n top: 12px;\n }\n #search-content-desktop .search-btn-desktop {\n padding: 5px;\n height: 35px;\n width: 35px;\n margin: -3px 0px 0px 0px;\n cursor: pointer;\n }\n #search-content-desktop #search-bar-desktop {\n display: none;\n background-color: var(--primary);\n position: relative;\n width: 400px;\n border-radius: 5px;\n height: 48px;\n top: 50px;\n }\n #search-content-desktop #search-bar-desktop .form-inline {\n padding: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n padding: 7px;\n margin-left: 5px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n margin-right: 1px !important;\n }\n #basic-navbar-nav {\n margin-right: 20%;\n }\n '
269
276
  )
270
277
  );
271
278
  }
package/dist/esm/NavNative.js CHANGED
@@ -150,6 +150,9 @@ var NavNative = function NavNative(props) {
150
150
  var toggleClass = function toggleClass(selector, type, addOn) {
151
151
  if (type === 'id') {
152
152
  var searchBar = document.getElementById(selector);
153
+ // Aligning search bar below the searchbutton
154
+ var socialComponent = document.getElementById('search-content-desktop').getBoundingClientRect();
155
+ searchBar.style.right = window.innerWidth - socialComponent.left + 'px';
153
156
  if (searchBar && searchBar.classList && searchBar.classList.contains(addOn)) {
154
157
  searchBar.classList.remove(addOn);
155
158
  } else if (searchBar && searchBar.classList) {
@@ -219,7 +222,31 @@ var NavNative = function NavNative(props) {
219
222
  } else if (type === 'desktop') {
220
223
  return React__default.createElement(
221
224
  'div',
222
- { id: 'search-content-desktop' },
225
+ null,
226
+ React__default.createElement(
227
+ 'div',
228
+ { id: 'search-content-desktop' },
229
+ React__default.createElement(
230
+ IconContext.Provider,
231
+ { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
232
+ React__default.createElement(GoSearch, {
233
+ onClick: function onClick() {
234
+ toggleClass('search-bar-desktop', 'id', 'show');
235
+ toggleClass('search-btn-desktop', 'class', 'active-search');
236
+ }
237
+ })
238
+ ),
239
+ website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
240
+ 'div',
241
+ { id: 'social-tab-desktop', style: { display: 'flex' } },
242
+ website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
243
+ ),
244
+ React__default.createElement(
245
+ 'style',
246
+ { jsx: 'true' },
247
+ '\n #social-tab-desktops {\n position: relative;\n display: flex;\n left: 0px;\n }\n #social-tab-desktops svg {\n height: 25px !important;\n width: 25px !important;\n }\n @media screen and (max-width: 1191px) {\n #search-content-desktop {\n display: none !important;\n }\n }\n @media screen and (min-width: 1199px) {\n .mobile-nav {\n width: 100% !important;\n }\n }\n #search-content-desktop {\n display: flex;\n padding-top: 2px;\n height: 35px;\n position: relative;\n }\n .search-btn-desktop {\n padding: 5px;\n height: 35px;\n width: 35px;\n margin: -3px 0px 0px 0px;\n cursor: pointer;\n }\n #search-bar-desktop {\n display: none;\n background-color: var(--primary);\n position: fixed;\n width: 400px;\n border-radius: 5px;\n height: 48px;\n top: 105px;\n }\n #search-bar-desktop .form-inline {\n padding: 5px;\n }\n #search-bar-desktop .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n }\n #search-bar-desktop .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n padding: 7px;\n margin-left: 5px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n margin-right: 1px !important;\n }\n #basic-navbar-nav {\n margin-right: 20%;\n }\n '
248
+ )
249
+ ),
223
250
  React__default.createElement(
224
251
  'div',
225
252
  { id: 'search-bar-desktop' },
@@ -239,26 +266,6 @@ var NavNative = function NavNative(props) {
239
266
  'Search'
240
267
  )
241
268
  )
242
- ),
243
- React__default.createElement(
244
- IconContext.Provider,
245
- { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
246
- React__default.createElement(GoSearch, {
247
- onClick: function onClick() {
248
- toggleClass('search-bar-desktop', 'id', 'show');
249
- toggleClass('search-btn-desktop', 'class', 'active-search');
250
- }
251
- })
252
- ),
253
- website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
254
- 'div',
255
- { id: 'social-tab-desktop', style: { display: 'flex' } },
256
- website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
257
- ),
258
- React__default.createElement(
259
- 'style',
260
- { jsx: 'true' },
261
- '\n #social-tab-desktops {\n position: relative;\n display: flex;\n left: 0px;\n }\n #social-tab-desktops svg {\n height: 25px !important;\n width: 25px !important;\n }\n @media screen and (max-width: 1191px) {\n #search-content-desktop {\n display: none !important;\n }\n }\n @media screen and (min-width: 1199px) {\n .mobile-nav {\n width: 100% !important;\n }\n }\n #search-content-desktop {\n display: flex;\n padding-top: 2px;\n height: 35px;\n position: fixed;\n right: 5%;\n top: 12px;\n }\n #search-content-desktop .search-btn-desktop {\n padding: 5px;\n height: 35px;\n width: 35px;\n margin: -3px 0px 0px 0px;\n cursor: pointer;\n }\n #search-content-desktop #search-bar-desktop {\n display: none;\n background-color: var(--primary);\n position: relative;\n width: 400px;\n border-radius: 5px;\n height: 48px;\n top: 50px;\n }\n #search-content-desktop #search-bar-desktop .form-inline {\n padding: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n padding: 7px;\n margin-left: 5px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n margin-right: 1px !important;\n }\n #basic-navbar-nav {\n margin-right: 20%;\n }\n '
262
269
  )
263
270
  );
264
271
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.692",
3
+ "version": "1.0.693",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",