Merge pull request #1221 from weseek/support/apply-bst4-toppage-tab-fix

GW-286 左側カラムのタブを直す：Support/apply bst4 toppage tab fix

src/client/styles/scss/_layout.scss

@@ -101,21 +101,6 @@
   }
 } // }}}
 
-// fix tab width to 95 pixels
-// see also '_on-edit.scss'
-$nav-main-left-tab-width: 95px;
-
-.nav.nav-tabs {
-  .nav-main-left-tab {
-    width: $nav-main-left-tab-width;
-    text-align: center;
-    a {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
 // printable style
 @media print {
   .main-container {

src/client/styles/scss/_layout_variable.scss

@@ -5,6 +5,7 @@ $grw-base-green: rgb(7, 146, 72);
 $grw-mos-green: rgb(5, 70, 35);
 $grw-light-green: rgb(204, 238, 220);
 $grw-white-green: #f8fffb;
+$grw-sea-green: seagreen;
 
 .bg-grw-green {
   background: $grw-base-green;
@@ -21,5 +22,14 @@ $grw-white-green: #f8fffb;
 /* blue */
 $grw-alice-blue: aliceblue;
 
+/* gray */
+$grw-line-light-gray: #ddd;
+
 /* white */
 $grw-floral-white: floralwhite;
+
+// fix tab width to 95 pixels
+// see also '_on-edit.scss'
+$nav-main-left-tab-width: 95px;
+$nav-main-tab-height: 44px;
+$nav-main-tab-font-size: 16px;

src/client/styles/scss/_on-edit.scss

@@ -1,4 +1,5 @@
 @import 'editor-overlay';
+@import 'layout_variable';
 
 body:not(.on-edit) {
   // hide .page-editor-footer

src/client/styles/scss/_override-bootstrap.scss

@@ -1,4 +1,6 @@
 @import 'override-bootstrap-variables';
+@import 'layout_variable';
+
 //** alert with custom color
 .alert {
   a:not(.btn) {
@@ -19,3 +21,34 @@
     }
   }
 }
+
+//** override bootstrap nav nav-tabs nav-item
+.nav.nav-tabs > .nav-item {
+  position: relative;
+  min-width: $nav-main-left-tab-width;
+  padding: auto;
+  text-align: center;
+  $active-tab-border-width: 1px;
+  $active-tab-border-bg: white;
+  a {
+    display: block;
+    height: $nav-main-tab-height;
+    padding: ($nav-main-tab-height - $nav-main-tab-font-size)/2 0;
+    font-size: $nav-main-tab-font-size;
+  }
+  &.active {
+    // TODO：Active class must be switching by user control.
+    border: $active-tab-border-width solid $grw-line-light-gray;
+    border-bottom: initial;
+  }
+  // border for tab is hidden as inner width white border, and then become unevenness.
+  &.active::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: $nav-main-left-tab-width - $active-tab-border-width * 2;
+    content: '';
+    border-bottom: $active-tab-border-width solid $active-tab-border-bg;
+  }
+}

src/client/styles/scss/_wiki.scss

@@ -1,3 +1,5 @@
+@import 'layout_variable';
+
 div.body {
   padding: 10px;
 }
@@ -26,11 +28,11 @@ div.body {
   }
 
   h1 {
-    padding-bottom: 0.3em;
+    padding: 0.5em 0;
     margin-top: 2em;
     font-size: 1.8em;
     line-height: 1.1em;
-    border-bottom: solid 1px transparent;
+    border-bottom: solid 1px $grw-line-light-gray;
   }
   h2 {
     padding-bottom: 0.5em;

src/server/views/layout-growi/base/layout.html

@@ -18,7 +18,7 @@
   </div><!-- /.row -->
 
   <div class="row">
-    <div id="main" class="main m-t-15 col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+    <div id="main" class="main m-t-15 col-md-12 mt-2 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% block content_main_before %}
       {% endblock %}
 

src/server/views/widget/page_tabs.html

@@ -4,20 +4,20 @@
   {#
     Left Tabs
   #}
-  <li class="nav-main-left-tab active">
+  <li class="nav-item active">
     <a href="#revision-body" data-toggle="tab">
       <i class="icon-control-play"></i> View
     </a>
   </li>
 
   {% if !isTrashPage() %}
-  <li class="nav-main-left-tab nav-tab-edit">
+  <li class="nav-item nav-tab-edit">
     <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>
   </li>
   {% if isHackmdSetup() %}
-  <li class="nav-main-left-tab nav-tab-hackmd">
+  <li class="nav-item nav-tab-hackmd">
     <a {% if user %}href="#hackmd" data-toggle="tab"{% endif %} class="{% if not user %}edit-button-disabled{% endif %}">
       <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
     </a>
@@ -28,9 +28,16 @@
   {#
     Right Tabs
   #}
+
+  <li class="nav-item ml-md-auto">
+    <a href="#revision-history" data-toggle="tab">
+      <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
+    </a>
+  </li>
+
   {% if !isTrashPage() %}
     {% if page.isPortal() %}
-    <li class="nav-main-right-tab dropdown pull-right">
+    <li class="nav-item dropdown">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
@@ -46,7 +53,7 @@
       </ul>
     </li>
     {% else %}
-    <li class="nav-main-right-tab dropdown pull-right">
+    <li class="nav-item dropdown">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
@@ -64,13 +71,8 @@
     {% endif %}
   {% endif %}
 
-  <li class="nav-main-right-tab pull-right">
-    <a href="#revision-history" data-toggle="tab">
-      <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
-    </a>
-  </li>
   {% if not page.isPortal() %}
-    <li class="nav-main-right-tab pull-right">
+    <li class="nav-item">
       <a href="?presentation=1" class="toggle-presentation">
         <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
       </a>
@@ -83,13 +85,13 @@
 
 <ul class="nav nav-tabs nav-tabs-create-portal hidden-print">
 
-  <li class="nav-main-left-tab">
+  <li class="nav-item">
     <a id="portal-form-close" data-toggle="tab" href="#cancel-creating-portal">
       <i class="icon-action-undo"></i> {{ t('Cancel') }}
     </a>
   </li>
 
-  <li class="nav-main-left-tab">
+  <li class="nav-item">
     <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>