From 7ede27bf0fbd1f6e3dae27c566e4041c6b7b0e70 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 28 Mar 2025 16:39:40 +0100
Subject: [PATCH] chore: top edit bar responsiveness

Co-authored-by: David Larlet <david@larlet.fr>
---
 umap/static/umap/css/bar.css          | 26 ++++++++++++++++++++------
 umap/static/umap/js/modules/ui/bar.js | 12 ++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/umap/static/umap/css/bar.css b/umap/static/umap/css/bar.css
index 96f00495..4dc36f6d 100644
--- a/umap/static/umap/css/bar.css
+++ b/umap/static/umap/css/bar.css
@@ -129,17 +129,20 @@
     text-indent: -9999px;
 }
 .umap-main-edit-toolbox .map-name {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     font-weight: bold;
     text-align: start;
 }
+.truncate {
+    display: inline-flex;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.umap-main-edit-toolbox .username {
+    max-width: 100px;
+}
 .umap-main-edit-toolbox .share-status {
     font-style: italic;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 .map-name:after {
     content:  '\00a0';
@@ -236,3 +239,14 @@
     padding: 0;
     margin: 0;
 }
+@media all and (max-width: 980px) {
+    .umap-main-edit-toolbox button span {
+        display: none;
+    }
+}
+@media all and (max-width: 770px) {
+    .umap-main-edit-toolbox .umap-help-link,
+    .umap-main-edit-toolbox .share-status {
+        display: none !important;
+    }
+}
diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js
index 496954de..04659db4 100644
--- a/umap/static/umap/js/modules/ui/bar.js
+++ b/umap/static/umap/js/modules/ui/bar.js
@@ -9,15 +9,15 @@ const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
     <div class="umap-left-edit-toolbox" data-ref="left">
         <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
-        <button class="map-name flat" type="button" data-ref="name"></button>
-        <button class="share-status flat" type="button" data-ref="share"></button>
+        <button class="map-name flat truncate" type="button" data-ref="name"></button>
+        <button class="share-status flat truncate" type="button" data-ref="share"></button>
         <button class="edit-undo round" type="button" data-ref="undo" disabled>
             <i class="icon icon-16 icon-undo"></i>
-            <span class="">${translate('Undo')}</span>
+            <span>${translate('Undo')}</span>
         </button>
         <button class="edit-redo round" type="button" data-ref="redo" disabled>
             <i class="icon icon-16 icon-redo"></i>
-            <span class="">${translate('Redo')}</span>
+            <span>${translate('Redo')}</span>
         </button>
     </div>
     <div class="umap-right-edit-toolbox" data-ref="right">
@@ -27,12 +27,12 @@ const TOP_BAR_TEMPLATE = `
         </button>
         <button class="umap-user flat" type="button" data-ref="user">
           <i class="icon icon-16 icon-profile"></i>
-          <span class="username" data-ref="username"></span>
+          <span class="username truncate" data-ref="username"></span>
         </button>
         <button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
         <button class="edit-disable round disabled-on-dirty" type="button" data-ref="view">
             <i class="icon icon-16 icon-eye"></i>
-            <span class="">${translate('View')}</span>
+            <span>${translate('View')}</span>
         </button>
         <button class="edit-save button round enabled-on-dirty" type="button" data-ref="save">
             <i class="icon icon-16 icon-save"></i>