remove .header-wrap

src/client/styles/scss/_layout.scss

@@ -44,37 +44,21 @@
   border-bottom: 1px solid $grw-line-gray;
 }
 
-.header-wrap {
+header {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 
-  header {
-    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;
-    }
-
-    // affix
-    &.affix {
-      top: 0;
-      left: 0;
-      z-index: 15; // over the .sidebar
-      width: 100%;
-      padding: 2px 20px;
-      box-shadow: 0 0px 2px #999;
+  line-height: 1em;
+  // the container of h1
+  div.title-container {
+    padding-right: 5px;
+    padding-left: 5px;
+    margin-right: auto;
+  }
 
-      h1 {
-        @include variable-font-size(20px);
-      }
-    }
+  h1 {
+    @include variable-font-size(28px);
+    line-height: 1.1em;
   }
 }
 

src/client/styles/scss/_layout_kibela.scss

@@ -160,12 +160,6 @@ body.kibela {
     }
   }
 
-  /* user page */
-  .header-wrap {
-    padding: 0px;
-    margin-left: 2em;
-  }
-
   /* edit */
   .CodeMirror {
     border: solid 1.2px #d8d8d8;

src/client/styles/scss/_page.scss

@@ -2,8 +2,6 @@
 @import '~diff2html/bundles/css/diff2html.min.css';
 
 .main-container {
-  // padding controll of .header-wrap and .content-main are moved to _layout and _form
-
   .url-line {
     font-size: 1rem;
     color: #999;
@@ -48,7 +46,6 @@
 .main .content-main .revision-history {
   .revision-history-list {
     .revision-history-outer {
-
       // add border-top except of first element
       &:not(:first-of-type) {
         border-top: 1px solid $border;

src/server/views/admin/Users_reserve.html

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

src/server/views/admin/app.html

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

src/server/views/admin/customize.html

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

src/server/views/admin/export.html

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

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

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

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

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

src/server/views/admin/importer.html

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

src/server/views/admin/index.html

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

src/server/views/admin/markdown.html

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

src/server/views/admin/notification.html

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

src/server/views/admin/search.html

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

src/server/views/admin/security.html

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

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

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

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

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

src/server/views/admin/users.html

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

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -6,19 +6,17 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
-      <div class="d-flex align-items-center">
-        <div class="title-container">
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
-        {% include '../widget/header-buttons.html' %}
+  <header id="page-header">
+    <div class="d-flex align-items-center">
+      <div class="title-container">
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-    </header>
-  </div>
+      {% include '../widget/header-buttons.html' %}
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -11,21 +11,19 @@
 {% block content_header_before %}
 {% endblock %}
 
-<div class="header-wrap">
-  <header id="page-header" class="{% if page %}has-page{% endif %}">
-
-    <div class="d-flex align-items-center">
-      <div class="title-container">
-        <h1 class="title" id="revision-path"></h1>
-        {% if page and not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-      {% include '../widget/header-buttons.html' %}
+<header id="page-header" class="{% if page %}has-page{% endif %}">
+
+  <div class="d-flex align-items-center">
+    <div class="title-container">
+      <h1 class="title" id="revision-path"></h1>
+      {% if page and not forbidden and not isTrashPage() %}
+        <div id="tag-label"></div>
+      {% endif %}
     </div>
+    {% include '../widget/header-buttons.html' %}
+  </div>
 
-  </header>
-</div>
+</header>
 
 {% endblock %}
 

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

@@ -1,70 +1,68 @@
-<div class="header-wrap">
-  <header id="page-header" class="sps sps--abv">
+<header id="page-header">
 
-    <div class="d-flex align-items-center">
-      <div class="title-logo-container hidden-xs hidden-sm">
-        <a class="logo" href="/">
-          <div class="logo-mark">{% include '../../widget/logo.html' %}</div>
-        </a>
-      </div><!-- /.title-logo-container -->
+  <div class="d-flex align-items-center">
+    <div class="title-logo-container hidden-xs hidden-sm">
+      <a class="logo" href="/">
+        <div class="logo-mark">{% include '../../widget/logo.html' %}</div>
+      </a>
+    </div><!-- /.title-logo-container -->
 
-      <div class="title-container mr-auto">
-        <h1 class="title" id="revision-path"></h1>
-        {% if not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div><!-- /.title-container -->
-      {% if page %}
-      {% include '../../widget/header-buttons.html' %}
+    <div class="title-container mr-auto">
+      <h1 class="title" id="revision-path"></h1>
+      {% if not forbidden and not isTrashPage() %}
+        <div id="tag-label"></div>
+      {% endif %}
+    </div><!-- /.title-container -->
+    {% if page %}
+    {% include '../../widget/header-buttons.html' %}
 
-      <ul class="authors hidden-sm hidden-xs text-nowrap">
-        <li>
-          <div class="d-flex align-items-center not-affix">
-            <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
-              <img src="{{ page.creator|default(author)|picture }}" class="picture rounded-circle">
-            </a>
-            <div>
-              <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
-              <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
-            </div>
+    <ul class="authors hidden-sm hidden-xs text-nowrap">
+      <li>
+        <div class="d-flex align-items-center not-affix">
+          <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
+            <img src="{{ page.creator|default(author)|picture }}" class="picture rounded-circle">
+          </a>
+          <div>
+            <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
+            <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
           </div>
-          <div class="d-flex align-items-center only-affix">
-            <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
-              <img src="{{ page.creator|default(author)|picture }}" class="picture picture-xs rounded-circle">
-            </a>
-            <div class="ml-auto">
-              <div>Created in <span class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</span></div>
-            </div>
+        </div>
+        <div class="d-flex align-items-center only-affix">
+          <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
+            <img src="{{ page.creator|default(author)|picture }}" class="picture picture-xs rounded-circle">
+          </a>
+          <div class="ml-auto">
+            <div>Created in <span class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</span></div>
           </div>
-        </li>
-        <li class="mt-1">
-          <div class="d-flex align-items-center not-affix">
-            <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture rounded-circle">
-            </a>
-            <div>
-              <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ author.name }}</a></div>
-              <div class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
-            </div>
+        </div>
+      </li>
+      <li class="mt-1">
+        <div class="d-flex align-items-center not-affix">
+          <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
+            <img src="{{ author|picture }}" class="picture rounded-circle">
+          </a>
+          <div>
+            <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ author.name }}</a></div>
+            <div class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
           </div>
-          <div class="d-flex align-items-center only-affix">
-            <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture picture-xs rounded-circle">
-            </a>
-            <div class="ml-auto">
-              <div>Updated in <span class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</span></div>
-            </div>
+        </div>
+        <div class="d-flex align-items-center only-affix">
+          <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
+            <img src="{{ author|picture }}" class="picture picture-xs rounded-circle">
+          </a>
+          <div class="ml-auto">
+            <div>Updated in <span class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</span></div>
           </div>
-        </li>
-      </ul><!-- /.authors -->
-      {% endif %}
+        </div>
+      </li>
+    </ul><!-- /.authors -->
+    {% endif %}
 
-      {% 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 %}
+    {% 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 %}
-    </div>
+    {% endif %}
+  </div>
 
-  </header>
-</div><!-- / .header-wrap -->
+</header>

src/server/views/me/api_token.html

@@ -5,11 +5,9 @@
 
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
+<header id="page-header">
   <h1 id="admin-title" class="title">{{ t('API Settings') }}</h1>
-  </header>
-</div>
+</header>
 {% endblock %}
 
 {% block content_main %}

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

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('user_management.external_account')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('user_management.external_account') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('user_management.external_account') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/me/index.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User Settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('User Settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('User Settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/me/password.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Password Settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('Password Settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('Password Settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/tags.html

@@ -5,11 +5,9 @@
   <div class="row grw-subnav">
     <div class="col-xs-12 grw-title-bar">
       {% block content_header %}
-      <div class="header-wrap">
-        <header id="page-header">
-          <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>
-        </header>
-      </div>
+      <header id="page-header">
+        <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>
+      </header>
       {% endblock %}
     </div>
   </div>

src/server/views/widget/user_page_header.html

@@ -1,36 +1,34 @@
-<div class="header-wrap">
-  <header id="page-header" class="user-page-header">
+<header id="page-header" class="user-page-header">
 
-    <h4 id="revision-path"></h4>
+  <h4 id="revision-path"></h4>
 
-    <div class="users-info d-flex align-items-center">
-      <img src="{{ pageUser|picture }}" class="picture rounded-circle">
-      <div class="users-meta" style="flex: 1;">
-        <div class="d-flex align-items-center">
-          <h1>
-            {{ pageUser.name }}
-          </h1>
-        </div>
-        <div class="user-page-meta">
-          <ul>
-            <li class="user-page-username"><i class="icon-user"></i> {{ pageUser.username }}</li>
-            <li class="user-page-email">
-              <i class="icon-envelope"></i>
-              {% if pageUser.isEmailPublished %}
-                {{ pageUser.email }}
-              {% else %}
-                *****
-              {% endif %}
-            </li>
-            {% if pageUser.introduction %}
-            <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
-            {% endif %}
-          </ul>
-        </div>
+  <div class="users-info d-flex align-items-center">
+    <img src="{{ pageUser|picture }}" class="picture rounded-circle">
+    <div class="users-meta" style="flex: 1;">
+      <div class="d-flex align-items-center">
+        <h1>
+          {{ pageUser.name }}
+        </h1>
       </div>
-      <div class="d-flex">
-        {% include 'header-buttons-lg.html' %}
+      <div class="user-page-meta">
+        <ul>
+          <li class="user-page-username"><i class="icon-user"></i> {{ pageUser.username }}</li>
+          <li class="user-page-email">
+            <i class="icon-envelope"></i>
+            {% if pageUser.isEmailPublished %}
+              {{ pageUser.email }}
+            {% else %}
+              *****
+            {% endif %}
+          </li>
+          {% if pageUser.introduction %}
+          <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
+          {% endif %}
+        </ul>
       </div>
     </div>
-  </header>
-</div>
+    <div class="d-flex">
+      {% include 'header-buttons-lg.html' %}
+    </div>
+  </div>
+</header>