Skip to content

Commit 3989873

Browse files
author
Simon L. Lange
committed
Ringsted-644: Styling and functionality user account menu
1 parent ce7019a commit 3989873

File tree

8 files changed

+147
-7
lines changed

8 files changed

+147
-7
lines changed

‎web/themes/custom/fds_redwhite_theme/dist/javascripts/app.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3155,6 +3155,15 @@ module.exports = function (button, expanded) {
31553155
});
31563156
})(jQuery);
31573157

3158+
(function($) {
3159+
"use strict";
3160+
$(document).ready(function ($) {
3161+
$('.account-menu-btn').on('click', function (evt) {
3162+
$(this).parent().find('.region-account-menu').toggleClass('expand-collaps');
3163+
});
3164+
});
3165+
})(jQuery);
3166+
31583167

31593168
(function() {
31603169

@@ -3592,7 +3601,7 @@ const menuRow = jQuery("#block-fds-redwhite-theme-header-below-navigation");
35923601

35933602
jQuery(document).mouseup(function(e) {
35943603
if (
3595-
jQuery(".region.region-header__below.expand-collaps")[0] &&
3604+
jQuery(".region.region-header__below.expand-collaps")[0] &&
35963605
!menuRowBtn.is(e.target) &&
35973606
menuRowBtn.has(e.target).length === 0 &&
35983607
!menuRow.is(e.target) &&
@@ -3602,6 +3611,21 @@ jQuery(document).mouseup(function(e) {
36023611
}
36033612
});
36043613

3614+
const accountMenuBtn = jQuery(".account-menu-btn");
3615+
const accountMenuRow = jQuery("#block-account");
3616+
3617+
jQuery(document).mouseup(function(e) {
3618+
if (
3619+
jQuery(".region.region-account-menu.expand-collaps")[0] &&
3620+
!accountMenuBtn.is(e.target) &&
3621+
accountMenuBtn.has(e.target).length === 0 &&
3622+
!accountMenuRow.is(e.target) &&
3623+
accountMenuRow.has(e.target).length === 0
3624+
) {
3625+
jQuery(".region.region-account-menu").removeClass('expand-collaps')
3626+
}
3627+
});
3628+
36053629

36063630

36073631
function getDynamicPaddingsAndBulletOffset() {
@@ -3617,7 +3641,7 @@ function getDynamicPaddingsAndBulletOffset() {
36173641
aTag.style.paddingTop = Math.ceil(remainigHeight / 2) + "px"
36183642
aTag.style.paddingBottom = Math.ceil(remainigHeight / 2) + "px"
36193643
}
3620-
3644+
36213645
if(aTag.parentElement.tagName === "LI") {
36223646
if(aTag.parentElement.firstChild === aTag) {
36233647
if(aTag.style.paddingTop) {
@@ -3656,6 +3680,7 @@ if(allAccordionButtons) {
36563680
}
36573681

36583682
getDynamicPaddingsAndBulletOffset();
3683+
36593684
// Proposals form toggle.
36603685
(function($) {
36613686
"use strict";

‎web/themes/custom/fds_redwhite_theme/dist/stylesheets/stylesheet.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/themes/custom/fds_redwhite_theme/fds_redwhite_theme.info.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ regions:
1414
megamenu__selfservice: 'Megamenu - self service'
1515
header__search: 'Header - search'
1616
header__below: 'Header - below'
17+
account_menu: 'Account menu'
1718
alert: 'Alert'
1819
page_top: 'Page top'
1920
page_bottom: 'Page bottom'

‎web/themes/custom/fds_redwhite_theme/src/javascripts/app.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ const menuRow = jQuery("#block-fds-redwhite-theme-header-below-navigation");
294294

295295
jQuery(document).mouseup(function(e) {
296296
if (
297-
jQuery(".region.region-header__below.expand-collaps")[0] &&
297+
jQuery(".region.region-header__below.expand-collaps")[0] &&
298298
!menuRowBtn.is(e.target) &&
299299
menuRowBtn.has(e.target).length === 0 &&
300300
!menuRow.is(e.target) &&
@@ -304,6 +304,21 @@ jQuery(document).mouseup(function(e) {
304304
}
305305
});
306306

307+
const accountMenuBtn = jQuery(".account-menu-btn");
308+
const accountMenuRow = jQuery("#block-account");
309+
310+
jQuery(document).mouseup(function(e) {
311+
if (
312+
jQuery(".region.region-account-menu.expand-collaps")[0] &&
313+
!accountMenuBtn.is(e.target) &&
314+
accountMenuBtn.has(e.target).length === 0 &&
315+
!accountMenuRow.is(e.target) &&
316+
accountMenuRow.has(e.target).length === 0
317+
) {
318+
jQuery(".region.region-account-menu").removeClass('expand-collaps')
319+
}
320+
});
321+
307322

308323

309324
function getDynamicPaddingsAndBulletOffset() {
@@ -319,7 +334,7 @@ function getDynamicPaddingsAndBulletOffset() {
319334
aTag.style.paddingTop = Math.ceil(remainigHeight / 2) + "px"
320335
aTag.style.paddingBottom = Math.ceil(remainigHeight / 2) + "px"
321336
}
322-
337+
323338
if(aTag.parentElement.tagName === "LI") {
324339
if(aTag.parentElement.firstChild === aTag) {
325340
if(aTag.style.paddingTop) {
@@ -357,4 +372,4 @@ if(allAccordionButtons) {
357372
})
358373
}
359374

360-
getDynamicPaddingsAndBulletOffset();
375+
getDynamicPaddingsAndBulletOffset();

‎web/themes/custom/fds_redwhite_theme/src/javascripts/megamenu.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,12 @@
6969
});
7070
})(jQuery);
7171

72+
(function($) {
73+
"use strict";
74+
$(document).ready(function ($) {
75+
$('.account-menu-btn').on('click', function (evt) {
76+
$(this).parent().find('.region-account-menu').toggleClass('expand-collaps');
77+
});
78+
});
79+
})(jQuery);
80+

‎web/themes/custom/fds_redwhite_theme/src/styles/theme/components/_account-menu.scss

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.header-account-menu {
2+
background-color: #c30a32;
3+
4+
.container {
5+
.account-menu-btn {
6+
background-color: transparent;
7+
border: none;
8+
text-transform: uppercase;
9+
font-family: "Museo 300", sans-serif;
10+
display: none;
11+
.icon {
12+
color: #c30a32;
13+
}
14+
}
15+
.region-account-menu {
16+
.menu--account {
17+
display: flex;
18+
justify-content: flex-end;
19+
20+
ul {
21+
display: flex;
22+
23+
li {
24+
25+
&:before {
26+
display: none;
27+
}
28+
29+
a {
30+
color: white;
31+
text-decoration: none;
32+
33+
&:hover {
34+
text-decoration: underline;
35+
}
36+
}
37+
}
38+
}
39+
}
40+
}
41+
}
42+
}
43+
44+
@include media-breakpoint-only(xs, $grid-breakpoints) {
45+
.header-account-menu {
46+
position: relative;
47+
background-color: transparent;
48+
.container {
49+
.account-menu-btn {
50+
display: block;
51+
}
52+
.region-account-menu {
53+
position: absolute;
54+
top: 45px;
55+
z-index: 99;
56+
width: 100%;
57+
background-color: #c30a32;
58+
left: 0;
59+
transform: translateX(-110%);
60+
transition: transform 0.3s ease-in-out;
61+
opacity: 0;
62+
63+
.menu--account {
64+
justify-content: flex-start;
65+
66+
ul {
67+
flex-direction: column;
68+
69+
li {
70+
padding-left: 0 !important;
71+
}
72+
}
73+
}
74+
&.expand-collaps {
75+
display: block;
76+
transform: translateX(0px);
77+
opacity: 1;
78+
}
79+
}
80+
}
81+
}
82+
}

‎web/themes/custom/fds_redwhite_theme/src/styles/theme/components/_loader.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
@import "ie-banner";
2828
@import "quickedit";
2929
@import "li-before";
30+
@import 'account-menu';

‎web/themes/custom/fds_redwhite_theme/templates/page/page.html.twig

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@
122122
</div>
123123
</header>
124124

125+
<div class="header-account-menu">
126+
<div class="container">
127+
<button class="account-menu-btn"><span>Brugerkontomenu</span><span class="icon fa fa-bars"></span></button>
128+
{{ page.account_menu }}
129+
</div>
130+
</div>
131+
125132
<div class="page-alert" data-font-resize-wrapper id="">
126133
<div class="container">
127134
{{ page.alert }}
@@ -144,7 +151,7 @@
144151
</div>
145152
{% endif %}
146153

147-
154+
148155
{% set drupalTag = '<drupal-render-placeholder>'%}
149156
{% set has_main_content = page.content|render|striptags(drupalTag)|trim is not empty %}
150157
{% if has_main_content %}

0 commit comments

Comments
 (0)