NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Show only icons if search is opened

Browse Source
This commit is contained in:
Jorit Tijsen
2024-05-17 15:25:40 +02:00
parent 9ae62ab798
commit 7c05b92703
4 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/style.css vendored
View File

@@ -310,10 +310,15 @@ div.pp_default .pp_close:hover {
margin: 8px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
line-height: 2;
height: 28px;
/*&:nth-child(2) {
padding: 0 19px;
}*/
}
.top_menu_container ul.right_menu li.collapsed, .menu_mobile_container ul.right_menu li.collapsed {
padding: 3px 9px 3px 6px;
margin: 8px auto;
}
.top_menu_container ul.right_menu li:last-child, .menu_mobile_container ul.right_menu li:last-child {
border: none;
line-height: 1;
@@ -327,6 +332,12 @@ div.pp_default .pp_close:hover {
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: flex;
}
.top_menu_container ul.right_menu li a span, .menu_mobile_container ul.right_menu li a span {
overflow: hidden;
display: block;
height: 28px;
}
.top_menu_container ul.right_menu li a.with_svg_icon, .menu_mobile_container ul.right_menu li a.with_svg_icon {
position: relative;
@@ -356,7 +367,7 @@ div.pp_default .pp_close:hover {
border: 1px solid #efefef;
border-radius: 3px;
background-color: #fff;
height: 29px;
height: 26px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
@@ -364,7 +375,7 @@ div.pp_default .pp_close:hover {
}
.top_menu_container ul.right_menu li .search_form .search_submit, .menu_mobile_container ul.right_menu li .search_form .search_submit {
float: right;
margin: 6px;
margin: 4px;
}
.top_menu_container ul.right_menu li .search_button, .menu_mobile_container ul.right_menu li .search_button {
margin-top: 6px;

2
public/css/style.css.map
View File

File diff suppressed because one or more lines are too long

17
resources/assets/sass/components/_menu.scss vendored
View File

@@ -117,6 +117,12 @@
margin: 8px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
line-height: 2;
height: 28px;
&.collapsed {
padding: 3px 9px 3px 6px;
margin: 8px auto;
}
&:last-child {
border: none;
@@ -136,6 +142,13 @@
color: $text-inverted-color;
text-decoration: none;
text-transform: uppercase;
display: flex;
span {
overflow: hidden;
display: block;
height: 28px;
}
&.with_svg_icon {
position: relative;
@@ -169,7 +182,7 @@
border: 1px solid #efefef;
border-radius: 3px;
background-color: $element-bg;
height: 29px;
height: 26px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
@@ -177,7 +190,7 @@
}
.search_submit {
float: right;
margin: 6px;
margin: 4px;
}
}
.search_button {

8
resources/views/layouts/master.blade.php
View File

@@ -64,13 +64,13 @@
<img class="slogan" src="/images/Slogan_DIAP white.svg" />
<ul class="right_menu">
<li>
<a class="player with_svg_icon" href="{{url('luister/live')}}">Luister live radio {!!file_get_contents(__DIR__ . '/../../../public/images/icons/radio.svg')!!}</a>
<a class="player with_svg_icon" href="{{url('luister/live')}}"><span>Luister live radio </span>{!!file_get_contents(__DIR__ . '/../../../public/images/icons/radio.svg')!!}</a>
</li>
<li>
<a class="with_svg_icon" href="{{url('kijk/studio')}}">Kijk live tv {!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
<a class="with_svg_icon" href="{{url('kijk/studio')}}"><span>Kijk live tv </span>{!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
</li>
<li>
<a href="https://wa.me/31888505651" style="{{!isset($searchURL) ? 'margin-top: 3px' : ''}}" target="_blank">Tip de streekredactie <i class="fa-solid fa-circle-plus"></i></a>
<a href="https://wa.me/31888505651" style="{{!isset($searchURL) ? 'margin-top: 3px' : ''}}" target="_blank"><span>Tip de streekredactie </span><i style="margin-top: 2px" class="fa-solid fa-circle-plus"></i></a>
</li>
@if(isset($searchURL))
<li>
@@ -219,6 +219,8 @@
$(".search_form").animate({width: 'toggle'}, 350);
$(this).find('.fa-magnifying-glass').toggle();
$(this).find('.fa-xmark').toggle();
$('.right_menu a span').animate({width: 'toggle'}, 350);
$('.right_menu li').toggleClass('collapsed');
});
$(".search_form").animate({width: 'toggle'}, 1);
</script>