Merge branch 'support/apply-bootstrap4' into support/apply-bst4-toppage-tab-fix and fixed confluict.

# Conflicts:
#	src/client/styles/scss/_layout_variable.scss

resource/locales/en-US/welcome.md

@@ -3,9 +3,9 @@
 [![GitHub Releases](https://img.shields.io/github/release/weseek/growi.svg)](https://github.com/weseek/growi/releases/latest)
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Tips</div>
-  <div class="panel-body"><ul>
+<div class="card">
+  <div class="card-header">Tips</div>
+  <div class="card-body"><ul>
     <li>Ctrl(⌘)-/ to show quick help</li>
     <li>You can write HTML with <a href="https://getbootstrap.com/docs/3.3/css/">Bootstrap 3</a>.</li>
   </ul></div>

resource/locales/ja/welcome.md

@@ -3,9 +3,9 @@
 [![GitHub Releases](https://img.shields.io/github/release/weseek/growi.svg)](https://github.com/weseek/growi/releases/latest)
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Tips</div>
-  <div class="panel-body"><ul>
+<div class="card">
+  <div class="card-header">Tips</div>
+  <div class="card-body"><ul>
     <li>Ctrl(⌘)-/ でショートカットヘルプを表示します</li>
       <li>HTML/CSS の記述時は、<a href="https://getbootstrap.com/docs/3.3/css/">Bootstrap 3</a> を利用できます</li>
   </ul></div>

src/client/styles/scss/_layout.scss

@@ -203,3 +203,16 @@ $nav-main-tab-font-size: 16px;
     }
   }
 }
+
+// header widget area
+.grw-title-bar {
+  background: $grw-floral-white;
+}
+
+// bg-title for .row
+.bg-title {
+  padding: 6px 0;
+  margin-right: -15px;
+  margin-left: -15px;
+  overflow: unset;
+}

src/client/styles/scss/_layout_variable.scss

@@ -24,3 +24,6 @@ $grw-alice-blue: aliceblue;
 
 /* gray */
 $grw-line-light-gray: #ddd;
+
+/* white */
+$grw-floral-white: floralwhite;

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

@@ -58,3 +58,12 @@ $input-bg-disabled:              $btn-default-bgcolor;
 
 //** `<input>` border color
 $input-border:                   $border;
+
+//** override bootstrap theme colors
+$theme-colors: (
+  'primary': #337ab7,
+  'success': #2cce90,
+  'info': #31708f,
+  'warning': #8a6d3b,
+  'danger': #ff0a54
+);

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

@@ -0,0 +1,21 @@
+@import 'override-bootstrap-variables';
+//** alert with custom color
+.alert {
+  a:not(.btn) {
+    color: white;
+  }
+}
+@each $theme-color, $color in $theme-colors {
+  .alert.alert-#{$theme-color} {
+    color: white;
+    background: $color;
+    border: initial;
+    border-radius: initial;
+    a:not(.btn) {
+      &:hover,
+      &:focus {
+        color: lighten($color, 30%);
+      }
+    }
+  }
+}

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

@@ -4,6 +4,7 @@
 @import 'mixins';
 
 @import 'override-bootstrap-variables';
+@import 'override-bootstrap';
 
 // vendor
 @import 'vendor';

src/client/styles/scss/theme/_override-agileadmin.scss

@@ -1,11 +1,13 @@
 @import 'layout_variable';
 
+/*
 .bg-title {
   padding: 6px 0;
   margin-right: -15px;
   margin-left: -15px;
   overflow: unset;
 }
+*/
 
 /*
  * Growi original
@@ -82,6 +84,7 @@ a {
 /*
  * Alert
  */
