Merge pull request #2936 from weseek/imprv/gw4156-layout-adjustment-for-bookmarks-and-recentchanges

Imprv/gw4156 layout adjustment for bookmarks and recentchanges

src/client/js/components/MyBookmarkList/MyBookmarkList.jsx

@@ -85,10 +85,11 @@ class MyBookmarkList extends React.Component {
   renderBookmarkList() {
     return (
       <>
-        <ul className="page-list-ul page-list-ul-flat mb-3">
+        <ul className="page-list-ul page-list-ul-flat">
           {this.generatePageList(this.state.pages)}
         </ul>
         <PaginationWrapper
+          align="center"
           activePage={this.state.activePage}
           changePage={this.handlePage}
           totalItemsCount={this.state.totalPages}

src/client/js/components/RecentCreated/RecentCreated.jsx

@@ -69,10 +69,11 @@ class RecentCreated extends React.Component {
 
     return (
       <div className="page-list-container-create">
-        <ul className="page-list-ul page-list-ul-flat mb-3">
+        <ul className="page-list-ul page-list-ul-flat">
           {pageList}
         </ul>
         <PaginationWrapper
+          align="center"
           activePage={this.state.activePage}
           changePage={this.handlePage}
           totalItemsCount={this.state.totalPages}

src/client/styles/scss/_layout_growi.scss

@@ -35,12 +35,3 @@
     }
   }
 }
-
-.grw-page-list-m {
-  .grw-page-list-title-m {
-    svg {
-      width: 35px;
-      height: 35px;
-    }
-  }
-}

src/client/styles/scss/_page_list.scss

@@ -9,7 +9,7 @@ body .page-list {
     margin: 0;
 
     > li {
-      margin: 0;
+      margin: 0.5rem;
       list-style: none;
 
       > a {
@@ -72,3 +72,13 @@ body .page-list {
     background-color: $gray-300;
   }
 }
+
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 6px;
+    }
+  }
+}

src/server/views/layout-growi/user_page.html

@@ -52,19 +52,19 @@
   {% include 'widget/comments.html' %}
 
   {% if page %}
-    <div class="grw-page-list-m">
-      <h1 class="grw-page-list-title-m border-bottom pb-2">
+    <div class="grw-page-list-m my-5">
+      <h1 class="grw-page-list-title-m border-bottom pb-2 mb-3">
         <i id="user-bookmark-icon"></i>
         Bookmarks
-      </h2>
+      </h1>
       <div class="page-list" id="user-bookmark-list">
         <div class="page-list-container">
         </div>
       </div>
     </div>
 
-    <div class="grw-page-list-m">
-      <h1 class="grw-page-list-title-m border-bottom pb-2">
+    <div class="grw-page-list-m my-5">
+      <h1 class="grw-page-list-title-m border-bottom pb-2 mb-3">
         <i id="recent-created-icon"></i>
         Recently Created
       </h2>