Merge pull request #1233 from weseek/support/apply-bst4-underlist-tab-fix

GW-312 リスト表示を上部に揃えてタブ化する:under list tab fixed

src/client/styles/scss/_layout.scss

@@ -174,7 +174,7 @@
 
 // bg-title for .row
 .bg-title {
-  padding: 6px 0;
+  padding: initial;
   margin-right: -15px;
   margin-left: -15px;
   overflow: unset;

src/client/styles/scss/_layout_variable.scss

@@ -32,5 +32,4 @@ $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;
+$nav-main-tab-height: 42px;

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

@@ -21,34 +21,3 @@
     }
   }
 }
-
-//** 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/server/views/widget/page_list_and_timeline.html

@@ -1,8 +1,8 @@
 <div class="page-list-container">
-  <ul class="nav nav-tabs">
-      <li class="active"><a href="#view-list" data-toggle="tab">{{ t('List View') }}</a></li>
+  <ul class="nav nav-tabs" role="tablist">
+      <li class="nav-item"><a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a></li>
       {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <li><a href="#view-timeline" data-toggle="tab">{{ t('Timeline View') }}</a></li>
+      <li class="nav-item"><a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a></li>
       {% endif %}
   </ul>
 

src/server/views/widget/page_list_and_timeline_kibela.html

@@ -1,8 +1,8 @@
 <div class="page-list-container">
-  <ul class="nav nav-tabs customtab">
-      <li class="active"><a href="#view-list" data-toggle="tab">{{ t('List View') }}</a></li>
+  <ul class="nav nav-tabs customtab" role="tablist">
+      <li class="nav-item"><a class="nav-link active" href="#view-list" role="tab" data-toggle="tab">{{ t('List View') }}</a></li>
       {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <li><a href="#view-timeline" data-toggle="tab">{{ t('Timeline View') }}</a></li>
+      <li class="nav-item"><a class="nav-link" href="#view-timeline" role="tab" data-toggle="tab">{{ t('Timeline View') }}</a></li>
       {% endif %}
   </ul>
 

src/server/views/widget/page_tabs.html

@@ -1,24 +1,24 @@
 {% if page %}
-<ul class="nav nav-tabs hidden-print">
+<ul class="nav nav-tabs hidden-print" role="tablist">
 
   {#
     Left Tabs
   #}
-  <li class="nav-item active">
-    <a href="#revision-body" data-toggle="tab">
+  <li class="nav-item">
+    <a href="#revision-body" class="nav-link active" role="tab" data-toggle="tab">
       <i class="icon-control-play"></i> View
     </a>
   </li>
 
   {% if !isTrashPage() %}
   <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 %}">
+    <a {% if user %}href="#edit" role="tab" data-toggle="tab" {% endif %} class="nav-link edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>
   </li>
   {% if isHackmdSetup() %}
   <li class="nav-item nav-tab-hackmd">
-    <a {% if user %}href="#hackmd" data-toggle="tab"{% endif %} class="{% if not user %}edit-button-disabled{% endif %}">
+    <a {% if user %}href="#hackmd" role="tab" data-toggle="tab" {% endif %} class="nav-link {% if not user %}edit-button-disabled{% endif %}">
       <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
     </a>
   </li>
@@ -30,7 +30,7 @@
   #}
 
   <li class="nav-item ml-md-auto">
-    <a href="#revision-history" data-toggle="tab">
+    <a href="#revision-history" role="tab" data-toggle="tab" class="nav-link">
       <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
     </a>
   </li>
@@ -38,7 +38,7 @@
   {% if !isTrashPage() %}
     {% if page.isPortal() %}
     <li class="nav-item dropdown">
-      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
+      <a class="nav-link dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
       <ul class="dropdown-menu">
@@ -54,7 +54,7 @@
     </li>
     {% else %}
     <li class="nav-item dropdown">
-      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
+      <a class="nav-link dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
       <ul class="dropdown-menu">
@@ -73,7 +73,7 @@
 
   {% if not page.isPortal() %}
     <li class="nav-item">
-      <a href="?presentation=1" class="toggle-presentation">
+      <a href="?presentation=1" class="nav-link toggle-presentation">
         <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
       </a>
     </li>
@@ -83,16 +83,16 @@
 
 {% else %} {# for creating portal #}
 
-<ul class="nav nav-tabs nav-tabs-create-portal hidden-print">
+<ul class="nav nav-tabs nav-tabs-create-portal hidden-print" role="tablist">
 
   <li class="nav-item">
-    <a id="portal-form-close" data-toggle="tab" href="#cancel-creating-portal">
+    <a id="portal-form-close" role="tab" data-toggle="tab" class="nav-link" href="#cancel-creating-portal">
       <i class="icon-action-undo"></i> {{ t('Cancel') }}
     </a>
   </li>
 
   <li class="nav-item">
-    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+    <a {% if user %}href="#edit" role="tab" data-toggle="tab" {% endif %} class="nav-link edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>