Merge pull request #1833 from weseek/support/apply-nav-tabs

Support/apply nav tabs

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

@@ -82,6 +82,11 @@ h6 {
   .dropdown-toggle.btn.disabled {
     cursor: not-allowed;
   }
+
+  // hide caret
+  .dropdown-toggle.dropdown-toggle-no-caret::after {
+    content: none;
+  }
 }
 
 // agile-admin style

src/server/views/widget/page_tabs_kibela.html

@@ -1,21 +1,21 @@
 {% if page %}
-<ul class="nav nav-tabs hidden-print">
+<ul class="nav nav-tabs d-print-none">
 
   {#
     Left Tabs
   #}
-  <li class="nav-item grw-nav-main-left-tab active">
+  <li class="nav-item active">
     <a class="nav-link active" href="#revision-body" data-toggle="tab">
       <i class="icon-control-play"></i> View
     </a>
   </li>
 
   {% if !isTrashPage() %}
-  <li class="grw-nav-main-left-tab nav-tab-edit">
+  <li class="nav-item nav-tab-edit">
     <a
-      {% if user %} href="#edit" data-toggle="tab" class="edit-button" {% endif %}
+      {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
       {% if not user %}
-        class="edit-button edit-button-disabled"
+        class="nav-link edit-button edit-button-disabled"
         data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
       {% endif %}
     >
@@ -23,11 +23,11 @@
     </a>
   </li>
   {% if isHackmdSetup() %}
-  <li class="grw-nav-main-left-tab nav-tab-hackmd">
+  <li class="nav-item nav-tab-hackmd">
     <a
-      {% if user %} href="#hackmd" data-toggle="tab" class="edit-button" {% endif %}
+      {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
       {% if not user %}
-        class="edit-button edit-button-disabled"
+        class="nav-link edit-button edit-button-disabled"
         data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
       {% endif %}
     >
@@ -40,77 +40,85 @@
   {#
     Right Tabs
   #}
+  {# to place right side #}
+  <div class="mr-auto"></div>
+
+  {% if not page.isPortal() %}
+  <li class="nav-item">
+    <a href="?presentation=1" class="nav-link toggle-presentation">
+      <i class="icon-film"></i><span class="d-none d-sm-inline"> {{ t('Presentation Mode') }}</span>
+    </a>
+  </li>
+  {% endif %}
+
+  <li class="nav-item">
+    <a href="#revision-history" class="nav-link" data-toggle="tab">
+      <i class="icon-layers"></i><span class="d-none d-sm-inline"> {{ t('History') }}</span>
+    </a>
+  </li>
+  
   {% if !isTrashPage() %}
     {% if page.isPortal() %}
-    <li class="float-right dropdown">
+    <li class="nav-item dropdown">
       <a
-        {% if user %} role="button" class="dropdown-toggle" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
         {% if not user %}
-          class="dropdown-toggle dropdown-toggle-disabled"
+          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
         {% endif %}
       >
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu">
-        <li><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a></li>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li class="dropdown-item">
+          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
+        </li>
         {% if ('/' !== path) %}
-        <li class="divider"></li>
-        <li><a href="#" data-target="#unportalize" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Unportalize') }}</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#" data-target="#unportalize" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Unportalize') }}</a></li>
         {% endif %}
       </ul>
     </li>
     {% else %}
-    <li class="dropdown float-right">
+    <li class="nav-item dropdown">
       <a
-        {% if user %} role="button" class="dropdown-toggle" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
         {% if not user %}
-          class="dropdown-toggle dropdown-toggle-disabled"
+          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
         {% endif %}
       >
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu">
-        <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a></li>
-        <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
-        <li class="divider"></li>
-        <li><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a></li>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li class="dropdown-item"><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a></li>
+        <li class="dropdown-item"><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item">
+          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
+        </li>
         {% if isDeletablePage() %}
-        <li class="divider"></li>
-        <li><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
         {% endif %}
       </ul>
     </li>
     {% endif %}
   {% endif %}
 
-  <li class="float-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="float-right">
-      <a href="?presentation=1" class="toggle-presentation">
-        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
-      </a>
-    </li>
-  {% endif %}
-
 </ul>
 
 {% else %} {# for creating portal #}
 
-<ul class="nav nav-tabs nav-tabs-create-portal hidden-print">
+<ul class="nav nav-tabs nav-tabs-create-portal d-print-none">
 
-  <li class="nav-item grw-nav-main-left-tab">
+  <li class="nav-item ">
     <a id="portal-form-close" class="nav-link" href="#" data-toggle="tab">
       <i class="icon-action-undo"></i> {{ t('Cancel') }}
     </a>
   </li>
 
-  <li class="nav-item grw-nav-main-left-tab active">
+  <li class="nav-item  active">
     <a class="nav-link">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>