enable responsivility

lib/views/layout-kibela/base/layout.html

@@ -6,8 +6,8 @@
   <div class="row body m-0 p-0">
 
     <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-        <div class="row bg-title m-t-10">
-            <div class="col-xs-12">
+        <div class="row bg-title">
+            <div class="col-xs-12 ">
               {% block content_header %}
               {% endblock %}
             </div>

lib/views/layout-kibela/user_page.html

@@ -17,7 +17,7 @@
 {% block content_main %}
   <div class="row pt-15">
 
-    <div class="col-xs-12 bg-white round-corner m-t-20 p-t-10">
+    <div class="col-xs-12 bg-white round-corner">
 
       {#
         # ensure to insert 'user_page_content' widget to here
@@ -44,7 +44,7 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="75">
+      <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="75">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

lib/views/layout-kibela/widget/comments.html

@@ -1,6 +1,6 @@
 <div class="page-comments-row row">
 
-    <div class="page-comments col-lg-9 col-md-11">
+    <div class="page-comments col-lg-10 col-md-12">
 
       <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
 

resource/styles/agile-admin/inverse/colors/kibela.scss

@@ -2,9 +2,9 @@
 
 $radius: 3px;
 
-$themecolor: #00587A;
+$themecolor: rgb(18, 86, 163);
 $themelight: #F4F5F6;
-$subthemecolor: rgb(75, 96, 129);
+$subthemecolor: rgb(90, 149, 216);
 
 
 $topbar: $themecolor;
@@ -20,7 +20,7 @@ $sidebar-text: $themecolor;
 $primary: $themecolor;
 $info: lighten($themecolor,20%);
 
-$logo-mark-fill: lighten(desaturate($topbar, 30%), 20%);
+$logo-mark-fill: lighten($themecolor, 20%);
 $wikilinktext: lighten($themecolor, 20%);
 $wikilinktext-hover: lighten($wikilinktext, 20%);
 $inline-code-color: $subthemecolor;

resource/styles/scss/_layout_kibela.scss

@@ -8,16 +8,18 @@
   body, html, #page-wrapper, {
     background-color: gray;
   }
+  .bg-white {
+    background: rgb(254, 255, 254) !important;
+  }
   .logo {
     background: transparent;
-     .logo-mark {
-      background-color: white;
-      height: 50px;
-      box-shadow: none;
-      svg {
-        width: 60px;
-        height: 60x;
-      }
+    .logo-mark {
+    background-color: white;
+    height: 50px;
+    box-shadow: none;
+    svg {
+      width: 60px;
+    }
    }
  }
 
@@ -26,6 +28,7 @@
     background-color: transparent;
   }
   .authors {
+    padding-top: 10px;
     li {
       list-style: none !important;
     }
@@ -36,23 +39,35 @@
    }
  }
 
+  .panel-heading {
+    border-radius: 0.35em 0.35em 0 0 !important;
+  }
 
