@worksafevictoria/wcl7.5 1.9.0-beta.16 → 1.9.0-beta.17
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/package.json
CHANGED
|
@@ -6,39 +6,45 @@
|
|
|
6
6
|
>
|
|
7
7
|
<!-- Top menu -->
|
|
8
8
|
<div class="logo">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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="
|
|
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="
|
|
77
|
+
><span v-if="screen !== 'mobile'">Search </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="
|
|
86
|
+
><span v-if="screen !== 'mobile'">Login </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() {
|
|
@@ -22,10 +22,9 @@
|
|
|
22
22
|
float: none;
|
|
23
23
|
|
|
24
24
|
li {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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-
|
|
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:
|
|
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
|
+
}
|
|
@@ -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;
|