Merge branch 'dev/4.0.x' into imprv/gw-2551-island-theme

resource/locales/en-US/sandbox.md

@@ -252,12 +252,12 @@ This is the most flexible linker.
 Both the page description and link address can be displayed on the page.
 
 ```
-[[./Bootstrap3]]
-Example of Bootstrap3 is[[here>./Bootstrap3]]
+[[./Bootstrap4]]
+Example of Bootstrap4 is[[here>./Bootstrap4]]
 ```
 
 [[../user]]
-Example of Bootstrap3 is[[here>./Bootstrap3]]
+Example of Bootstrap4 is[[here>./Bootstrap4]]
 
 # :pencil: Lists
 
@@ -449,8 +449,8 @@ See [emojione](https://www.emojione.com/)
 
 # :heavy_plus_sign: More..
 
-- Try to attach Bootstrap3 Tags?
-    - :arrow_right: [/Sandbox/Bootstrap3]
+- Try to attach Bootstrap4 Tags?
+    - :arrow_right: [/Sandbox/Bootstrap4]
 - Try to draw Diagrams?
     - :arrow_right: [/Sandbox/Diagrams]
 - Try to write Math Formulas?

resource/locales/ja/sandbox.md

@@ -251,12 +251,12 @@ ___
 記述中のページを基点とした相対リンクと、表示テキストに対するリンクを同時に実現できます。
 
 ```
-[[./Bootstrap3]]
-Bootstrap3のExampleは[[こちら>./Bootstrap3]]
+[[./Bootstrap4]]
+Bootstrap4のExampleは[[こちら>./Bootstrap4]]
 ```
 
 [[../user]]
-Bootstrap3のExampleは[[こちら>./Bootstrap3]]
+Bootstrap4のExampleは[[こちら>./Bootstrap4]]
 
 # :pencil: Lists
 
@@ -449,8 +449,8 @@ See [emojione](https://www.emojione.com/)
 
 # :heavy_plus_sign: 更に…
 
-- Bootstrap3 のタグを使う
-    - :arrow_right: [/Sandbox/Bootstrap3]
+- Bootstrap4 のタグを使う
+    - :arrow_right: [/Sandbox/Bootstrap4]
 - 図表を書く
     - :arrow_right: [/Sandbox/Diagrams]
 - 数式を書く

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -75,7 +75,7 @@ class XssForm extends React.Component {
               />
               <label className="custom-control-label w-100" htmlFor="xssOption2">
                 <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-                <div className="m-t-15">
+                <div className="mt-4">
                   <div className="d-flex justify-content-between">
                     {t('admin:markdown_setting.xss_options.tag_names')}
                   </div>
@@ -88,7 +88,7 @@ class XssForm extends React.Component {
                     defaultValue={tags}
                   />
                 </div>
-                <div className="m-t-15">
+                <div className="mt-4">
                   <div className="d-flex justify-content-between">
                     {t('admin:markdown_setting.xss_options.tag_attributes')}
                   </div>

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -111,7 +111,7 @@ class ManageGlobalNotification extends React.Component {
 
 
         <div className="row">
-          <div className="m-t-20 form-box col-md-12">
+          <div className="form-box col-md-12">
             <h2 className="border-bottom mb-5">{t('notification_setting.notification_detail')}</h2>
           </div>
 

src/client/js/components/Admin/Security/SecurityManagement.jsx

@@ -58,7 +58,7 @@ class SecurityManagement extends React.Component {
           </div>
         </div>
 
-        <div className="auth-mechanism-configurations m-t-10">
+        <div className="auth-mechanism-configurations">
           <h2 className="border-bottom">{t('security_setting.Authentication mechanism settings')}</h2>
           <Nav tabs>
             <NavItem>

src/client/js/components/Admin/UserManagement.jsx

@@ -160,10 +160,11 @@ class UserManagement extends React.Component {
         <div className="border-top border-bottom">
 
           <div className="row d-flex justify-content-start align-items-center my-2">
-            <div className="col-md-4 d-flex align-items-center my-2">
+            <div className="col-md-3 d-flex align-items-center my-2">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
+                  className="w-100"
                   type="text"
                   ref={(searchUserElement) => { this.searchUserElement = searchUserElement }}
                   onChange={this.handleChangeSearchText}
@@ -172,7 +173,7 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="col-md-6 my-2">
+            <div className="offset-md-1 col-md-6 my-2">
               <div className="form-inline">
                 {this.renderCheckbox('all', 'All', 'secondary')}
                 {this.renderCheckbox('registered', 'Approval Pending', 'info')}

src/client/js/components/Me/PasswordSettings.jsx

@@ -67,7 +67,7 @@ class PasswordSettings extends React.Component {
 
     return (
       <React.Fragment>
-        {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning m-t-10">{ t('Password is not set') }</div>}
+        {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning">{ t('Password is not set') }</div>}
         <div className="container-fluid my-4">
           {(personalContainer.state.isPasswordSet)
             ? <h2 className="border-bottom">{t('personal_settings.update_password')}</h2>

src/client/js/components/Me/PersonalSettings.jsx

@@ -15,38 +15,36 @@ class PersonalSettings extends React.Component {
 
     return (
       <Fragment>
-        <div className="m-t-10">
-          <div className="personal-settings">
-            <ul className="nav nav-tabs" role="tablist">
-              <li className="nav-item">
-                <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab"><i className="icon-user"></i> { t('User Information') }</a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
-                  <i className="icon-share-alt mr-1"></i>
-                  { t('admin:user_management.external_accounts') }
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab"><i className="icon-lock"></i> { t('Password Settings') }</a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab"><i className="icon-paper-plane"></i> { t('API Settings') }</a>
-              </li>
-            </ul>
-            <div className="tab-content p-t-10">
-              <div id="user-settings" className="tab-pane active" role="tabpanel">
-                <UserSettings />
-              </div>
-              <div id="external-accounts" className="tab-pane" role="tabpanel">
-                <ExternalAccountLinkedMe />
-              </div>
-              <div id="password-settings" className="tab-pane" role="tabpanel">
-                <PasswordSettings />
-              </div>
-              <div id="apiToken" className="tab-pane" role="tabpanel">
-                <ApiSettings />
-              </div>
+        <div className="personal-settings">
+          <ul className="nav nav-tabs" role="tablist">
+            <li className="nav-item">
+              <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab"><i className="icon-user"></i> { t('User Information') }</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
+                <i className="icon-share-alt mr-1"></i>
+                { t('admin:user_management.external_accounts') }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab"><i className="icon-lock"></i> { t('Password Settings') }</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab"><i className="icon-paper-plane"></i> { t('API Settings') }</a>
+            </li>
+          </ul>
+          <div className="tab-content p-t-10">
+            <div id="user-settings" className="tab-pane active" role="tabpanel">
+              <UserSettings />
+            </div>
+            <div id="external-accounts" className="tab-pane" role="tabpanel">
+              <ExternalAccountLinkedMe />
+            </div>
+            <div id="password-settings" className="tab-pane" role="tabpanel">
+              <PasswordSettings />
+            </div>
+            <div id="apiToken" className="tab-pane" role="tabpanel">
+              <ApiSettings />
             </div>
           </div>
         </div>

src/client/js/components/PageDeleteModal.jsx

@@ -125,7 +125,7 @@ const PageDeleteModal = (props) => {
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} linkPath={path} />
-        <button type="button" className={`m-l-10 btn btn-${deleteIconAndKey[deleteMode].color}`} onClick={deleteButtonHandler}>
+        <button type="button" className={`btn btn-${deleteIconAndKey[deleteMode].color}`} onClick={deleteButtonHandler}>
           <i className={`icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
           { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
         </button>

src/client/js/components/PageHistory/Revision.jsx

@@ -16,7 +16,8 @@ export default class Revision extends React.Component {
   componentDidMount() {
   }
 
-  _onDiffOpenClicked() {
+  _onDiffOpenClicked(e) {
+    e.preventDefault();
     this.props.onDiffOpenClicked(this.props.revision);
   }
 
@@ -35,7 +36,7 @@ export default class Revision extends React.Component {
         <div className="picture-container">
           {pic}
         </div>
-        <div className="m-l-10">
+        <div className="ml-3">
           <div className="revision-history-meta">
             <span className="text-muted small">
               <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
@@ -56,13 +57,13 @@ export default class Revision extends React.Component {
       pic = <UserPicture user={author} size="lg" />;
     }
 
-    const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
+    const iconClass = this.props.revisionDiffOpened ? 'fa fa-caret-down caret caret-opened' : 'fa fa-caret-down caret';
     return (
       <div className="revision-history-main d-flex mt-3">
         <div className="mt-2">
           {pic}
         </div>
-        <div className="m-l-10">
+        <div className="ml-2">
           <div className="revision-history-author">
             <strong><Username user={author}></Username></strong>
           </div>
@@ -77,13 +78,14 @@ export default class Revision extends React.Component {
                 }
                 { this.props.hasDiff
                   && (
-                  <a className="diff-view" onClick={this._onDiffOpenClicked}>
-                    <i className={iconClass}></i> { t('View diff') }
+                  // use dummy href attr (with preventDefault()), because don't apply style by a:not([href])
+                  <a className="diff-view" href="" onClick={this._onDiffOpenClicked}>
+                    <i className={iconClass}></i> {t('View diff')}
                   </a>
                   )
                 }
               </span>
-              <a href={`?revision=${revision._id}`} className="m-l-10">
+              <a href={`?revision=${revision._id}`} className="ml-2">
                 <i className="icon-login"></i> { t('Go to this version') }
               </a>
             </p>

src/client/styles/scss/_search.scss

@@ -20,7 +20,7 @@
 
   .search-clear {
     position: absolute;
-    top: 4px;
+    top: 5px;
     right: 4px;
     z-index: 3;
     width: 24px;

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

@@ -124,6 +124,14 @@ ul.pagination {
   background-color: $bgcolor-subnabvar;
 }
 
+// Search drop down
+#search-typeahead-asynctypeahead {
+  background-color: $bgcolor-global;
+  .table {
+    background-color: transparent;
+  }
+}
+
 /*
  * GROWI on-edit
  */

src/client/styles/scss/theme/antarctic.scss

@@ -120,6 +120,13 @@ html[dark] {
   .table {
     background-color: $themelight;
   }
+
+  #search-typeahead-asynctypeahead {
+    background-color: $bgcolor-global;
+    .table {
+      background-color: transparent;
+    }
+  }
 }
 
 //== Dark Mode

src/client/styles/scss/theme/christmas.scss

@@ -12,18 +12,17 @@
 // $danger: #;
 // $light: #;
 // $dark: #;
+
 $themecolor: #b3000c;
 $themelight: white;
-
-$subthemecolor: #017e20;
+$subthemecolor: #30882c;
 $bgcolor-global: $themelight;
-$linktext: lighten(#0d5901, 5%);
-$linktext-hover: lighten($linktext, 12%);
+$linktext: $subthemecolor;
+$linktext-hover: lighten($subthemecolor, 15%);
 $sidebar-text: #ffffff;
 $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%);
-$color-link-wiki: lighten($themecolor, 5%);
+$color-link-wiki: lighten($subthemecolor, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$active-nav-tabs-bgcolor: white;
 
 .growi:not(.login-page) {
   // add background-image
@@ -40,15 +39,16 @@ $active-nav-tabs-bgcolor: white;
 //
 html[light],
 html[dark] {
+  $primary: #d3c665;
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
-  $color-global: $subthemecolor;
-  $color-reversal: #eeeeee;
-  $color-link: lighten($color-global, 2%);
-  $color-link-hover: lighten($color-link, 20%);
+  $color-global: #112744;
+  $color-reversal: #eee;
+  $color-link: $subthemecolor;
+  $color-link-hover: lighten($color-link, 10%);
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e; // optional
 
@@ -61,16 +61,27 @@ html[dark] {
 
   // Navbar
   $bgcolor-navbar: $themecolor;
+  $bgcolor-search-top-dropdown: $primary;
   $border-color-navbar-gradient-left: #545fff;
   $border-color-navbar-gradient-right: #00a6e5;
+  $border-image-navbar: linear-gradient(to right, #6458bc 33%, #5cb4ff 66%, #85d800 100%);
 
   // Logo colors
   $bgcolor-logo: $themecolor;
 
   // Sidebar
-  $bgcolor-sidebar: $themecolor;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($themecolor, 10%);
+  $bgcolor-sidebar: $subthemecolor;
+  $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: $primary;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  $color-sidebar-context: $linktext;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -80,9 +91,9 @@ html[dark] {
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  $bgcolor-dropdown-link-active: $growi-blue;
-  $color-dropdown-link-active: $color-reversal;
-  $color-dropdown-link-hover: $color-global;
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-global;
+  $color-dropdown-link-hover: $color-reversal;
 
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
@@ -124,19 +135,6 @@ html[dark] {
     background-size: cover;
   }
 
-  /*
-  * Tabs
-  */
-  body:not(.on-edit) .nav.nav-tabs {
-    > li.active > a {
-      background: linear-gradient(
-        rgba($active-nav-tabs-bgcolor, 0) 0%,
-        rgba($active-nav-tabs-bgcolor, 0) 90%,
-        $active-nav-tabs-bgcolor 100%
-      ); // overwrite only the bottom pixel
-    }
-  }
-
   // login page
   .nologin {
     .input-group {
@@ -193,28 +191,5 @@ html[dark] {
 
   .grw-navbar {
     background-image: url('/images/themes/christmas/christmas-navbar.jpg');
-    border-bottom: 4px solid $subthemecolor;
-  }
-
-  .grw-subnav {
-    background-color: #ffffff;
-  }
-
-  .nav-tabs {
-    border-bottom-color: $themecolor;
-  }
-
-  .nav-link {
-    border-color: $themecolor;
-  }
-
-  .nav-tabs .nav-link.active {
-    background: none;
-    border-color: $themecolor;
-  }
-
-  .search-top .dropdown-toggle {
-    color: black;
-    background-color: hsla(0, 0%, 100%, 0.8);
   }
 }

src/client/styles/scss/theme/future.scss

@@ -1,12 +1,9 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
+$primary: #00b5b7;
 $themecolor: #16282d;
-$themelight: rgba(11, 79, 104, 0.616);
-$accentcolor: #66eddf;
-
-$primary: $themelight;
-$dark: darken($themecolor, 5%);
+$accentcolor: #00fff5;
 
 html[light],
 html[dark] {
@@ -16,16 +13,16 @@ html[dark] {
   $bgcolor-card: darken($themecolor, 5%);
 
   // Font colors
-  $color-global: lighten($themecolor, 35%);
-  $color-reversal: #eeeeee;
-  $color-header: #d9a364;
-  $color-link: lighten($primary, 20%);
+  $color-global: #95abba;
+  $color-reversal: $accentcolor;
+  $color-header: #95abba;
+  $color-link: $accentcolor;
   $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: darken($themecolor, 5%);
+  $color-link-wiki: $accentcolor;
   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: #a7a7a7;
   $color-inline-code: #c7254e; // optional
-  $color-search: #050a0b;
+  $color-search: $primary;
 
   // List Group colors
   $color-list: $color-global;
@@ -35,18 +32,31 @@ html[dark] {
   $color-list-hover: $color-reversal;
 
   // Navbar
-  $bgcolor-navbar: #011414;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-navbar: #01181a;
+  $bgcolor-search-top-dropdown: #00c2c4;
+  $border-image-navbar: linear-gradient(90deg, #6cfff9 0%, #0034c1 45%, #6cfff9 100%);
 
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
-  $fillcolor-logo-mark: lighten($accentcolor, 15%);
+  $fillcolor-logo-mark: #dedede;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+  $bgcolor-sidebar: #052e2f;
+  $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional
+
+  // Sidebar contents
+  $color-sidebar-context: #00c2c4;
+  $bgcolor-sidebar-context: #020b0b;
+
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #162126; // optional
+
+  // Sidebar resize button
+  $color-resize-button: #0E2329;
+  $bgcolor-resize-button: #00C2C4;
+  $color-resize-button-hover: #0E2329;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -79,31 +89,8 @@ html[dark] {
     }
   }
 
-  // Navs {
-  .nav-tabs {
-    border-bottom: $border-color-theme 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: darken($border-color-theme, 10%);
-        border-bottom: none;
-      }
-      &.active {
-        color: $color-link;
-        background-color: transparent;
-        border-color: $border-color-theme;
-      }
-    }
-  }
-
-  // Search Top
-  .search-top {
-    .input-group-prepend .dropdown-toggle {
-      color: #5193a5;
-      background-color: $color-search;
-      border-color: $color-search;
-      &:hover {
-        background-color: darken($color-search, 10%);
-      }
-    }
+  pre {
+    color: #95abba;
+    background-color: #1f1f22;
   }
 }

src/client/styles/scss/theme/halloween.scss

@@ -23,6 +23,7 @@ $light: lighten($secondary, 10%);
   #wrapper > .navbar {
     background-image: url(/images/themes/halloween/halloween-navbar.jpg);
   }
+
   // add background-image
   #page-wrapper,
   .page-editor-preview-container {
@@ -43,33 +44,49 @@ html[dark] {
   $color-global: #e9af2b;
   $color-reversal: #eeeeee;
   // $color-header: #2b2b2b;
-  $color-link: lighten($primary, 20%);
+  $color-link: #aa97cb;
   $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: lighten($primary, 20%);
+  $color-link-wiki: #aa97cb;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: #a7a7a7;
   $color-inline-code: #c7254e; // optional
 
   // List Group colors
-  $color-list: $color-global;
+  $color-list: #979797;
   $bgcolor-list: transparent;
   $color-list-active: $color-reversal;
   $bgcolor-list-active: $primary;
   $color-list-hover: $themecolor;
 
+  // Search Top
+  $color-search: $primary;
+
   // Navbar
-  $bgcolor-navbar: #223344;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-navbar: #eceded;
+  $bgcolor-search-top-dropdown: $primary;
+  $border-image-navbar: linear-gradient(90deg, #e3b7ff 0%, #134774 100%);
 
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
-  $fillcolor-logo-mark: lighten($accentcolor, 15%);
+  $fillcolor-logo-mark: #dedede;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+  $bgcolor-sidebar: #162b33;
+  $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional
+
+  // Sidebar contents
+  $color-sidebar-context: #aa97cb;
+  $bgcolor-sidebar-context: #1d2126;
+
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #2c2926; // optional
+
+  // Sidebar resize button
+  $color-resize-button: #effcfa;
+  $bgcolor-resize-button: $primary;
+  $color-resize-button-hover: #effcfa;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -99,25 +116,10 @@ html[dark] {
   .table {
     color: $color-global;
   }
-  .table-bordered {
-    th,
-    td {
-      border: 1px solid $themecolor;
-    }
-  }
 
-  // Nav
-  .nav-tabs {
-    border-bottom: $bordercolor 1px solid;
-    .nav-link {
-      &:hover {
-        border: $bordercolor 1px solid;
-      }
-      &.active {
-        color: lighten($themecolor, 5%);
-        background-color: transparent;
-        border: $bordercolor 1px solid;
-      }
-    }
+  pre {
+    color: #edba4a;
+    background: #000000;
   }
+
 }

src/server/routes/installer.js

@@ -38,7 +38,7 @@ module.exports = function(crowi, app) {
 
     // create /Sandbox/*
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox.md'), '/Sandbox', owner, lang));
-    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap4.md'), '/Sandbox/Bootstrap3', owner, lang));
+    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap4.md'), '/Sandbox/Bootstrap4', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-diagrams.md'), '/Sandbox/Diagrams', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-math.md'), '/Sandbox/Math', owner, lang));
 

src/server/views/invited.html

@@ -17,6 +17,8 @@
  {% endblock %}
  {% block sidebar %}
  {% endblock %}
+ {% block head_warn_alert_siteurl_undefined %}
+ {% endblock %}
 
 
 

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

@@ -27,7 +27,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container d-edit-none d-print-none">
+      <div class="mb-5 user-page-content-container d-edit-none d-print-none">
         {% include '../widget/user_page_content.html' %}
       </div>
 

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

@@ -25,7 +25,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container d-edit-none">
+      <div class="mb-5 user-page-content-container d-edit-none">
         {% include '../widget/user_page_content.html' %}
       </div>
 

src/server/views/login.html

@@ -17,6 +17,8 @@
 {% endblock %}
 {% block sidebar %}
 {% endblock %}
+{% block head_warn_alert_siteurl_undefined %}
+{% endblock %}
 
 {% block html_additional_headers %}
   <script src="{{ webpack_asset('js/nologin.js') }}" defer></script>
@@ -83,7 +85,7 @@
 
             {% if req.form.errors.length > 0 %}
             <div class="alert alert-danger">
-              <ul>
+              <ul class="mb-0">
               {% for error in req.form.errors %}
                 <li>{{ error }}</li>
               {% endfor %}
@@ -91,7 +93,7 @@
             </div>
             {% endif %}
           </div>
-          <div id="register-form-errors">
+          <div id="register-form-errors" class="px-3">
             {% set message = req.flash('registerWarningMessage') %}
             {% if message.length %}
             <div class="alert alert-danger">