Playlist Editor: Bottom bar content breaks when names are too long

relates to xibosignage/xibo#3328
maurofmferrao · Jan 30, 2024 · a6f551b · a6f551b
1 parent 86e9bfe
commit a6f551b
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/ui/src/style/bottombar.scss b/ui/src/style/bottombar.scss
@@ -98,10 +98,7 @@
                 }
 
                 .label-name {
-                    max-width: 40%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    line-height: 1;
                 }
             }
 

diff --git a/ui/src/style/playlist-editor.scss b/ui/src/style/playlist-editor.scss
@@ -596,6 +596,9 @@ $timeline-step-height: 22px;
                     }
                 }
 
+                .label-name {
+                    line-height: 1;
+                }
             }
 
             .footer-actions {

diff --git a/ui/src/templates/bottombar-viewer.hbs b/ui/src/templates/bottombar-viewer.hbs
@@ -2,30 +2,30 @@
     <div class="viewer-navbar-info">
         {{! Element Info }}
         {{#eq object.type "widget"}}
-            <div class="info d-inline">
+            <div class="info">
                 {{#ifCond object.widgetName '||' object.moduleName}}
-                    <span class="label-name align-middle d-inline-block">
+                    <div class="label-name align-middle d-inline-block">
                         <strong>{{objectTypeName}}</strong> <span title="{{trans.widgetName}}">{{#if object.widgetName}}"{{object.widgetName}}"{{/if}}</span>
-                    </span>
+                    </div>
                 {{/ifCond}}
             </div>
         {{else eq object.type "element"}}
-            <div class="info d-inline">
-                <span class="label-name align-middle">
+            <div class="info">
+                <div class="label-name align-middle">
                     <strong>{{objectTypeName}}</strong> | <span title="{{trans.templateName}}">{{object.template.title}}</span>{{#if object.elementName}} - <span title="{{trans.elementName}}">"{{object.elementName}}"</span>{{/if}}
-                </span>
+                </div>
             </div>
         {{else eq object.type "element-group"}}
-            <div class="info d-inline">
-                <span class="label-name align-middle">
+            <div class="info">
+                <div class="label-name align-middle">
                     <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <span title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</span>{{/if}}
-                </span>
+                </div>
             </div>
         {{else}}
-            <div class="info d-inline">
-                <span class="label-name align-middle">
+            <div class="info">
+                <div class="label-name align-middle">
                     <strong>{{objectTypeName}}</strong> <span title="{{trans.regionName}}">{{#if object.name}}"{{object.name}}"{{/if}}</span>
-                </span>
+                </div>
             </div>
         {{/eq}}
     </div>

diff --git a/ui/src/templates/playlist-editor-external-container.hbs b/ui/src/templates/playlist-editor-external-container.hbs
@@ -37,7 +37,7 @@
             <div class="selected-info">
                 {{!-- SELECTED INFO --}}
             </div>
-            <div class="footer-actions">
+            <div class="footer-actions d-flex">
                 <button class="btn inactive hide-on-multi-select" data-action="undo">
                     <i class="fa fa-undo"></i>
                 </button>

diff --git a/ui/src/templates/playlist-editor.hbs b/ui/src/templates/playlist-editor.hbs
@@ -27,7 +27,7 @@
         <div class="selected-info">
             {{!-- SELECTED INFO --}}
         </div>
-        <div class="footer-actions">
+        <div class="footer-actions d-flex">
             <button class="btn inactive hide-on-multi-select" data-action="undo">
                 <i class="fa fa-undo"></i>
             </button>

diff --git a/ui/src/templates/playlist-timeline-info.hbs b/ui/src/templates/playlist-timeline-info.hbs
@@ -1,11 +1,11 @@
-<div class="playlist-info-block">
+<div class="playlist-info-block d-flex">
     <i class="fa fa-tag " title="{{trans.name}}"></i>
     <span class="label-name align-middle d-inline-block">
         "{{playlist.name}}"
     </span>
 </div>
 
-<div class="playlist-info-block">
+<div class="playlist-info-block d-flex">
     <i class="fa fa-clock-o" title="{{trans.duration}}"></i>
     <span class="label-name align-middle d-inline-block">
         {{playlist.durationFormatted}}