Skip to content

Commit 61e9de8

Browse files
dsuren1allyoucanmap
dsuren1
and
allyoucanmap
authored
Improve brand navbar style (#2037)
--------- Co-authored-by: allyoucanmap <[email protected]>
1 parent 256177c commit 61e9de8

File tree

6 files changed

+197
-94
lines changed

6 files changed

+197
-94
lines changed

‎geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,43 @@
2424
}
2525
}
2626

27+
.gn-brand-navbar-right-menu-container {
28+
position: relative;
29+
& > .gn-brand-navbar-menu {
30+
position: absolute;
31+
}
32+
}
33+
2734
#gn-brand-navbar-bottom {
2835
display: none;
29-
margin-bottom: 0;
3036
}
3137

32-
@media (max-width: 748px) {
33-
#gn-brand-navbar .gn-menu-content-center > * {
34-
display: none;
38+
.gn-search-bar {
39+
visibility: hidden;
40+
}
41+
#gn-brand-navbar-bottom {
42+
padding: 0.75rem;
43+
padding-top: 0;
44+
.gn-search-bar {
45+
width: 100%;
46+
max-width: 100%;
47+
}
48+
}
49+
@media (max-width: @screen-sm) {
50+
.gn-brand-navbar-right-menu-container, .gn-search-bar {
51+
visibility: hidden;
3552
}
3653
#gn-brand-navbar-bottom {
37-
display: flex;
38-
width: calc(100% - 16px);
39-
margin: 8px;
54+
.gn-brand-navbar-menu {
55+
&.dropdown {
56+
display: block;
57+
.dropdown-menu {
58+
li > a {
59+
text-align: left;
60+
}
61+
}
62+
}
63+
}
4064
}
4165
}
4266

‎geonode_mapstore_client/client/themes/geonode/less/_search-bar.less‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
border-bottom-width: 1px;
3737
border-bottom-style: solid;
3838
min-width: 100px;
39-
max-width: 200px;
39+
max-width: 300px;
4040
.btn {
4141
border: transparent;
4242
}
@@ -82,9 +82,3 @@
8282
}
8383

8484
}
85-
86-
@media screen and (min-width: 768px) {
87-
.gn-search-bar {
88-
min-width: 500px;
89-
}
90-
}