+ .btn-open-dropzone {
+  background: rgb(243, 245, 247);
+  border-bottom: 0px !important;
+  }
  /* navbar */
 
   .navbar-header {
+    display: inline-block;
+    overflow: visible;
+    min-width: 320px;
     background: white;
     color: #3c4a60;
-    border: none;
+    border-bottom: solid 1px #E6E9EC;
     height: 60px;
     padding: 5px 8px 5px 8px;
 
-
     .navbar-right {
       a {
         margin-right: 1.5em;
       }
 
+
     }
+
+
     .navbar-top-links > li > a{
     border-radius: 0.35em;
     height: 40px !important;
@@ -60,8 +75,7 @@
     .create-page {
       background: #5584E1;
       border-radius: 0.35em;
-
-      width: 110px;
+      width: 8em;
       text-align: center;
       &:hover{
         background:rgb(124, 168, 255);
@@ -81,16 +95,57 @@
         width: 36px;
         height: 36px;
       }
+    }
+
+
+
+    @media screen and (max-width: 770px) {
+
+      .search-top {
+        display: none;
+      }
+      @media screen and (max-width: 500px) {
 
+        .user-name {
+          display: none;
+        }
+        .navbar-right {
+          width: 65%;
+          li {
+            text-align: center;
+            width: 30%;
+            a {
+              margin-right: 0px;
+            }
+            .create-page {
+              width: 60px;
+            }
+            .dropdown {
+              text-align: center;
+              .dropdown-toggle {
+                padding-left: 2em;
+                margin-right: 0px;
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
+
+
+
+
+
   /* page list */
 
   .page-list {
     background: white;
   }
-  .page-attachment-row {
+  .page-attachments-row {
+    border: 0px;
     background-color: #E5ECF1 !important;
   }
 
@@ -113,12 +168,9 @@
     left: 0px;
     margin: auto;
     height: 11em;
-    /*　編集の時だけ消したい　*/
-    /*&.on-edit .kibela-block {*/
-      border-radius: 0.35em;
-      border-top: solid 0.4em #5584E1;
-      z-index: absolute;
-    /*}*/
+    border-radius: 0.35em;
+    border-top: solid 0.4em #5584E1;
+    z-index: absolute;
   }
   .bg-title {
     position: relative;
@@ -127,6 +179,9 @@
     svg {
       display: none;
     }
+    @media screen and (max-width: 765px) {
+      padding-top: 30px;
+    }
   }
 }
 .kibela.main-container {
@@ -150,6 +205,7 @@
     }
   }
 
+  /* Comment section */
 
     %comment-section {
       position: relative;
@@ -168,7 +224,7 @@
         border-top: 20px solid transparent;
         border-left: 20px solid transparent;
         border-bottom: 20px solid transparent;
-        border-right: 20px solid #D8E2EB;
+        border-right: 20px solid #E6E9EC;
 
         border-left-width: 0;
         left: -1em;
@@ -226,7 +282,7 @@
       // コメントセクション
       .page-comment-main {
         @extend %comment-section;
-        background: #D8E2EB;
+        background: #E6E9EC;
         border-radius: 0.35em;
       }
 
@@ -245,6 +301,9 @@
           vertical-align: 25%;
         }
       }
+      .page-comment-revision {
+        color: lightgray;
+      }
     }
 
     // show when hover
@@ -269,10 +328,10 @@
       // seciton
       .comment-form-main {
         @extend %comment-section;
-        background: #D8E2EB;
+        background: #E6E9EC;
         border-radius: 0.35em;
         .CodeMirror {
-          border: none !important;
+          border: 0px;
         }
       }
 
@@ -288,6 +347,26 @@
           height: 180px;
         }
       }
+      .CodeMirror {
+      border: 0px !important;
+      }
+      #page-editor {
+        @media (max-width: $screen-sm) {
+          .desc-long {
+            display: none;
+          }
+        }
+      }
+      @media screen and (max-width: 1400px) {
+        .desc-long {
+          display: none;
+        }
+        @media screen and (max-width: 570px) {
+          .gfm-cheatsheet {
+            display: none;
+          }
+        }
+      }
     }
 
 
@@ -328,15 +407,24 @@
 
   }
 
+/* user page */
+
+
+    .header-wrap {
+      margin-left: 2em;
+      padding: 0px;
+    }
+
+
+
+
 
 /* edit */
 
   .CodeMirror {
     border-radius: 0.35em;
-    border-top: solid 0.3em #5584E1;
-    border-left: solid 1.2px lightgray;
-    border-right: solid 1.2px lightgray;
-    border-bottom: solid 1.2px lightgray;
+    border-top: solid 0.3em #5584E1 !important;
+    border: solid 1.2px #D8D8D8;
   }
   .tab-content {
     padding: 1em;
@@ -359,10 +447,16 @@
 
 
 
+}
 
+.on-edit {
+
+    .kibela-block {
+      border: 0px ;
+    }
 
-}
 
+}