+/*
 .alert {
   a:not(.btn) {
     color: white;
@@ -120,6 +123,7 @@ a {
     }
   }
 }
+*/
 
 /*
  * Form

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-title d-none d-md-block">
-    <div class="col-xs-12 header-container">
-      {% block content_header %}
-      {% endblock %}
-    </div>
-  </div><!-- /.bg-title -->
+  <div class="row bg-title">
+    <div class="col-12 header-container grw-title-bar">
+      <div class="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 mt-2 {% 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,25 +1,27 @@
 <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><!-- /.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>
+      </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="m-r-5" 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 img-circle">
+            <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>
@@ -27,18 +29,18 @@
             </div>
           </div>
           <div class="d-flex align-items-center only-affix">
-            <a class="m-r-5" 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 img-circle">
+            <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>
         </li>
-        <li class="m-t-5">
+        <li class="mt-2">
           <div class="d-flex align-items-center not-affix">
-            <a class="m-r-5" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture img-circle">
+            <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>
@@ -46,15 +48,15 @@
             </div>
           </div>
           <div class="d-flex align-items-center only-affix">
-            <a class="m-r-5" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture picture-xs img-circle">
+            <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>
         </li>
-      </ul>
+      </ul><!-- /.authors -->
       {% endif %}
 
       {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
@@ -62,8 +64,7 @@
           {% include '../../widget/create_portal.html' %}
         {% endif %}
       {% endif %}
-
     </div>
 
   </header>
-</div>
+</div><!-- / .header-wrap -->

src/server/views/layout/layout.html

@@ -78,7 +78,7 @@
   <nav class="navbar navbar-default bg-grw-green mb-0 p-0">
     <div class="navbar-header d-flex w-100">
 
-      <!--1 GROWI logo-->
+      <!-- 1 GROWI logo -->
       <a class="logo d-block top-left-part bg-grw-mos-green my-auto px-3" href="/">
         <div class="logo-mark _white d-inline-block">{% include '../widget/logo.html' %}</div>
         <span class="logo-text mx-3 text-white">
@@ -90,17 +90,17 @@
         </span>
       </a>
 
-      <!--2 side nav open-->
+      <!-- 2 side nav open -->
       <a class="open-close d-none d-md-block mx-3 my-auto waves-effect waves-light">
         <i class="ti-menu text-white"></i>
       </a>
 
-      <!--3 mobile menu touch icon-->
+      <!-- 3 mobile menu touch icon -->
       <a class="navbar-toggle d-md-none my-auto mx-3" href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse">
         <i class="ti-menu text-white"></i>
       </a>
 
-      <!--4 search nav-->
+      <!-- 4 search nav -->
       <ul class="nav navbar-top-links d-none d-md-block bg-grw-light-green ml-3 my-auto text-nowrap">
         {#  disabled temporary -- 2019.05.13 Yuki Takei
         <li class="nav-item-admin">
@@ -116,7 +116,7 @@
         </li>
       </ul>
 
-      <!--5 user action-->
+      <!-- 5 user action -->
       <ul class="nav navbar-top-links flex-nowrap ml-auto my-auto">
         {% if user and user.admin %}
         <li class="nav-item-admin mr-2 mr-lg-3 my-auto">
@@ -163,6 +163,7 @@
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}
 
+  <!-- 6 header widget area -->
   {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
@@ -170,7 +171,7 @@
   <!-- Left navbar-header -->
   <div class="navbar-default sidebar d-print-none" role="navigation">
 
-    <!--6 mobile drop down area-->
+    <!-- 7 mobile drop down area-->
     <div class="sidebar-nav navbar-collapse slimscrollsidebar">
       <ul class="nav" id="side-menu">
         <li class="sidebar-search hidden-sm hidden-md hidden-lg">
@@ -183,12 +184,11 @@
       </ul>
     </div>
 
-
   </div>
   <!-- Left navbar-header end -->
   {% endblock %}
 
-  <!-- Page Content -->
+  <!-- 8 Page Content -->
   <div id="page-wrapper">
     {% block layout_main %}
     {% endblock %} {# layout_main #}

src/server/views/widget/alert_siteurl_undefined.html

@@ -1,5 +1,5 @@
 {% if !getConfig('crowi', 'app:siteUrl') %}
-<div class="myadmin-alert alert alert-danger mb-0">
+<div class="alert alert-danger text-white mb-0 px-4 py-2">
   <i class="icon-exclamation"></i>
   {{ t("security_setting.alert_siteUrl_is_not_set", '<a href="/admin/app">' + t('App settings') + '<i class="icon-login"></i></a>') }}
 </div>

src/server/views/widget/header-buttons-lg.html

@@ -5,7 +5,7 @@
       {% include 'header-button-like.html' with opts %}
     {% endif %}
   </div>
-  <div class="m-l-5">
+  <div class="ml-1">
     {% if user %}
       {% include 'header-button-bookmark.html' with opts %}
     {% endif %}

src/server/views/widget/header-buttons.html

@@ -4,7 +4,7 @@
       {% include 'header-button-like.html' %}
     {% endif %}
   </div>
-  <div class="m-l-5">
+  <div class="ml-1">
     {% if user %}
       {% include 'header-button-bookmark.html' %}
     {% endif %}