‎geonode_mapstore_client/static/mapstore/configs/localConfig.json‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -520,12 +520,6 @@
520520
"cfg": {
521521
"containerPosition": "header",
522522
"leftMenuItems": [
523-
{
524-
"type": "link",
525-
"size": "md",
526-
"href": "#/",
527-
"labelId": "gnviewer.allResources"
528-
},
529523
{
530524
"type": "plugin",
531525
"size": "md",
@@ -691,6 +685,7 @@
691685
{
692686
"name": "ResourceDetails",
693687
"cfg": {
688+
"headerNodeSelector": ".gn-main-header",
694689
"containerPosition": "header",
695690
"defaultOpen": true
696691
}
@@ -1465,12 +1460,6 @@
14651460
"cfg": {
14661461
"containerPosition": "header",
14671462
"leftMenuItems": [
1468-
{
1469-
"type": "link",
1470-
"size": "md",
1471-
"href": "#/",
1472-
"labelId": "gnviewer.allResources"
1473-
},
14741463
{
14751464
"type": "plugin",
14761465
"size": "md",
@@ -1588,6 +1577,7 @@
15881577
"mandatory": true,
15891578
"name": "ResourceDetails",
15901579
"cfg": {
1580+
"headerNodeSelector": ".gn-main-header",
15911581
"containerPosition": "header"
15921582
}
15931583
},
@@ -2198,12 +2188,6 @@
21982188
"cfg": {
21992189
"containerPosition": "header",
22002190
"leftMenuItems": [
2201-
{
2202-
"type": "link",
2203-
"size": "md",
2204-
"href": "#/",
2205-
"labelId": "gnviewer.allResources"
2206-
},
22072191
{
22082192
"type": "plugin",
22092193
"size": "md",
@@ -2281,6 +2265,7 @@
22812265
{
22822266
"name": "ResourceDetails",
22832267
"cfg": {
2268+
"headerNodeSelector": ".gn-main-header",
22842269
"containerPosition": "header"
22852270
}
22862271
},
@@ -2394,12 +2379,6 @@
23942379
"cfg": {
23952380
"containerPosition": "header",
23962381
"leftMenuItems": [
2397-
{
2398-
"type": "link",
2399-
"size": "md",
2400-
"href": "#/",
2401-
"labelId": "gnviewer.allResources"
2402-
},
24032382
{
24042383
"type": "plugin",
24052384
"size": "md",
@@ -2502,6 +2481,7 @@
25022481
{
25032482
"name": "ResourceDetails",
25042483
"cfg": {
2484+
"headerNodeSelector": ".gn-main-header",
25052485
"containerPosition": "header",
25062486
"defaultOpen": true
25072487
}
@@ -2537,12 +2517,6 @@
25372517
"cfg": {
25382518
"containerPosition": "header",
25392519
"leftMenuItems": [
2540-
{
2541-
"type": "link",
2542-
"size": "md",
2543-
"href": "#/",
2544-
"labelId": "gnviewer.allResources"
2545-
},
25462520
{
25472521
"type": "plugin",
25482522
"size": "md",
@@ -2633,6 +2607,7 @@
26332607
{
26342608
"name": "ResourceDetails",
26352609
"cfg": {
2610+
"headerNodeSelector": ".gn-main-header",
26362611
"containerPosition": "header"
26372612
}
26382613
},
@@ -3195,7 +3170,7 @@
31953170
"name": "ResourcesFiltersForm",
31963171
"cfg": {
31973172
"resourcesGridId": "catalog",
3198-
"headerNodeSelector": "#gn-brand-navbar",
3173+
"headerNodeSelector": ".gn-main-header",
31993174
"footerNodeSelector": ".gn-footer",
32003175
"fields": [
32013176
{
@@ -3337,6 +3312,7 @@
33373312
{
33383313
"name": "ResourceDetails",
33393314
"cfg": {
3315+
"headerNodeSelector": ".gn-main-header",
33403316
"enableFilters": true,
33413317
"enablePreview": true,
33423318
"editingOverlay": true
@@ -3373,13 +3349,6 @@
33733349
"cfg": {
33743350
"containerPosition": "header",
33753351
"leftMenuItems": [
3376-
{
3377-
"type": "link",
3378-
"size": "md",
3379-
"href": "#/",
3380-
"labelId": "gnviewer.allResources",
3381-
"disableIf": "{!!state('resourceParams')?.mapPk}"
3382-
},
33833352
{
33843353
"type": "link",
33853354
"href": "{'#/map/' + state('resourceParams')?.mapPk}",
@@ -3465,6 +3434,7 @@
34653434
{
34663435
"name": "ResourceDetails",
34673436
"cfg": {
3437+
"headerNodeSelector": ".gn-main-header",
34683438
"containerPosition": "header"
34693439
}
34703440
},

‎geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html‎

Lines changed: 114 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,90 @@
22
{% load get_menu_json %}
33
{% get_user_menu as USER_MENU %}
44
{% get_brand_navbar_menu as BRAND_NAVBAR_MENU %}
5+
{% get_menu_json 'TOPBAR_MENU' as TOPBAR_MENU %}
6+
{% get_menu_json 'TOPBAR_MENU_LEFT' as TOPBAR_MENU_LEFT %}
7+
{% get_menu_json 'TOPBAR_MENU_RIGHT' as TOPBAR_MENU_RIGHT %}
58
{% block extra_style %}
69
{% endblock %}
710

811
<nav id="gn-brand-navbar" class="gn-brand-navbar ms-main-colors _padding-md ms-flex-box _flex">
912
<div class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
1013
{% block logo %}
11-
<a href="/">
12-
{% if custom_theme.logo and custom_theme.logo.url %}
13-
<img src="{{ custom_theme.logo.url }}">
14-
{% else %}
15-
<img src="{% block logo_src %}/static/mapstore/img/geonode-logo.svg{% endblock %}">
16-
{% endif %}
17-
</a>
14+
<a href="/">
15+
{% if custom_theme.logo and custom_theme.logo.url %}
16+
<img src="{{ custom_theme.logo.url }}">
17+
{% else %}
18+
<img src="{% block logo_src %}/static/mapstore/img/geonode-logo.svg{% endblock %}">
19+
{% endif %}
20+
</a>
21+
{% endblock %}
22+
{% block left_menu %}
23+
<div class="gn-brand-navbar-right-menu-container ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
24+
<ul class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v gn-brand-navbar-menu">
25+
{% block default_left_menu_items %}
26+
{% for menu_item in BRAND_NAVBAR_MENU %}
27+
{% include './menu_item.html' with menu_item=menu_item %}
28+
{% endfor %}
29+
{% endblock %}
30+
{% for menu_item in TOPBAR_MENU %}
31+
{% include './menu_item.html' with menu_item=menu_item %}
32+
{% endfor %}
33+
{% for menu_item in TOPBAR_MENU_LEFT %}
34+
{% include './menu_item.html' with menu_item=menu_item %}
35+
{% endfor %}
36+
</ul>
37+
</div>
1838
{% endblock %}
19-
<ul class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
20-
{% for menu_item in BRAND_NAVBAR_MENU %}
21-
{% include './menu_item.html' with menu_item=menu_item %}
22-
{% endfor %}
23-
</ul>
2439
{% block right_menu %}
2540
{% block search_bar %}
2641
{% include './search_bar.html' with search_bar_id='gn-search-bar' %}
2742
{% endblock %}
28-
{% block language_selector %}
29-
{% include './language_selector.html' with align_right=True %}
30-
{% endblock %}
31-
<ul class="ms-flex-box _flex _flex-gap-sm _flex-center-v">
32-
{% for menu_item in USER_MENU %}
43+
<ul class="gn-brand-navbar-left-menu-container ms-flex-box _flex _flex-gap-sm _flex-center-v">
44+
{% block language_selector %}
45+
{% include './language_selector.html' with align_right=True %}
46+
{% endblock %}
47+
{% for menu_item in TOPBAR_MENU_RIGHT %}
3348
{% include './menu_item.html' with menu_item=menu_item align_right=True %}
3449
{% endfor %}
50+
{% block default_right_menu_items %}
51+
{% for menu_item in USER_MENU %}
52+
{% include './menu_item.html' with menu_item=menu_item align_right=True %}
53+
{% endfor %}
54+
{% endblock %}
3555
</ul>
3656
{% endblock %}
3757
</div>
3858
</nav>
3959
<div id="gn-brand-navbar-bottom">
4060
{% block bottom_menu %}
61+
<div class="gn-brand-navbar-menu dropdown">
62+
<button
63+
class="btn dropdown-toggle btn-default"
64+
type="button"
65+
id="gn-brand-navbar-menu-btn"
66+
data-toggle="dropdown"
67+
aria-haspopup="true"
68+
aria-expanded="true"
69+
>
70+
<i class="fa fa-bars"> </i>
71+
</button>
72+
<ul
73+
class="dropdown-menu"
74+
aria-labelledby="gn-brand-navbar-dropdown-menu"
75+
>
76+
{% block default_bottom_menu_items %}
77+
{% for menu_item in BRAND_NAVBAR_MENU %}
78+
{% include './menu_item_compact.html' with menu_item=menu_item align_right=True %}
79+
{% endfor %}
80+
{% endblock %}
81+
{% for menu_item in TOPBAR_MENU %}
82+
{% include './menu_item_compact.html' with menu_item=menu_item %}
83+
{% endfor %}
84+
{% for menu_item in TOPBAR_MENU_LEFT %}
85+
{% include './menu_item_compact.html' with menu_item=menu_item %}
86+
{% endfor %}
87+
</ul>
88+
</div>
4189
{% include './search_bar.html' with search_bar_id='gn-search-bar-bottom' %}
4290
{% endblock %}
4391
</div>
@@ -58,8 +106,55 @@
58106
}
59107
}
60108
}
61-
window.addEventListener('DOMContentLoaded', manageUrlChange);
62-
window.addEventListener('hashchange', manageUrlChange, false);
109+
110+
function onResizeNavbar() {
111+
const searchBar = document.querySelector('.gn-search-bar');
112+
const menuContainer = document.querySelector('.gn-brand-navbar-right-menu-container');
113+
const menu = menuContainer.querySelector('.gn-brand-navbar-menu');
114+
const brandNavbarBottom = document.querySelector('#gn-brand-navbar-bottom');
115+
const menuBottom = brandNavbarBottom.querySelector('.gn-brand-navbar-menu.dropdown');
116+
const searchBarBottom = brandNavbarBottom.querySelector('#gn-search-bar-bottom');
117+
118+
searchBar.style.visibility = 'hidden';
119+
searchBar.style.display = 'block';
120+
121+
const menuRight = menu?.getBoundingClientRect()?.right;
122+
const searchBarLeft = searchBar?.getBoundingClientRect()?.left;
123+
const contentLeft = document.querySelector('.gn-brand-navbar-left-menu-container')?.getBoundingClientRect()?.left;
124+
125+
if (menuRight == null || searchBarLeft == null || contentLeft == null) {
126+
return;
127+
}
128+
// Default state
129+
menuContainer.style.visibility = 'visible';
130+
searchBar.style.visibility = 'visible';
131+
brandNavbarBottom.style.display = 'none';
132+
menuBottom.style.display = 'none';
133+
searchBarBottom.style.visibility = 'hidden';
134+
135+
// Menu overlaps with search bar
136+
if (menuRight > searchBarLeft) {
137+
searchBar.style.display = 'none';
138+
brandNavbarBottom.style.display = 'block';
139+
menuBottom.style.display = 'none';
140+
searchBarBottom.style.visibility = 'visible';
141+
142+
// Menu also overlaps with right menu items
143+
if (menuRight > contentLeft) {
144+
menuContainer.style.visibility = 'hidden';
145+
brandNavbarBottom.style.display = 'flex';
146+
menuBottom.style.display = 'block';
147+
}
148+
}
149+
}
150+
151+
window.addEventListener('DOMContentLoaded', function() {
152+
manageUrlChange();
153+
onResizeNavbar();
154+
});
155+
156+
window.addEventListener('resize', onResizeNavbar);
157+
window.addEventListener('hashchange', manageUrlChange);
63158
})();
64159
</script>
65160
{% endblock extra_script %}

0 commit comments

Comments
 (0)