WIP: apply bootstrap theme

* buttons
    * copy, edit, bookmark, like

lib/views/crowi-plus/widget/header.html

@@ -13,20 +13,16 @@
       {% if page %}
       <div class="flex-item-action">
         {% if user %}
-        <button
+        <a
             data-csrftoken="{{ csrf() }}"
             data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
-            class="like-button btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="fa fa-thumbs-o-up"></i></button>
+            class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
+        ><i class="fa fa-thumbs-o-up"></i></a>
         {% endif %}
       </div>
       <div class="flex-item-action">
         {% if user %}
-        <span id="bookmark-button">
-          <p class="bookmark-link">
-            <i class="fa fa-star-o"></i>
-          </p>
-        </span>
+        <span id="bookmark-button"></span>
         {% endif %}
       </div>
 

lib/views/page.html

@@ -14,11 +14,7 @@
       {% if page %}
       <div class="flex-item-action">
         {% if user %}
-        <span id="bookmark-button">
-          <p class="bookmark-link">
-            <i class="fa fa-star-o"></i>
-          </p>
-        </span>
+        <span id="bookmark-button"></span>
         {% endif %}
       </div>
       <div class="flex-item-action visible-xs visible-sm">

resource/js/components/BookmarkButton.js

@@ -67,11 +67,13 @@ export default class BookmarkButton extends React.Component {
     }
 
     const iconName = this.state.bookmarked ? 'star' : 'star-o';
+    const addedClassName = this.state.bookmarked ? 'active' : '';
 
     return (
-      <a href="#" title="Bookmark" className="bookmark-link" onClick={this.handleClick}>
+      <button href="#" title="Bookmark" onClick={this.handleClick}
+          className={`bookmark-link btn btn-default btn-circle btn-outline ${addedClassName}`}>
         <Icon name={iconName} />
-      </a>
+      </button>
     );
   }
 }

resource/js/components/CopyButton.js

@@ -24,7 +24,6 @@ export default class CopyButton extends React.Component {
     const style = Object.assign({
       fontSize: "0.8em",
       padding: "0 2px",
-      border: 'none',
       verticalAlign: 'text-top',
     }, this.props.buttonStyle);
 

resource/js/components/Page/RevisionPath.js

@@ -77,7 +77,6 @@ export default class RevisionPath extends React.Component {
       fontSize: "0.6em",
       marginLeft: "0.5em",
       padding: "0 2px",
-      border: 'none',
     };
 
     const pageLength = this.state.pages.length;
@@ -107,9 +106,9 @@ export default class RevisionPath extends React.Component {
         </span>
         {afterElements}
         <CopyButton buttonId="btnCopyRevisionPath" text={this.props.pagePath}
-            buttonClassName="btn btn-default btn-muted" iconClassName="fa fa-clone text-muted" />
-        <a href="#edit-form" className="btn btn-default btn-muted" style={editButtonStyle}>
-          <i className="fa fa-edit text-muted"></i>
+            buttonClassName="btn btn-default btn-copy" iconClassName="fa fa-clone" />
+        <a href="#edit-form" className="btn btn-default btn-edit" style={editButtonStyle}>
+          <i className="fa fa-edit"></i>
         </a>
       </span>
     );

resource/styles/index.js

@@ -1,7 +1,4 @@
 import './scss/vendor.scss';
 
-// agile-admin theme
-import './agile-admin/inverse/style.scss';
-import './agile-admin/inverse/colors/default.scss';
-
 import './scss/crowi.scss';
+import './agile-admin/inverse/colors/default.scss';

resource/styles/scss/_layout.scss

@@ -134,54 +134,6 @@
 
 } // }}}
 
