WIP: apply bootstrap theme

* history

resource/js/components/PageHistory/Revision.js

@@ -28,25 +28,29 @@ export default class Revision extends React.Component {
       pic = <UserPicture user={author} />;
     }
 
-    const iconName = this.props.revisionDiffOpened ? 'caret-down' : 'caret-right';
+    const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
     return (
-      <div className="revision-history-main">
-        {pic}
-        <div className="revision-history-author">
-          <strong>{author.username}</strong>
+      <div className="revision-history-main d-flex">
+        <div className="m-t-5">
+          {pic}
         </div>
-        <div className="revision-history-meta">
-          <p>
-            <UserDate dateTime={revision.createdAt} />
-          </p>
-          <p>
-            <a className="diff-view" onClick={this._onDiffOpenClicked}>
-              <Icon name={iconName} /> View diff
-            </a>
-            <a href={"?revision=" + revision._id }>
-              <Icon name="sign-in" /> Go to this version
-            </a>
-          </p>
+        <div className="m-l-10">
+          <div className="revision-history-author">
+            <strong>{author.username}</strong>
+          </div>
+          <div className="revision-history-meta">
+            <p>
+              <UserDate dateTime={revision.createdAt} />
+            </p>
+            <p>
+              <a className="diff-view" onClick={this._onDiffOpenClicked}>
+                <i className={iconClass}></i> View diff
+              </a>
+              <a href={"?revision=" + revision._id } className="m-l-10">
+                <i className="icon-login"></i> Go to this version
+              </a>
+            </p>
+          </div>
         </div>
       </div>
     );

resource/styles/scss/_page.scss

@@ -270,77 +270,43 @@
   } // }}}
   */
 }
-/*
-.crowi.main-container .main .content-main .revision-history { // {{{
-  h1 {
-    padding-bottom: 0.3em;
-    font-size: 2.3em;
-    font-weight: bold;
-    border-bottom: solid 1px #ccc;
-  }
 
+.crowi.main-container .main .content-main .revision-history { // {{{
 
   .revision-history-list {
     .revision-hisory-outer {
-      margin-top: 8px;
-
       .revision-history-main {
-
         .picture {
-          float: left;
           width: 32px;
           height: 32px;
         }
-
-        .revision-history-author {
-          margin-left: 40px;
-          color: #666;
-        }
-        .revision-history-comment {
-          margin-left: 40px;
-        }
         .revision-history-meta {
-          margin-left: 40px;
-
-          p {
-            margin-bottom: 8px;
-          }
-
-          a {
-            margin-right: 8px;
-          }
           a:hover {
             cursor: pointer;
           }
         }
 
+        .caret {
+          transform: rotate(-90deg);
+          transition: 0.4s;
+
+          &.caret-opened {
+            transform: rotate(0deg);
+          }
+        }
       }
       .revision-history-diff {
-        margin-left: 40px;
+        padding-left: 40px;
       }
     }
 
     li {
       position: relative;
       list-style: none;
-
-      a {
-        color: #666;
-        padding: 3px 5px 3px 40px;
-        display: block;
-
-        &:hover {
-          // background: darken($crowiAsideBackground, 10%);
-          text-decoration: none;
-          color: darken($link-color, 35%);
-        }
-      }
-
     }
   }
 
 } // }}}
-*/
 
 // for not_found.html
 /*