refactor page path

src/client/js/components/PageList/Page.jsx

@@ -14,25 +14,20 @@ export default class Page extends React.Component {
       link = page.path;
     }
 
-    const styleFlex = {
-      flex: 1,
-    };
-
     const hasChildren = this.props.children != null;
 
     return (
-      <li className="nav-item page-list-li d-flex align-items-center w-100">
-        <UserPicture user={page.lastUpdateUser} />
-        <a className="page-list-link nav-link" href={link}>
+      <li className="nav-item page-list-li w-100">
+        <a className="nav-link page-list-link d-flex align-items-center p-0" href={link}>
+          <UserPicture user={page.lastUpdateUser} />
           <PagePath page={page} excludePathString={this.props.excludePathString} />
+          <PageListMeta page={page} />
+          { hasChildren && (
+            <React.Fragment>
+              {this.props.children}
+            </React.Fragment>
+          )}
         </a>
-        <PageListMeta page={page} />
-        { hasChildren && (
-          <React.Fragment>
-            <a style={styleFlex} href={link}>&nbsp;</a>
-            {this.props.children}
-          </React.Fragment>
-        ) }
       </li>
     );
   }

src/client/js/components/SearchPage/SearchResult.jsx

@@ -246,23 +246,25 @@ class SearchResult extends React.Component {
           linkTo={pageId}
           key={page._id}
         >
-          { this.state.deletionMode
-            && (
-              <div className="custom-control custom-checkbox custom-checkbox-danger">
-                <input
-                  type="checkbox"
-                  id="page-delete-check"
-                  className="custom-control-input search-result-list-delete-checkbox"
-                  value={pageId}
-                  checked={this.state.selectedPages.has(page)}
-                  onChange={() => { return this.toggleCheckbox(page) }}
-                />
-                <label className="custom-control-label" htmlFor="page-delete-check"></label>
-              </div>
-            )
-          }
-          <div className="page-list-option">
-            <a href={page.path}><i className="icon-login" /></a>
+          <div className="ml-auto d-flex">
+            { this.state.deletionMode
+              && (
+                <div className="custom-control custom-checkbox custom-checkbox-danger">
+                  <input
+                    type="checkbox"
+                    id="page-delete-check"
+                    className="custom-control-input search-result-list-delete-checkbox"
+                    value={pageId}
+                    checked={this.state.selectedPages.has(page)}
+                    onChange={() => { return this.toggleCheckbox(page) }}
+                  />
+                  <label className="custom-control-label" htmlFor="page-delete-check"></label>
+                </div>
+              )
+            }
+            <div className="page-list-option">
+              <a href={page.path}><i className="icon-login" /></a>
+            </div>
           </div>
         </Page>
       );

src/client/styles/scss/_page_list.scss

@@ -6,10 +6,8 @@
 
   .page-list-ul {
     padding-left: 0;
-    margin: 0;
 
     > li {
-      margin: 0;
       list-style: none;
 
       .picture {
@@ -18,20 +16,26 @@
       }
 
       > a {
-        display: inline;
-        padding: 0 4px;
         color: inherit;
-      }
 
-      > span.page-list-meta {
-        font-size: 0.9em;
+        &:hover {
+          color: inherit;
+        }
 
-        > span {
-          margin-right: 0.3rem;
+        span.page-path {
+          padding: 0 4px;
         }
 
-        i {
-          margin-right: 2px;
+        > span.page-list-meta {
+          font-size: 0.9em;
+
+          > span {
+            margin-right: 0.3rem;
+          }
+
+          i {
+            margin-right: 2px;
+          }
         }
       }
     }