@worksafevictoria/wcl7.5 1.9.0-beta.16 → 1.9.0-beta.18

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Global/AppHeaderNew/index.vue +37 -54
  3. package/src/components/Global/AppHeaderNew/mobile.scss +41 -6
  4. package/src/components/Global/AppHeaderNew/styles.scss +8 -0
  5. package/src/index.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.9.0-beta.16",
3
+ "version": "1.9.0-beta.18",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Global/AppHeaderNew/index.vue CHANGED
@@ -6,39 +6,45 @@
6
6
  >
7
7
  <!-- Top menu -->
8
8
  <div class="logo">
9
- <!-- Logo -->
10
- <nuxt-link class="dark" to="/">
11
- <img
12
- :alt="
13
- isWorkWell
14
- ? 'Work Well Victoria - Logo'
15
- : 'Work Safe Victoria - Logo'
16
- "
17
- width="127"
18
- height="55"
19
- :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
20
- />
21
- </nuxt-link>
22
- <span class="logo__nav">
9
+ <!-- Mobile Menu -->
10
+ <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
11
+ <a class="dark" role="button" @click.prevent="showMobileMenu">
12
+ <menu-icon class="menu-icon" />
13
+ </a>
14
+ </div>
15
+ <!-- Logo -->
16
+ <nuxt-link class="dark" to="/">
17
+ <img
18
+ :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
19
+ :alt="
20
+ isWorkWell
21
+ ? 'Work Well Victoria - Logo'
22
+ : 'Work Safe Victoria - Logo'
23
+ "
24
+ :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
25
+ />
26
+ </nuxt-link>
27
+ <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
23
28
  <!-- Roles added for accessibility -->
24
29
  <table role="presentation" >
25
30
  <tbody role="presentation">
26
31
  <tr role="presentation">
27
- <td>
32
+ <td :class="screen === 'mobile' ? 'td_mobile' : ''">
28
33
  <!-- Language link -->
29
34
  <nuxt-link
30
- to="/languages"
31
- @click.native="fireAnalytics('Choose your language', '/languages')"
32
- title="Language"
33
- >
34
- <span v-if="!topLevelIconsOnly">Choose your language </span>
35
- <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
36
- </nuxt-link>
35
+ :class="screen === 'mobile' ? 'mobile-link' : ''"
36
+ to="/languages"
37
+ @click.native="fireAnalytics('Choose your language', '/languages')"
38
+ title="Language"
39
+ >
40
+ <span v-if="screen !== 'mobile'">Choose your language </span>
41
+ <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
42
+ </nuxt-link>
37
43
  </td>
38
- <td>
44
+ <td :class="screen === 'mobile' ? 'td_mobile' : ''">
39
45
  <!-- Contrast link -->
40
- <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
41
- <span v-if="!topLevelIconsOnly">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
46
+ <a href="javascript:void(0)" :class="screen === 'mobile' ? 'mobile-link' : ''" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
47
+ <span v-if="screen !== 'mobile'">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
42
48
  </a>
43
49
  <div
44
50
  ref="contrastChoices"
@@ -61,22 +67,23 @@
61
67
  </div>
62
68
  </div>
63
69
  </td>
64
- <td>
70
+ <td :class="screen === 'mobile' ? 'td_mobile' : ''">
65
71
  <!-- Search link -->
66
72
  <nuxt-link
73
+ style="height: 40px;"
67
74
  class="cta-button cta-button--text-only cta-button--slim"
68
75
  to="/search"
69
76
  title="Search"
70
- ><span v-if="!topLevelButtonIconsOnly">Search &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
77
+ ><span v-if="screen !== 'mobile'">Search &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
71
78
  </nuxt-link>
72
79
  </td>
73
- <td>
80
+ <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
74
81
  <!-- Login link -->
75
82
  <nuxt-link
76
83
  class="cta-button cta-button--text-only cta-button--slim cta-button--dark-no-filter"
77
84
  to="/login"
78
85
  title="Login"
79
- ><span v-if="!topLevelButtonIconsOnly">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
86
+ ><span v-if="screen !== 'mobile'">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
80
87
  </nuxt-link>
81
88
  </td>
82
89
  </tr>
@@ -85,7 +92,7 @@
85
92
  </span>
86
93
  </div>
87
94
  <!-- Bottom menu -->
88
- <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
95
+ <div class="app-header__wrap" :class="screen === 'mobile' ? 'app-header__wrap_mobile' : ''" @keyup.esc="closeMegaMenu">
89
96
  <div class="app-header__close-button mobile-close">
90
97
  <!-- Close Button -->
91
98
  <button
@@ -319,17 +326,6 @@
319
326
  </li>
320
327
  </ul>
321
328
  </nav>
