Merge pull request #1327 from weseek/support/apply-bst4-PageTimeline.jsx-panel-card

GW-486 PageTimeline.jsx のPanelをcardにする（BST4化）：Support/apply bst4 page timeline.jsx panel card

src/client/js/components/PageTimeline.jsx

@@ -101,9 +101,9 @@ class PageTimeline extends React.Component {
     return pages.map((page) => {
       return (
         <div className="timeline-body" key={`key-${page.id}`}>
-          <div className="panel panel-timeline">
-            <div className="panel-heading"><a href={page.path}>{page.path}</a></div>
-            <div className="panel-body">
+          <div className="card card-timeline">
+            <div className="card-header"><a href={page.path}>{page.path}</a></div>
+            <div className="card-body">
               <RevisionLoader
                 lazy
                 growiRenderer={this.growiRenderer}

src/client/styles/scss/_page_list.scss

@@ -1,71 +1,71 @@
-.page-list {
-  .page-list-container {
-    font-size: 15px;
-    line-height: 1.6em;
-  }
-
-  .page-list-ul {
-    padding-left: 0;
-    margin: 0;
-
-    > li {
-      margin: 0;
-      list-style: none;
-
-      .picture {
-        width: 16px;
-        height: 16px;
-      }
-
-      > a {
-        display: inline;
-        padding: 0 4px;
-        color: inherit;
-      }
-
-      > span.page-list-meta {
-        font-size: 0.9em;
-
-        > span {
-          margin-right: 0.3rem;
-        }
-
-        i {
-          margin-right: 2px;
-        }
-      }
-    }
-
-    // after second level indent
-    .page-list-ul {
-      padding-left: 2rem;
-    }
-
-    // override .page-list-ul
-    &.page-list-ul-flat {
-      padding-left: 0;
-    }
-  }
-}
-
-.popular-page-high {
-  font-size: 1.1em;
-  font-weight: bold;
-  color: #e80000;
-}
-
-.popular-page-mid {
-  font-weight: bold;
-  color: #e47800;
-}
-
-.popular-page-low {
-  color: #ab7c7c;
-}
-
-.panel-timeline {
-  border: 1px solid #ccc;
-  > .panel-heading {
-    background-color: #ccc;
-  }
-}
+.page-list {
+  .page-list-container {
+    font-size: 15px;
+    line-height: 1.6em;
+  }
+
+  .page-list-ul {
+    padding-left: 0;
+    margin: 0;
+
+    > li {
+      margin: 0;
+      list-style: none;
+
+      .picture {
+        width: 16px;
+        height: 16px;
+      }
+
+      > a {
+        display: inline;
+        padding: 0 4px;
+        color: inherit;
+      }
+
+      > span.page-list-meta {
+        font-size: 0.9em;
+
+        > span {
+          margin-right: 0.3rem;
+        }
+
+        i {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    // after second level indent
+    .page-list-ul {
+      padding-left: 2rem;
+    }
+
+    // override .page-list-ul
+    &.page-list-ul-flat {
+      padding-left: 0;
+    }
+  }
+}
+
+.popular-page-high {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: #e80000;
+}
+
+.popular-page-mid {
+  font-weight: bold;
+  color: #e47800;
+}
+
+.popular-page-low {
+  color: #ab7c7c;
+}
+
+.card-timeline {
+  border: 1px solid #ccc;
+  > .card-header {
+    background-color: #ccc;
+  }
+}