Fix nav structure

lib/views/widget/page_list.html

@@ -7,33 +7,36 @@
   {% set page = data %}
 {% endif %}
 
-<li class="page-list-li">
-  <div class="picture-outer">
-    <img src="{{ page.revision.author|picture }}" class="picture picture-rounded">
-  </div>
-  <div class="page-link-outer">
-    <a class="page-list-link" href="{{ page.path }}"
-      data-path="{{ page.path }}"
-      data-short-path="{{ page.path|path2name }}">{{ page.path }}</a>
+<li>
+  <img src="{{ page.revision.author|picture }}" class="picture picture-rounded">
+  <a href="{{ page.path }}"
+    class="page-list-link"
+    data-path="{{ page.path }}"
+    data-short-path="{{ page.path|path2name }}">{{ page.path }}
+  </a>
+  <span class="page-list-meta">
+    {% if page.isPortal() %}
+      <span class="label label-info">PORTAL</span>
+    {% endif  %}
 
-    <span class="page-list-meta">
-      {% if page.isPortal() %}
-        <span class="label label-info">PORTAL</span>
-      {% endif  %}
-
-      {% if page.commentCount > 0 %}
-        <i class="fa fa-comment"></i>{{ page.commentCount }}
-      {% endif  %}
+    {% if page.commentCount > 0 %}
+    <span>
+      <i class="fa fa-comment"></i>{{ page.commentCount }}
+    </span>
+    {% endif  %}
 
-      {% if page.liker.length > 0 %}
-        <i class="fa fa-thumbs-up"></i>{{ page.liker.length }}
-      {% endif  %}
+    {% if page.liker.length > 0 %}
+    <span>
+      <i class="fa fa-thumbs-up"></i>{{ page.liker.length }}
+    </span>
+    {% endif  %}
 
-      {% if !page.isPublic() %}
-        <i class="fa fa-lock"></i>
-      {% endif %}
+    {% if !page.isPublic() %}
+    <span>
+      <i class="fa fa-lock"></i>
     </span>
-  </div>
+    {% endif %}
+  </span>
 </li>
 {% endfor %}
 </ul>

resource/css/_page_list.scss

@@ -25,32 +25,27 @@
   .page-list-ul {
     padding-left: 0;
 
-    .page-list-li {
+    > li {
       list-style: none;
       line-height: 1.8em;
 
-      .picture-outer {
-        float: left;
-
-        .picture {
-          width: 16px;
-          height: 16px;
-          margin-right: 4px;
-        }
+      .picture {
+        width: 16px;
+        height: 16px;
       }
 
-      .page-link-outer {
-        padding-left: 20px;
-
-        .page-list-link {
-          font-size: 1.1em;
-          color: #666;
+      > a {
+        padding: 0 4px;
+        font-size: 1.1em;
+        color: #666;
 
-          strong {
-            color: #333;
-          }
+        strong {
+          color: #333;
         }
       }
+
+      > span.page-list-meta {
+      }
     }
   }
 }

resource/js/components/PageList/ListView.js

@@ -11,15 +11,11 @@ export default class ListView extends React.Component {
 
       return (
         <li className="page-list-li" key={page._id}>
-          <div className="picture-outer">
-            <UserPicture user={page.revision.author} />
-          </div>
-          <div className="page-link-outer">
-            <a className="page-list-link" href={page.path}>
-              <PagePath page={page} />
-            </a>
-            <PageListMeta page={page} />
-          </div>
+          <UserPicture user={page.revision.author} />
+          <a className="page-list-link" href={page.path}>
+            <PagePath page={page} />
+          </a>
+          <PageListMeta page={page} />
         </li>
       );
     });