Re-organise pages-list items to fix (#871) (#1102)

* Re-organise pages-list items to fix (#871) * Remove useless comment (#871)
getgrav · May 15, 2017 · 5d0d299 · 5d0d299
1 parent 7464677
commit 5d0d299
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 29 deletions.
diff --git a/themes/grav/scss/template/_pages.scss b/themes/grav/scss/template/_pages.scss
@@ -31,9 +31,10 @@
 
         p.page-route {
             display: block;
-            margin: -10px 0 5px 25px;
+            margin: 0;
             line-height: 1;
             font-size: 0.9rem;
+            word-break: break-all;
 
             .spacer {
                 display: inline-block;
@@ -54,15 +55,6 @@
         }
     }
 
-    .page-tools {
-        display: inline-block;
-        float: right;
-        font-size: 1.4rem;
-        i {
-            margin-left: 10px;
-        }
-    }
-
     .page-home {
         font-size: 1.4rem;
         margin-left: 10px;
@@ -75,6 +67,45 @@
         vertical-align: middle;
     }
 
+    .page-edit {
+        text-overflow: ellipsis;
+        display: inline-block;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow-x: hidden;
+    }
+
+    .page-item__row {
+        display: flex;
+    }
+
+    .page-item__toggle {
+        width: 25px;
+        line-height: 1;
+        padding-top: 7px;
+    }
+
+    .page-item__content {
+        padding: 5px 0;
+        width: calc(100% - 50px);
+    }
+
+    .page-item__content-name {
+        line-height: 1;
+    }
+
+    .page-item__content-hint {
+        line-height: 1.3;
+        vertical-align: middle;
+        max-width: 100%;
+    }
+
+    .page-item__tools {
+        width: 25px;
+        text-align: right;
+        font-size: 1.4rem;
+    }
+
     .page-icon {
 
         color: #0082BA;

diff --git a/themes/grav/templates/pages.html.twig b/themes/grav/templates/pages.html.twig
@@ -77,32 +77,36 @@
         {% set page_url = getPageUrl(p) %}
 
         <li class="page-item" data-nav-id="{{ p.route }}">
-            <div class="row">
-                <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>
+            <div class="row page-item__row">
+                <span class="page-item__toggle" {{ 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 %}
-                <span class="page-home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
-                <span class="page-tools">
-
+                <div class="page-item__content">
+                    <div class="page-item__content-name">
+                        <span data-hint="{{ description|trim(' &bull; ')|raw }}" class="hint--top page-item__content-hint">
+                            <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 %}
+                        {% if p.home %}
+                            <span class="page-home"><i class="fa fa-home"></i></span>
+                        {% endif %}
+                    </div>
+                    <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
+                </div>
+                <span class="page-item__tools">
                     {% if warn %}
-                    <a href="#delete" data-remodal-target="delete" data-delete-url="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
+                        <a href="#delete" data-remodal-target="delete" data-delete-url="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
                     {% else %}
-                    <a href="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
+                        <a href="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
                     {% endif %}
                 </span>
-                <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
             </div>
             {% if p.children().count > 0 %}
-
-            <ul class="depth-{{ depth + 1 }}" style="display:none;">
-                {{ _self.loop(p, depth + 1, twig_vars) }}
-            </ul>
+                <ul class="depth-{{ depth + 1 }}" style="display:none;">
+                    {{ _self.loop(p, depth + 1, twig_vars) }}
+                </ul>
             {% endif %}
         </li>
     {% endfor %}