almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-28 19:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: top edit bar responsiveness

Browse source 
Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-03-28 16:39:40 +01:00
parent 5807cfbbcd
commit 7ede27bf0f
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
umap/static/umap/css/bar.css
View file

@ -129,17 +129,20 @@
text-indent: -9999px; text-indent: -9999px;
} }
.umap-main-edit-toolbox .map-name { .umap-main-edit-toolbox .map-name {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold; font-weight: bold;
text-align: start; 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 { .umap-main-edit-toolbox .share-status {
font-style: italic; font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
} }
.map-name:after { .map-name:after {
content: '\00a0'; content: '\00a0';
@ -236,3 +239,14 @@
padding: 0; padding: 0;
margin: 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;
}
}

12
umap/static/umap/js/modules/ui/bar.js
View file

@ -9,15 +9,15 @@ const TOP_BAR_TEMPLATE = `
<div class="umap-main-edit-toolbox with-transition dark"> <div class="umap-main-edit-toolbox with-transition dark">
<div class="umap-left-edit-toolbox" data-ref="left"> <div class="umap-left-edit-toolbox" data-ref="left">
<div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div> <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="map-name flat truncate" type="button" data-ref="name"></button>
<button class="share-status flat" type="button" data-ref="share"></button> <button class="share-status flat truncate" type="button" data-ref="share"></button>
<button class="edit-undo round" type="button" data-ref="undo" disabled> <button class="edit-undo round" type="button" data-ref="undo" disabled>
<i class="icon icon-16 icon-undo"></i> <i class="icon icon-16 icon-undo"></i>
<span class="">${translate('Undo')}</span> <span>${translate('Undo')}</span>
</button> </button>
<button class="edit-redo round" type="button" data-ref="redo" disabled> <button class="edit-redo round" type="button" data-ref="redo" disabled>
<i class="icon icon-16 icon-redo"></i> <i class="icon icon-16 icon-redo"></i>
<span class="">${translate('Redo')}</span> <span>${translate('Redo')}</span>
</button> </button>
</div> </div>
<div class="umap-right-edit-toolbox" data-ref="right"> <div class="umap-right-edit-toolbox" data-ref="right">
@ -27,12 +27,12 @@ const TOP_BAR_TEMPLATE = `
</button> </button>
<button class="umap-user flat" type="button" data-ref="user"> <button class="umap-user flat" type="button" data-ref="user">
<i class="icon icon-16 icon-profile"></i> <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>
<button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</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"> <button class="edit-disable round disabled-on-dirty" type="button" data-ref="view">
<i class="icon icon-16 icon-eye"></i> <i class="icon icon-16 icon-eye"></i>
<span class="">${translate('View')}</span> <span>${translate('View')}</span>
</button> </button>
<button class="edit-save button round enabled-on-dirty" type="button" data-ref="save"> <button class="edit-save button round enabled-on-dirty" type="button" data-ref="save">
<i class="icon icon-16 icon-save"></i> <i class="icon icon-16 icon-save"></i>