Fix for page tooltips usability issue #496

getgrav · May 3, 2016 · d2fe04f · d2fe04f
1 parent 770bca0
commit d2fe04f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/themes/grav/css-compiled/template.css b/themes/grav/css-compiled/template.css
diff --git a/themes/grav/css-compiled/template.css.map b/themes/grav/css-compiled/template.css.map
diff --git a/themes/grav/scss/template/_pages.scss b/themes/grav/scss/template/_pages.scss
@@ -23,6 +23,11 @@
         @include breakpoint(mobile-only) {
             padding-right: 1rem;
         }
+        [data-hint]:after {
+            line-height: 1 !important;
+            width: auto !important;
+            white-space: nowrap !important;
+        }
 
         p.page-route {
             display: block;

diff --git a/themes/grav/templates/pages.html.twig b/themes/grav/templates/pages.html.twig
@@ -78,11 +78,12 @@
 
         <li class="page-item" data-nav-id="{{ p.route }}">
             <div class="row">
-                <span {{ p.children(0).count > 0 ? 'data-toggle="children"' : ''}} data-hint="{{ description|trim(' &bull; ')|raw }}" class="hint--bottom">
+                <span {{ p.children(0).count > 0 ? 'data-toggle="children"' : ''}}>
                 <i class="page-icon fa fa-fw fa-circle-o {{ p.children(0).count > 0 ? 'children-closed' : ''}} {{ p.modular ? 'modular' : (not p.routable ? 'not-routable' : (not p.visible ? 'not-visible' : (not p.page ? 'folder' :  ''))) }}"></i>
                 </span>
+                <span data-hint="{{ description|trim(' &bull; ')|raw }}" class="hint--right">
                 <a href="{{ page_url }}" class="page-edit">{{ p.title|e }}</a>
-
+                </span>
                 {% if p.language %}
                     <span class="badge lang {% if p.language == admin_lang %}info{% endif %}">{{p.language}}</span>
                 {% endif %}