fixes related to search bar in mobile (#799)

GeoNode · Feb 7, 2022 · a5eeb2d · ridoo · Nov 5, 2024 · a5eeb2d
1 parent 303120e
commit a5eeb2d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -749,12 +749,10 @@ export const uploadDataset = ({
     auxiliaryFiles,
     ext,
     charset = 'UTF-8',
-    permissions = { users: { AnonymousUser: [] }, groups: {} },
     config
 }) => {
     const formData = new FormData();
     formData.append('base_file', file);
-    formData.append('permissions', JSON.stringify(permissions));
     formData.append('charset', charset);
     const { timeEnabled } = getConfigProp('geoNodeSettings') || {};
     if (timeEnabled) {
@@ -771,13 +769,11 @@ export const uploadDataset = ({
 export const uploadDocument = ({
     title,
     file,
-    permissions = { users: { AnonymousUser: [] }, groups: {} },
     config
 }) => {
     const formData = new FormData();
     formData.append('title', title);
     formData.append('doc_file', file);
-    formData.append('permissions', JSON.stringify(permissions));
     return axios.post(`/documents/upload?no__redirect=true`, formData, config)
         .then(({ data }) => (data));
 };

diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -95,14 +95,28 @@ function ViewerRoute({
     const className = `page-${resourceType}-viewer`;
 
     useEffect(() => {
+        // set the correct height of navbar
+        const mainHeader = document.querySelector('.gn-main-header');
+        const mainHeaderPlaceholder = document.querySelector('.gn-main-header-placeholder');
+        const topbar = document.querySelector('#gn-topbar');
+        function resize() {
+            if (mainHeaderPlaceholder && mainHeader) {
+                mainHeaderPlaceholder.style.height = mainHeader.clientHeight + 'px';
+            }
+            if (topbar && mainHeader) {
+                topbar.style.top = mainHeader.clientHeight + 'px';
+            }
+        }
         // hide the naviagtion bar is a recource is being viewed
         if (!loading) {
             document.getElementById('gn-topbar')?.classList.add('hide-navigation');
-            document.querySelector('.gn-menu-content-bottom')?.classList.add('hide-search-bar');
+            document.getElementById('gn-brand-navbar-bottom')?.classList.add('hide-search-bar');
+            resize();
         }
         return () => {
             document.getElementById('gn-topbar')?.classList.remove('hide-navigation');
-            document.querySelector('.gn-menu-content-bottom')?.classList.remove('hide-search-bar');
+            document.getElementById('gn-brand-navbar-bottom')?.classList.remove('hide-search-bar');
+            resize();
         };
     }, [loading]);
 

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu.less b/geonode_mapstore_client/client/themes/geonode/less/_menu.less
@@ -10,6 +10,9 @@
     .gn-menu-divider {
         .background-color-var(@theme-vars[primary-contrast]);
     }
+    .gn-main-header {
+        .background-color-var(@theme-vars[main-bg]);
+    }
     .gn-menu {
         .color-var(@theme-vars[main-color]);
         .background-color-var(@theme-vars[main-bg]);
@@ -303,8 +306,7 @@ a.gn-action-navbar-breadcrumb-link {
 }
 
 @media (max-width: 748px) {
-    nav#gn-brand-navbar div.gn-menu-content-bottom.hide-search-bar {
+    #gn-brand-navbar-bottom.hide-search-bar {
         display: none;
     }
-
-}    
+}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html
@@ -7,23 +7,18 @@
 {% endblock %}
 
 <style>
-    .gn-menu-content-bottom {
+    #{{ id|default:'' }}-bottom {
         display: none;
-        margin: 10px;
         margin-bottom: 0;
     }
-
     @media (max-width: 748px) {
-        .gn-menu-content-center {
+        #{{ id|default:'' }} .gn-menu-content-center > * {
             display: none;
         }
-
-        .msgapi nav.gn-menu {
-            display: inline-block;
-        }
-
-        .gn-menu-content-bottom {
+        #{{ id|default:'' }}-bottom {
             display: flex;
+            width: calc(100% - 16px);
+            margin: 8px;
         }
     }
 </style>
@@ -62,12 +57,12 @@
             </div>
         </div>
     </div>
-    <div class="gn-menu-content-bottom">
-        {% block bottom_menu %}
-            {% include './search_bar.html' %}
-        {% endblock %}
-    </div>
 </nav>
+<div id="{{ id|default:'' }}-bottom">
+    {% block bottom_menu %}
+        {% include './search_bar.html' %}
+    {% endblock %}
+</div>
 {% block extra_script %}
     <script type="text/javascript">
         (function() {