fix header structure

src/client/styles/scss/_admin.scss

@@ -1,4 +1,13 @@
 .admin-page {
+  .admin-title {
+    padding: 0.5rem 15px;
+
+    line-height: 1em;
+
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
+
   .admin-user-menu {
     .dropdown-menu {
       right: 0;

src/client/styles/scss/_layout.scss

@@ -48,35 +48,14 @@
 }
 
 /*
-  * header
-  */
-.grw-subnav {
-  overflow: unset;
-}
+ * header
+ */
 
 .grw-modal-head {
   font-size: 1em;
   border-bottom: 1px solid $grw-line-gray;
 }
 
-header#page-header {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-
-  line-height: 1em;
-  // the container of h1
-  div.title-container {
-    padding-right: 5px;
-    padding-left: 5px;
-    margin-right: auto;
-  }
-
-  h1 {
-    @include variable-font-size(28px);
-    line-height: 1.1em;
-  }
-}
-
 .main {
   margin-top: 1rem;
 }

src/client/styles/scss/_layout_kibela.scss

@@ -221,7 +221,7 @@ body.kibela {
 
     .card-footer {
       background: white;
-      border-top: 1px solid $border
+      border-top: 1px solid $border;
     }
   }
 

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

@@ -97,7 +97,7 @@ body.on-edit {
 
     background: none;
 
-    > .grw-title-bar {
+    > .grw-subnav-container {
       width: 100%; //   for crowi layout
       padding: 0; //    for crowi layout
       pointer-events: initial; // enable pointer-events

src/client/styles/scss/_page_header.scss

@@ -1,10 +0,0 @@
-#page-header {
-  &:hover {
-    .btn-copy,
-    .btn-edit,
-    .btn-edit-tags {
-      // change button opacity
-      opacity: unset;
-    }
-  }
-}

src/client/styles/scss/_subnav.scss

@@ -0,0 +1,19 @@
+.grw-subnav-container {
+  h1 {
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
+
+  &:hover {
+    .btn-copy,
+    .btn-edit,
+    .btn-edit-tags {
+      // change button opacity
+      opacity: unset;
+    }
+  }
+}
+
+.grw-subnav {
+  overflow: unset;
+}

src/client/styles/scss/style-app.scss

@@ -47,10 +47,10 @@
 @import 'on-edit';
 @import 'page_list';
 @import 'page';
-@import 'page_header';
 @import 'page_growi';
 @import 'search';
 @import 'shortcuts';
+@import 'subnav';
 @import 'tag';
 @import 'user';
 @import 'user_growi';

src/client/styles/scss/theme/_apply-colors.scss

@@ -85,8 +85,10 @@ $link-hover-color: $color-link-hover;
   }
 }
 
-.grw-title-bar {
-  background: darken($bgcolor-global, 2%);
+body.admin-page {
+  .grw-subnav-container {
+    background: darken($bgcolor-global, 2%);
+  }
 }
 
 .grw-sidebar {

src/server/views/admin/Users_reserve.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User_Management')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('User_Management') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/app.html

@@ -6,11 +6,10 @@
 {% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('App settings') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('App settings') }}</h1>
 {% endblock %}
 
+
 {% block content_main %}
 <div class="content-main admin-app row">
   {% parent %}

src/server/views/admin/customize.html

@@ -13,9 +13,7 @@
 {% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Customize') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Customize') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/export.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Export Archive Data')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Export Archive Data') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Export Archive Data') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/external-accounts.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('external_account_management')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('User_Management') }} / {{ t('external_account_management') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('User_Management') }} / {{ t('external_account_management') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/global-notification-detail.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Notification settings') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/importer.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Import Data')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Import Data') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Import Data') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/index.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Management Wiki Home')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title"> {{ t('Management Wiki Home') }}</h1>
-</header>
+<h1 class="admin-title"> {{ t('Management Wiki Home') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/markdown.html

@@ -4,9 +4,7 @@
  · {{ path }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Markdown Settings') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Markdown Settings') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/notification.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Notification settings') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/search.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Full Text Search management')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('Full Text Search management') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('Full Text Search management') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/security.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('security_settings')) }} · {% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('security_settings') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('security_settings') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/user-group-detail.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management') + '/' + userGroup.name) | preventXss }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('UserGroup Management') + '/' + userGroup.name | preventXss }}</h1>
-</header>
+<h1 class="admin-title">{{ t('UserGroup Management') + '/' + userGroup.name | preventXss }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/user-groups.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('UserGroup Management') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('UserGroup Management') }}</h1>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/users.html

@@ -3,9 +3,7 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User_Management')) }}{% endblock %}
 
 {% block content_header %}
-<header id="page-header">
-  <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
-</header>
+<h1 class="admin-title">{{ t('User_Management') }}</h1>
 {% endblock %}
 
 {% block content_main %}

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

@@ -31,7 +31,7 @@
   </aside>
 
   <div class="row grw-subnav">
-    <div class="col-md-9 grw-title-bar">
+    <div class="col-md-9 grw-subnav-container">
       {% block content_header %}
       {% endblock %}
     </div>

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

@@ -7,13 +7,9 @@
 {% endblock %}
 
 {% block layout_main %}
-<header class="sticky-top py-0" id="page-header">
-  <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
-  {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
-    {% if '/' === path.slice(-1) %}
-      {% include '../../widget/create_portal.html' %}
-    {% endif %}
-  {% endif %}
+<header class="sticky-top py-0 grw-subnav-container">
+  {% block content_header %}
+  {% endblock %}
 </header>
 
 <div class="container-fluid">

src/server/views/layout-growi/widget/header.html

@@ -1,11 +1,7 @@
-<header id="page-header">
+<div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
 
-  <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
-
-    {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
-      {% if '/' === path.slice(-1) %}
-        {% include '../../widget/create_portal.html' %}
-      {% endif %}
-    {% endif %}
-
-</header>
+{% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
+  {% if '/' === path.slice(-1) %}
+    {% include '../../widget/create_portal.html' %}
+  {% endif %}
+{% endif %}

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

@@ -13,7 +13,7 @@
 
     <div id="main" class="main col-12 kibela-block bg-white round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row grw-subnav">
-        <div class="col-12 grw-title-bar">
+        <div class="col-12">
           {% block content_header %} {% endblock %}
         </div>
       </div>

src/server/views/tags.html

@@ -3,7 +3,7 @@
 {% block layout_main %}
 <div class="container-fluid">
   <div class="row grw-subnav">
-    <div class="col-xs-12 grw-title-bar">
+    <div class="col-xs-12 grw-subnav-container">
       {% block content_header %}
       <header id="page-header">
         <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>