322
- <!-- Mobile Menu -->
323
- <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
324
- <ul id="mobileitems">
325
- <li v-if="!isMobileMenuOpen">
326
- <a class="dark" role="button" @click.prevent="showMobileMenu">
327
- <span>Menu</span>
328
- <menu-icon class="menu-icon" />
329
- </a>
330
- </li>
331
- </ul>
332
- </div>
333
329
  </div>
334
330
  </header>
335
331
  </div>
@@ -391,8 +387,6 @@ export default {
391
387
  data() {
392
388
  return {
393
389
  screen: null,
394
- topLevelIconsOnly: false,
395
- topLevelButtonIconsOnly: false,
396
390
  isMobileMenuOpen: false,
397
391
  isSecondLevelOpen: false,
398
392
  isThirdLevelOpen: false,
@@ -466,17 +460,6 @@ export default {
466
460
  this.isMobileMenuOpen = true
467
461
  }
468
462
  }
469
- // added code to check if val < 760, when top menu should revert to icons, not labels.
470
- if (val < 760) {
471
- this.topLevelIconsOnly = true
472
- } else {
473
- this.topLevelIconsOnly = false
474
- }
475
- if (val < 500) {
476
- this.topLevelButtonIconsOnly = true
477
- } else {
478
- this.topLevelButtonIconsOnly = false
479
- }
480
463
  },
481
464
  },
482
465
  mounted() {
package/src/components/Global/AppHeaderNew/mobile.scss CHANGED
@@ -22,10 +22,9 @@
22
22
  float: none;
23
23
 
24
24
  li {
25
- display: inline-block;
26
- height: 62px;
27
- width: 100%;
28
- margin: 0;
25
+ height: 62px;
26
+ width: 100%;
27
+ margin: 0;
29
28
 
30
29
  a {
31
30
  padding: 20px 5px;
@@ -47,7 +46,7 @@
47
46
 
48
47
  &:hover,
49
48
  &:focus {
50
- background: $app-header-active;
49
+ background: $app-header-hover;
51
50
  color: $app-menu-black;
52
51
  border-bottom: none;
53
52
  svg {
@@ -59,6 +58,7 @@
59
58
  }
60
59
  }
61
60
  .nav-item {
61
+
62
62
  .sub-nav-container,
63
63
  .sub-nav {
64
64
  display: none;
@@ -264,6 +264,41 @@
264
264
  }
265
265
 
266
266
  .mobile-close {
267
- top: 0px !important;
267
+ top: 10px !important;
268
+ }
269
+
270
+ .LogoImgMobile {
271
+ height: 40px;
272
+ width: auto;
273
+ }
274
+
275
+ .logo__nav-mobile {
276
+ display:inline-block;
277
+ margin-left: 10px;
278
+ margin-right: 0px;
279
+ width: 100%;
280
+ overflow-y:auto;
281
+ }
282
+
283
+ .td_mobile {
284
+ padding: 0px 5px !important;
285
+ height: 35px;
286
+ width: 35px;
287
+ }
288
+
289
+ .td_mobile-last {
290
+ padding: 0px 0px 0px 5px !important;
291
+ }
292
+
293
+ .mobile-link {
294
+ height: 35px;
295
+ width: 35px;
296
+ background-color: #f2f2f2;
297
+ border: 1px solid #f2f2f2;
298
+ border-radius: 5px;
268
299
  }
269
300
 
301
+ .app-header__wrap_mobile {
302
+ background: none;
303
+ height: 0px;
304
+ }
package/src/components/Global/AppHeaderNew/styles.scss CHANGED
@@ -383,6 +383,7 @@
383
383
  display: flex;
384
384
  align-items: center;
385
385
  margin-right: 0%;
386
+ background-color: white;
386
387
 
387
388
  &__nav {
388
389
  display:inline-block;
@@ -419,6 +420,12 @@
419
420
  padding: 10px;
420
421
  }
421
422
  }
423
+
424
+ .LogoImg {
425
+ height: 55px;
426
+ width: auto;
427
+ }
428
+
422
429
  .semi-circle {
423
430
  display:block;
424
431
  width: 20px;
@@ -586,6 +593,7 @@
586
593
 
587
594
  label {
588
595
  margin-bottom: 5px !important;
596
+ color:black
589
597
  }
590
598
  .last-radio {
591
599
  margin-bottom: 0 !important;
package/src/index.js CHANGED
@@ -7,7 +7,7 @@ import Subheader from './components/Containers/Subheader/index.vue'
7
7
  import SectionGroup from './components/Containers/SectionGroup/index.vue'
8
8
  import CarouselComponent from './components/Containers/Carousel/index.vue'
9
9
 
10
- import AppHeader from './components/Global/AppHeaderNew/index.vue'
10
+ import AppHeader from './components/Global/AppHeader/index.vue'
11
11
  import AppFooter from './components/Global/AppFooter/index.vue'
12
12
  import HeroHeader from './components/Global/HeroHeader/index.vue'
13
13
  import SocialShare from './components/Global/SocialShare/index.vue'