WIP: apply bootstrap theme

* crowi-sidebar

lib/views/layout/2column.html

@@ -2,7 +2,7 @@
 
 {% block layout_main %}
 <a href="" class=" hidden-xs hidden-sm layout-control" id="toggle-sidebar"><i class="fa fa-chevron-right"></i> <span class="hide-on-affix-top"></span></a>
-<aside class="sidebar col-md-3 hidden-xs hidden-sm hidden-print">
+<aside class="crowi-sidebar col-md-3 hidden-xs hidden-sm hidden-print">
 
   {% block side_header %}
   {% endblock %}

lib/views/widget/page_side_header.html

@@ -36,7 +36,7 @@
         <button
           data-csrftoken="{{ csrf() }}"
           data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
-          class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
+          class="like-button btn btn-xs btn-default btn-outline btn-rounded {% if page.isLiked(user) %}active btn-info{% endif %}"
           ><i class="icon-like"></i> {{ t('Like!') }}</button>
         {% endif %}
         </p>

resource/styles/scss/_comment.scss

@@ -18,7 +18,7 @@
   }
 }
 
-.crowi.main-container aside.sidebar .side-content {
+.crowi.main-container .crowi-sidebar .side-content { // styles only for original crowi
 
 .page-comments {
   margin: 8px 0 0 0;

resource/styles/scss/_page.scss

@@ -132,103 +132,6 @@
     ul {
     }
   } // }}}
-
-  aside.sidebar { // {{{
-    z-index: 1030;
-    position: fixed;
-    padding: 65px 0 0 0;
-    // margin-bottom: $crowiFooterHeight;
-    color: #333;
-    height: 100%;
-    right: 0;
-    top: 0;
-    overflow: auto;
-    border-left: solid 1px #ccc;
-    // background: $crowiAsideBackground;
-
-    transition: .3s ease;
-    -webkit-transition: .3s ease;
-
-
-    .page-meta {
-      padding: 15px 15px 5px 15px;
-      color: #666;
-      font-size: .9em;
-      line-height: 1.4em;
-      border-bottom: solid 1px #ccc;
-
-      .creator-picture {
-        text-align: center;
-        img {
-          width: 48px;
-          height: 48px;
-          box-shadow: 0 0 1px #666;
-        }
-      }
-      .creator {
-        font-size: 1.3em;
-        font-weight: bold;
-      }
-      .created-at {
-      }
-
-      .like-box {
-        padding-bottom: 0;
-
-        .dl-horizontal {
-          margin-bottom: 0;
-
-          dt, dd {
-            border-top: solid 1px #ccc;
-            padding-top: 5px;
-            padding-bottom: 5px;
-          }
-          dt {
-            width: 80px;
-          }
-          dd {
-            margin-left: 90px;
-            text-align: right;
-          }
-        }
-      }
-
-      .liker-count, .contributor-count, .seen-user-count {
-        font-size: 1.2em;
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
-      .contributor-list, .seen-user-list {
-      }
-    }
-
-    .side-content {
-      // margin-bottom: $crowiFooterHeight + $crowiHeaderHeight;
-      color: #666;
-      padding: 15px;
-
-      h3 {
-        font-size: 1.1em;
-      }
-
-      // disabled in crowi-plus -- 2017.06.03 Yuki Takei
-      // a {
-      //   color: #ccc;
-      //   &:hover { color: #aaa;}
-      // }
-
-      ul.fitted-list {
-        padding-left: 0;
-        li {
-          margin-bottom: 2px;
-
-          .input-group-addon {
-            padding: 5px 6px;
-          }
-        }
-      }
-    }
-  } // }}}
   */
 
   /*
@@ -248,26 +151,6 @@
     }
   } // }}}
 
-  &.aside-hidden { // {{{
-    .layout-control {
-      right: 0;
-      i {
-        transform: rotate(180deg);
-      }
-    }
-
-    aside.sidebar { // {{{
-      right: -25%;
-    } // }}}
-
-    .main { // {{{
-      width: 100%;
-
-      article header.affix {
-        width: 100%;
-      }
-    } // }}}
-  } // }}}
   */
 }
 

resource/styles/scss/crowi-sidebar.scss

@@ -0,0 +1,117 @@
+.crowi-sidebar { // {{{
+  position: fixed;
+  padding: 65px 0 0 0;
+  // margin-bottom: $crowiFooterHeight;
+  color: #333;
+  height: 100%;
+  right: 0;
+  top: 0;
+  overflow: auto;
+  border-left: solid 1px #ccc;
+  background: #f5f5f5;
+
+  transition: .3s ease;
+  -webkit-transition: .3s ease;
+
+
+  .page-meta {
+    padding: 15px 15px 5px 15px;
+    color: #666;
+    font-size: .9em;
+    line-height: 1.4em;
+    border-bottom: solid 1px #ccc;
+
+    .creator-picture {
+      text-align: center;
+      img {
+        width: 48px;
+        height: 48px;
+        box-shadow: 0 0 1px #666;
+      }
+    }
+    .creator {
+      font-size: 1.3em;
+      font-weight: bold;
+    }
+    .created-at {
+    }
+
+    .like-box {
+      padding-bottom: 0;
+
+      .dl-horizontal {
+        margin-bottom: 0;
+
+        dt, dd {
+          border-top: solid 1px #ccc;
+          padding-top: 5px;
+          padding-bottom: 5px;
+        }
+        dt {
+          width: 80px;
+        }
+        dd {
+          margin-left: 90px;
+          text-align: right;
+        }
+      }
+    }
+
+    .liker-count, .contributor-count, .seen-user-count {
+      font-size: 1.2em;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+    .contributor-list, .seen-user-list {
+    }
+  }
+
+  .side-content {
+    // margin-bottom: $crowiFooterHeight + $crowiHeaderHeight;
+    color: #666;
+    padding: 15px;
+
+    h3 {
+      font-size: 1.1em;
+    }
+
+    // disabled in crowi-plus -- 2017.06.03 Yuki Takei
+    // a {
+    //   color: #ccc;
+    //   &:hover { color: #aaa;}
+    // }
+
+    ul.fitted-list {
+      padding-left: 0;
+      li {
+        margin-bottom: 2px;
+
+        .input-group-addon {
+          padding: 5px 6px;
+        }
+      }
+    }
+  }
+
+} // }}}
+
+.aside-hidden { // {{{
+  #toggle-sidebar {
+    right: 0;
+    i {
+      transform: rotate(180deg);
+    }
+  }
+
+  .crowi-sidebar { // {{{
+    right: -25%;
+  } // }}}
+
+  .main { // {{{
+    width: 100%;
+
+    article header.affix {
+      width: 100%;
+    }
+  } // }}}
+} // }}}

resource/styles/scss/crowi.scss

@@ -16,6 +16,7 @@
 // @import 'comment';
 // @import 'comment_crowi-plus';
 @import 'create-page';
+@import 'crowi-sidebar';
 // @import 'delete';
 // @import 'form';
 @import 'layout';