-@media (max-width: $screen-sm-max) { // {{{
-} // }}}
-
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { // {{{ tablet size
-  .crowi.main-container { // {{{
-    .main {
-      article header {
-        .bookmark-link {
-          font-size: 1.3em;
-        }
-        h1 {
-          font-size: 1.4em;
-          margin-bottom: 0;
-        }
-
-        &.affix {
-          width: 100%;
-        }
-      }
-    }
-  }
-} // }}}
-
-@media (max-width: $screen-xs-max) { // {{{ iPhone size
-  .crowi.main-container { // {{{
-    .main {
-      article header {
-        .bookmark-link {
-          font-size: 1em;
-        }
-        h1 {
-          font-size: 1.1em;
-        }
-
-        &.affix {
-          h1 {
-            font-size: 1.1em;
-          }
-
-          width: 100%;
-          padding: 5px;
-          box-shadow: 0 0px 2px #999;
-        }
-      }
-    }
-  }
-}
-
 @media print { // {{{ printable style
   .crowi.main-container { // {{{
     padding: 30px;

resource/styles/scss/_page.scss

@@ -4,101 +4,107 @@
 .crowi.main-container {
   // padding controll of .header-wrap and .content-main are moved to _layout and _form
 
-  .main { // {{{ .main of layout related
-    transition: .5s ease;
-    -webkit-transition: .5s ease;
-    background: #fff;
-
-    article {
-      background: #fff;
+  /*
+   * header
+   */
+  header {
+    .btn-copy, .btn-edit {
+      @extend .text-muted;
+      opacity: 0.3;
+      border: none;
+      &:not(:hover) {
+        background-color: transparent;
+      }
+    }
+    // change button opacity
+    &:hover {
+      .btn.btn-copy, .btn.btn-edit {
+        opacity: unset;
+      }
     }
 
-    article header {
-      background: #fff;
-      width: 100%;
+    .like-button {
+      font-size: 1.2em;
+      line-height: 0.8em;
+      &.active {
+        @extend .btn-info;
+      }
+    }
+    .bookmark-link {
+      font-size: 1.2em;
+      line-height: 0.8em;
+      &.active {
+        @extend .btn-warning;
+      }
+    }
 
-      &.affix {
-        width: 100%;
-        top: 0;
-        left: 0;
-        padding: 5px 20px;
-        z-index: 1039;
-        background: rgba(255, 255, 255, .9);
-        box-shadow: 0 0px 2px #999;
-
-        h1 {
-          font-size: 1.8em;
-        }
+    .flex-title-line {
+      line-height: 1;
+      display: flex;
+      align-items:         center;
 
+      .flex-item-title {
+        flex-basis: auto;
+        margin-right: auto;
+      }
+      .flex-item-action {
+        flex-basis: 2em;
+        text-align: center;
+        padding: 0 2px;
       }
-
     }
 
-    &.col-md-12 article header.affix {
-      width: 100%;
-    }
+    h1 {
+      font-size: 28px;
+      margin-top: 0;
+      margin-bottom: 0;
 
-    article header { // not affixed
-      .bookmark-link {
-        color: #e6b422;
-        font-size: 2em;
-        &.bookmarked {
-          //color: #fff;
-        }
+      .btn-copy-container {
+        font-size: 0.65em;
       }
 
-      .flex-title-line {
-        line-height: 1;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-align-items: center;
-        align-items:         center;
-
-        .flex-item-title {
-          -webkit-flex-basis: auto;
-          flex-basis: auto;
-          margin-right: auto;
-        }
-        .flex-item-action {
-          -webkit-flex-basis: 2em;
-          flex-basis: 2em;
-          text-align: center;
-          padding: 0 2px;
-        }
-      }
+      //// TODO crowi layout only
+      // a.last-path {
+      //   color: #D1E2E4;
+      //   opacity: .4;
 
-      h1 {
-        font-size: 28px;
-        margin-top: 0;
-        margin-bottom: 0;
+      //   &:hover {
+      //     color: inherit;
+      //   }
+      // }
 
-        .btn-copy-container {
-          font-size: 0.65em;
-        }
+    }
 
-        a.last-path {
-          color: #D1E2E4;
-          opacity: .4;
+    .url-line {
+      color: #999;
+      font-size: 1rem;
+    }
 
-          &:hover {
-            color: inherit;
-          }
-        }
+    // affix
+    &.affix {
+      width: 100%;
+      top: 0;
+      left: 0;
+      padding: 5px 20px;
+      // z-index: 1039;
+      // background: rgba(255, 255, 255, .9);
+      box-shadow: 0 0px 2px #999;
 
+      h1 {
+        font-size: 1.8em;
       }
+    }
 
-      .url-line {
-        color: #999;
-        font-size: 1rem;
-      }
+  }
 
-      // change button opacity
-      .btn.btn-muted {
-        opacity: 0.3;
-      }
-      &:hover .btn.btn-muted {
-        opacity: unset;
-      }
+  /*
+  .main { // {{{ .main of layout related
+    transition: .5s ease;
+    -webkit-transition: .5s ease;
+    background: #fff;
+
+    article {
+      background: #fff;
     }
 
     .content-main {
@@ -219,7 +225,6 @@
       }
     }
 
-
     .side-content {
       // margin-bottom: $crowiFooterHeight + $crowiHeaderHeight;
       color: #666;
@@ -247,7 +252,9 @@
       }
     }
   } // }}}
+  */
 
+  /*
   .footer { // {{{
     position: fixed;
     width: calc(25% - 18px);
@@ -284,8 +291,9 @@
       }
     } // }}}
   } // }}}
-
+  */
 }
+/*
 .crowi.main-container .main .content-main .revision-history { // {{{
   h1 {
     padding-bottom: 0.3em;
@@ -355,8 +363,10 @@
   }
 
 } // }}}
+*/
 
 // for not_found.html
+/*
 .crowi.main-container {
   .message-not-found {
     margin-top: 10px;
@@ -369,3 +379,4 @@
     }
   }
 }
+*/

resource/styles/scss/crowi.scss

@@ -4,6 +4,8 @@
 // import crowi variables
 @import 'variables';
 
+// agile-admin theme
+@import '../agile-admin/inverse/style';
 @import 'override-agileadmin';
 @import 'override-rbt';
 
@@ -18,7 +20,7 @@
 @import 'layout';
 @import 'layout_crowi-plus';
 // @import 'page_list';
-// @import 'page';
+@import 'page';
 // @import 'page_crowi-plus';
 // @import 'portal';
 @import 'search';