FB fixed

src/client/styles/scss/_alert.scss

@@ -0,0 +1,5 @@
+.alert-danger {
+  background: $danger;
+  border: none;
+  border-radius: initial;
+}

src/client/styles/scss/_layout.scss

@@ -182,9 +182,7 @@ $nav-main-left-tab-width: 95px;
   }
 }
 
-// header widget area // TODO SCSS MOVE?
-.alert-danger {
-  background: $danger;
-  border: none;
-  border-radius: initial;
+// header widget area
+.grw-title-bar {
+  background: $grw-floral-white;
 }

src/client/styles/scss/_layout_variable.scss

@@ -23,7 +23,3 @@ $grw-alice-blue: aliceblue;
 
 /* white */
 $grw-floral-white: floralwhite;
-
-.bg-grw-floral-white {
-  background: $grw-floral-white;
-}

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

@@ -37,6 +37,7 @@
 @import 'page';
 @import 'page_growi';
 @import 'search';
+@import 'alert';
 @import 'shortcuts';
 @import 'user';
 @import 'user_growi';

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

@@ -8,12 +8,14 @@
 {% block layout_main %}
 <div class="container-fluid">
 
-  <div class="row hidden-print bg-grw-floral-white d-none d-md-block px-3 py-2">
-    <div class="col-xs-12 header-container">
-      {% block content_header %}
-      {% endblock %}
-    </div>
-  </div><!-- /.bg-title -->
+  <div class="row">
+    <div class="col-12">
+      <div class="grw-title-bar d-none d-md-block d-print-none py-2">
+        {% block content_header %}
+        {% endblock %}
+      </div>
+    </div><!-- /.grw-title-bar -->
+  </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 %}">
@@ -25,9 +27,8 @@
 
       {% block content_main_after %}
       {% endblock %}
-    </div>
-
-  </div>
+    </div><!-- /.main -->
+  </div><!-- /.row -->
 
 </div><!-- /.container-fluid -->
 

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

@@ -1,69 +1,68 @@
 <div class="header-wrap">
-  <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>
-      <div class="title-container">
-        <h1 class="title" id="revision-path"></h1>
-        {% if not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-      {% if page %}
-      {% include '../../widget/header-buttons.html' %}
+  <header id="page-header" class="d-flex align-items-center">
 
-      <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="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">
+      <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>
-          <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-2">
-          <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-2">
+        <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>
-      {% 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 %}
 
   </header>
-</div>
+</div><!-- / .header-wrap -->