organize spacing

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

@@ -45,7 +45,7 @@ class WhiteListInput extends React.Component {
 
     return (
       <>
-        <div className="m-t-15">
+        <div className="mt-4">
           <div className="d-flex justify-content-between">
             { t('markdown_setting.Tag names') }
             {customizable && this.renderRecommendBtn()}
@@ -60,7 +60,7 @@ class WhiteListInput extends React.Component {
             onChange={(e) => { markDownSettingContainer.setState({ tagWhiteList: e.target.value }) }}
           />
         </div>
-        <div className="m-t-15">
+        <div className="mt-4">
           <div className="d-flex justify-content-between">
             { t('markdown_setting.Tag attributes') }
             {customizable && this.renderRecommendBtn()}

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

@@ -37,7 +37,7 @@ class XssForm extends React.Component {
           />
           <label htmlFor="xssOption1">
             <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
-            <div className="m-t-15">
+            <div className="mt-4">
               { t('markdown_setting.Ignore all tags desc') }
             </div>
           </label>

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -148,7 +148,7 @@ class MyDraftList extends React.Component {
               </div>
             </div>
 
-            <div className="tab-pane m-t-30 accordion" id="draft-list">
+            <div className="tab-pane mt-5 accordion" id="draft-list">
               {draftList}
             </div>
             <PaginationWrapper

src/client/js/components/PageComment/DeleteCommentModal.jsx

@@ -45,7 +45,7 @@ export default class DeleteCommentModal extends React.Component {
         </ModalHeader>
         <ModalBody>
           <UserPicture user={comment.creator} size="xs" /> <strong><Username user={comment.creator}></Username></strong> wrote on {commentDate}:
-          <p className="well well-sm comment-body m-t-5">{commentBody}</p>
+          <p className="well well-sm comment-body mt-2">{commentBody}</p>
         </ModalBody>
         <ModalFooter>
           <span className="text-danger">{this.props.errorMessage}</span>&nbsp;

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -225,9 +225,9 @@ class OptionsSelector extends React.Component {
   render() {
     return (
       <div className="d-flex flex-row">
-        <span className="m-l-5">{this.renderThemeSelector()}</span>
-        <span className="m-l-5">{this.renderKeymapModeSelector()}</span>
-        <span className="m-l-5">{this.renderConfigurationDropdown()}</span>
+        <span className="ml-2">{this.renderThemeSelector()}</span>
+        <span className="ml-2">{this.renderKeymapModeSelector()}</span>
+        <span className="ml-2">{this.renderConfigurationDropdown()}</span>
       </div>
     );
   }

src/client/js/components/PageHistory.jsx

@@ -138,7 +138,7 @@ class PageHistory extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <div className="mt-4">
         { this.state.isLoading && (
           <div className="my-5 text-center">
             <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
@@ -158,7 +158,7 @@ class PageHistory extends React.Component {
             onDiffOpenClicked={this.onDiffOpenClicked}
           />
         ) }
-      </React.Fragment>
+      </div>
     );
   }
 

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

@@ -95,9 +95,9 @@ export default class PageRevisionList extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="checkbox checkbox-info pull-right">
-          <input id="cbCompactize" type="checkbox" value checked={this.state.isCompactNodiffRevisions} onChange={this.cbCompactizeChangeHandler}></input>
-          <label htmlFor="cbCompactize">{ t('Shrink versions that have no diffs') }</label>
+        <div className="custom-control custom-switch float-right">
+          <input type="checkbox" id="cbCompactize" className="custom-control-input" checked={this.state.isCompactNodiffRevisions} onChange={this.cbCompactizeChangeHandler}></input>
+          <label className="custom-control-label" htmlFor="cbCompactize">{ t('Shrink versions that have no diffs') }</label>
         </div>
         <div className="clearfix"></div>
         <div className={classNames.join(' ')}>

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

@@ -59,7 +59,7 @@ export default class Revision extends React.Component {
     const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
     return (
       <div className="revision-history-main d-flex mt-3">
-        <div className="m-t-5">
+        <div className="mt-2">
           {pic}
         </div>
         <div className="m-l-10">

src/client/styles/scss/_layout.scss

@@ -1,5 +1,15 @@
 @import 'layout_variable';
 
+// FIXME: replace with mt-2 or mt-3
+.grw-mt-10px {
+  margin-top: 10px !important;
+}
+
+// FIXME: replace with pt-2 or pt-3
+.grw-pt-10px {
+  padding-top: 10px !important;
+}
+
 .main-container {
   h1,
   h2,

src/server/views/admin/markdown.html

@@ -181,7 +181,7 @@
             <input type="radio" id="xssOption1" name="{{nameForXssOption}}" value="1" {% if xssOption === 1 %}checked{% endif %}>
             <label for="xssOption1">
               <p class="font-weight-bold">{{ t('markdown_setting.Ignore all tags') }}</p>
-              <div class="m-t-15">
+              <div class="mt-4">
                   {{ t('markdown_setting.Ignore all tags desc') }}
               </div>
             </label>
@@ -191,11 +191,11 @@
             <input type="radio" id="xssOption2" name="{{nameForXssOption}}" value="2" {% if xssOption === 2 %}checked{% endif %}>
             <label for="xssOption2">
               <p class="font-weight-bold">{{ t('markdown_setting.Recommended setting') }}</p>
-              <div class="m-t-15">
+              <div class="mt-4">
                 {{ t('markdown_setting.Tag names') }}
                 <textarea class="form-control xss-list" name="recommendedTags" rows="6" cols="40" readonly>{{ recommendedWhitelist.tags }}</textarea>
               </div>
-              <div class="m-t-15">
+              <div class="mt-4">
                 {{ t('markdown_setting.Tag attributes') }}
                 <textarea class="form-control xss-list" name="recommendedAttrs" rows="6" cols="40" readonly>{{ recommendedWhitelist.attrs }}</textarea>
               </div>
@@ -206,7 +206,7 @@
             <input type="radio" id="xssOption3" name="{{nameForXssOption}}" value="3" {% if xssOption === 3 %}checked{% endif %}>
             <label for="xssOption3">
               <p class="font-weight-bold">{{ t('markdown_setting.Custom Whitelist') }}</p>
-              <div class="m-t-15">
+              <div class="mt-4">
                 <div class="d-flex justify-content-between">
                   {{ t('markdown_setting.Tag names') }}
                   <p id="btn-import-tags" class="btn btn-xs btn-primary">
@@ -215,7 +215,7 @@
                 </div>
                 <textarea class="form-control xss-list" type="text" name="markdownSetting[markdown:xss:tagWhiteList]" rows="6" cols="40" placeholder="e.g. iframe, script, video...">{{ markdownSetting['markdown:xss:tagWhiteList'] }}</textarea>
               </div>
-              <div class="m-t-15">
+              <div class="mt-4">
                 <div class="d-flex justify-content-between">
                   {{ t('markdown_setting.Tag attributes') }}
                   <p id="btn-import-attrs" class="btn btn-xs btn-primary">

src/server/views/admin/notification.html

@@ -48,7 +48,7 @@
         </li>
       </ul>
 
-      <div class="tab-content m-t-15">
+      <div class="tab-content mt-4">
         <div id="slack-configuration" class="tab-pane active" role="tabpanel">
 
           <select class="selectpicker" id="selectSlackOption" data-width="auto">
@@ -56,7 +56,7 @@
             <option value="2">Slack App</option>
           </select><!-- /.select-tab -->
 
-          <div class="tab-content m-t-15">
+          <div class="tab-content mt-4">
 
             <div id="slack-incoming-webhooks" class="tab-pane active" role="tabpanel">
 

src/server/views/admin/security.html

@@ -139,7 +139,7 @@
        </div>
 
 
-      <div class="auth-mechanism-configurations m-t-10">
+      <div class="auth-mechanism-configurations grw-mt-10px">
 
         <legend>{{ t('security_setting.Authentication mechanism settings') }}</legend>
 
@@ -177,7 +177,7 @@
             </li>
           </ul>
 
-          <div class="tab-content p-t-10">
+          <div class="tab-content grw-pt-10px">
             <div id="passport-local" class="tab-pane active" role="tabpanel" >
               {% include './widget/passport/local.html' %}
             </div>

src/server/views/invited.html

@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <div class="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
+    <div class="login-dialog grw-pt-10px p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
       <p class="alert alert-success">
         <strong>アカウントの作成</strong><br>
         <small>招待を受け取ったメールアドレスでアカウントを作成します</small>
@@ -83,14 +83,14 @@
         </div>
 
         <input type="hidden" name="_csrf" value="{{ csrf() }}">
-        <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
+        <div class="input-group mt-5 m-b-20 d-flex justify-content-center">
           <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
             <span class="btn-label"><i class="icon-user-follow"></i></span>
             {{ t('Create') }}
           </button>
         </div>
 
-        <div class="input-group m-t-30 d-flex justify-content-center">
+        <div class="input-group mt-5 d-flex justify-content-center">
           <a href="https://growi.org" class="link-growi-org">
             <span class="growi">GROWI</span>.<span class="org">ORG
           </a>

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

@@ -49,7 +49,7 @@
     {% include '../widget/page_content.html' %}
   </div>
 
-  <div class="row page-list hidden-print {% if page.isPortal() %}m-t-30{% endif %}">
+  <div class="row page-list hidden-print {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-md-12">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -35,7 +35,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list hidden-print m-t-30">
+  <div class="row page-list hidden-print mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -34,7 +34,7 @@
 
   </div>
 
-  <div class="row page-list hidden-print {% if page.isPortal() %}m-t-30{% endif %}">
+  <div class="row page-list hidden-print {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -59,7 +59,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list hidden-print m-t-30">
+  <div class="row page-list hidden-print mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -31,7 +31,7 @@
 </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list p-t-10 m-t-30 m-b-30 round-corner">
+  <div class="row page-list grw-pt-10px my-5 round-corner">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -35,7 +35,7 @@
 
 
 
-  <div class="row page-list bg-white round-corner p-t-10 m-20 m-b-30 {% if page.isPortal() %}m-t-30{% endif %}">
+  <div class="row page-list bg-white round-corner grw-pt-10px mb-5 {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

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

@@ -52,7 +52,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list m-t-30">
+  <div class="row page-list mt-5">
     <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

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

@@ -13,10 +13,10 @@
     </div>
     {% if page %} {% include '../../widget/header-buttons.html' %}
 
-    <ul class="authors hidden-sm hidden-xs text-nowrap p-t-10">
+    <ul class="authors hidden-sm hidden-xs text-nowrap grw-pt-10px">
       <li>
         <div class="d-flex align-items-center b">
-          <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">
+          <a class="mr-2" href="{{ userPageRoot(page.creator) }}">
             <img src="{{ page.creator|default(author)|picture }}" class="picture img-circle">
           </a>
           <div>
@@ -27,9 +27,9 @@
           </div>
         </div>
       </li>
-      <li class="m-t-5">
+      <li class="mt-2">
         <div class="d-flex align-items-center">
-          <a class="m-r-5" href="{{ userPageRoot(author) }}">
+          <a class="mr-2" href="{{ userPageRoot(author) }}">
             <img src="{{ author|picture }}" class="picture img-circle">
           </a>
           <div>

src/server/views/login.html

@@ -128,7 +128,7 @@
             <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
           </div>
 
-          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
+          <div class="input-group mt-5 m-b-20 d-flex justify-content-center">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
             <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login">
               <span class="btn-label"><i class="icon-login"></i></span>
@@ -311,7 +311,7 @@
 
           <input type="hidden" name="_csrf" value="{{ csrf() }}">
 
-          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
+          <div class="input-group mt-5 m-b-20 d-flex justify-content-center">
             <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
               <span class="btn-label"><i class="icon-user-follow"></i></span>
               <span class="btn-label-text">{{ t('Sign up') }}</span>

src/server/views/login/error.html

@@ -30,7 +30,7 @@
       <div class="logo">{% include '../widget/logo.html' %}</div>
       <h1>GROWI</h1>
 
-      <div class="m-b-15 login-form-errors text-center">
+      <div class="mb-4 login-form-errors text-center">
         {% if reason === 'registered'%}
         <div class="alert alert-success">
           <h2>登録完了</h2>

src/server/views/me/api_token.html

@@ -26,13 +26,13 @@
 
   {% set message = req.flash('successMessage') %}
   {% if message.length %}
-  <div class="alert alert-success m-t-10">
+  <div class="alert alert-success grw-mt-10px">
     {{ message }}
   </div>
   {% endif %}
 
   {% if req.form.errors.length > 0 %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     <ul>
     {% for error in req.form.errors %}
       <li>{{ error }}</li>

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

@@ -24,7 +24,7 @@
 
   {% set couldntDisassociateError = req.flash('couldntDisassociateError') %}
   {% if couldntDisassociateError != null %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     <b>Couldn't disassociate External Account</b><br>
     You have not set a password and have only one External Account.
   </div>
@@ -33,7 +33,7 @@
   {% set error = req.flash('errorMessage') %}
   {% if error.length %}
   {% for e in error %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     <b>Server Error occured:</b><br>
     {{ e }}
   </div>
@@ -43,7 +43,7 @@
   {% set warn = req.flash('warningMessage') %}
   {% if warn.length %}
   {% for w in warn %}
-  <div class="alert alert-warning m-t-10">
+  <div class="alert alert-warning grw-mt-10px">
     {{ w }}
   </div>
   {% endfor %}
@@ -51,7 +51,7 @@
 
   {% set message = req.flash('successMessage') %}
   {% if message.length %}
-  <div class="alert alert-success m-t-10">
+  <div class="alert alert-success grw-mt-10px">
     <b>{{ message }}</b>
   </div>
   {% endif %}
@@ -59,7 +59,7 @@
 
 
   <legend class="m-t-20" style="line-height: 1.7em;">
-    <button class="btn btn-default btn-sm pull-right" data-target="#create-external-account" data-toggle="modal">
+    <button class="btn btn-default btn-sm float-right" data-target="#create-external-account" data-toggle="modal">
       <i class="icon-plus" aria-hidden="true"></i>
       Add
     </button>
@@ -136,12 +136,12 @@
             </li>
           </ul>
 
-          <div class="tab-content passport-settings m-t-15">
+          <div class="tab-content passport-settings mt-4">
             <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
               <div id="formLdapAssociationContainer">
                 {% include '../widget/passport/ldap-association-tester.html' %}
                 <div class="clearfix">
-                  <button type="button" class="btn btn-info pull-right" onclick="associateLdap()">
+                  <button type="button" class="btn btn-info float-right" onclick="associateLdap()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i>
                     {{ t('add') }}
                   </button>

src/server/views/me/index.html

@@ -32,20 +32,20 @@
 
   {% set smessage = req.flash('successMessage') %}
   {% if smessage.length %}
-  <div class="alert alert-success m-t-10">
+  <div class="alert alert-success grw-mt-10px">
     {{ smessage }}
   </div>
   {% endif %}
 
   {% set wmessage = req.flash('warningMessage') %}
   {% if wmessage.length %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     {{ wmessage }}
   </div>
   {% endif %}
 
   {% if req.form.errors.length > 0 %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     <ul>
     {% for error in req.form.errors %}
       <li>{{ error }}</li>
@@ -214,7 +214,7 @@
       formData.append('file', this.files[0]);
       formData.append('_csrf', document.getElementsByName("_csrf")[0].value);
 
-      $('#pictureUploadFormProgress').html('<div class="speeding-wheel-sm m-r-5"></div> アップロード中...');
+      $('#pictureUploadFormProgress').html('<div class="speeding-wheel-sm mr-2"></div> アップロード中...');
       $.ajax($form.attr("action"), {
         type: 'post',
         processData: false,

src/server/views/me/password.html

@@ -23,20 +23,20 @@
   <div class="tab-content">
 
   {% if not user.password %}
-  <div class="alert alert-warning m-t-10">
+  <div class="alert alert-warning grw-mt-10px">
     {{ t('Password is not set') }}
   </div>
   {% endif %}
 
   {% set message = req.flash('successMessage') %}
   {% if message.length %}
-  <div class="alert alert-success m-t-10">
+  <div class="alert alert-success grw-mt-10px">
     {{ message }}
   </div>
   {% endif %}
 
   {% if req.form.errors.length > 0 %}
-  <div class="alert alert-danger m-t-10">
+  <div class="alert alert-danger grw-mt-10px">
     <ul>
     {% for error in req.form.errors %}
       <li>{{ error }}</li>

src/server/views/widget/forbidden_content.html

@@ -30,9 +30,9 @@
 
   <div class="tab-content">
     {# list view #}
-    <div class="p-t-10 active tab-pane page-list-container" id="revision-body">
+    <div class="pt-2 active tab-pane page-list-container" id="revision-body">
       {% if pages.length == 0 %}
-        <div class="m-t-10">
+        <div class="mt-2">
           There are no pages under <strong>{{ path }}</strong>.
         </div>
       {% endif  %}

src/server/views/widget/not_creatable_content.html

@@ -22,9 +22,9 @@
 
   <div class="tab-content">
     {# list view #}
-    <div class="p-t-10 active tab-pane page-list-container" id="revision-body">
+    <div class="pt-2 active tab-pane page-list-container" id="revision-body">
       {% if pages.length == 0 %}
-        <div class="m-t-10">
+        <div class="mt-2">
           There are no pages under <strong>{{ path }}</strong>.
         </div>
       {% endif  %}

src/server/views/widget/not_found_content.html

@@ -30,9 +30,9 @@
     {% endif %}
     {% endif %}
     {# list view #}
-    <div class="p-t-10 active tab-pane page-list-container" id="revision-body">
+    <div class="pt-2 active tab-pane page-list-container" id="revision-body">
       {% if pages.length == 0 %}
-        <div class="m-t-10">
+        <div class="mt-2">
           There are no pages under <strong>{{ path }}</strong>.
         </div>
       {% endif  %}

src/server/views/widget/page_alerts.html

@@ -60,7 +60,7 @@
 
     {% set dmessage = req.flash('dangerMessage') %}
     {% if dmessage.length %}
-    <div class="alert alert-danger m-b-15">
+    <div class="alert alert-danger mb-4">
       {{ dmessage }}
     </div>
     {% endif %}

src/server/views/widget/page_attachments.html

@@ -1,6 +1,6 @@
 <div class="row page-attachments-row hidden-print">
   <div class="col-xs-12">
-    <div class="m-t-15 m-b-15">
+    <div class="mt-4 mb-4">
       <div class="page-attachments" id="page-attachment"></div>
 
       <p class="page-meta">

src/server/views/widget/page_content.html

@@ -38,7 +38,7 @@
           <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head">{{ t('Table of Contents') }}</a>
           <div id="revision-toc-content" class="revision-toc-content collapse in"></div>
         </div>
-        <div id="page" class="m-t-15"></div>
+        <div id="page" class="mt-4"></div>
       </div>
     {% elseif 'crowi' === getConfig('crowi', 'customize:behavior') %}
       <div class="tab-pane active" id="cancel-creating-portal">
@@ -59,7 +59,7 @@
     {# raw revision history #}
     {% if not page %}
     {% else %}
-    <div class="tab-pane revision-history m-t-10" id="revision-history">
+    <div class="tab-pane revision-history" id="revision-history">
     </div>
     {% endif %}
 

src/server/views/widget/page_list_and_timeline.html

@@ -12,9 +12,9 @@
 
   <div class="tab-content">
     {# list view #}
-    <div class="p-t-10 active tab-pane fade page-list-container in" id="view-list">
+    <div class="pt-2 active tab-pane fade page-list-container in" id="view-list">
       {% if pages.length == 0 %}
-        <div class="m-t-10">
+        <div class="mt-2">
           {% if isTrashPage() %}
           No deleted pages.
           {% else %}
@@ -28,7 +28,7 @@
 
     {# timeline view #}
     {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <div class="tab-pane m-t-30" id="view-timeline">
+      <div class="tab-pane mt-5" id="view-timeline">
         <script type="text/template" id="page-timeline-data">{{ JSON.stringify(pagesDataForTimeline(pages)) }}</script>
         {# render React Component PageTimeline #}
         <div id="page-timeline"></div>

src/server/views/widget/page_list_and_timeline_kibela.html

@@ -12,9 +12,9 @@
 
   <div class="tab-content">
     {# list view #}
-    <div class="p-t-10 active tab-pane fade page-list-container in" id="view-list">
+    <div class="pt-2 active tab-pane fade page-list-container in" id="view-list">
       {% if pages.length == 0 %}
-        <div class="m-t-10">
+        <div class="mt-2">
           {% if isTrashPage() %}
           No deleted pages.
           {% else %}
@@ -28,7 +28,7 @@
 
     {# timeline view #}
     {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
-      <div class="tab-pane m-t-30" id="view-timeline">
+      <div class="tab-pane mt-5" id="view-timeline">
         <script type="text/template" id="page-timeline-data">{{ JSON.stringify(pagesDataForTimeline(pages)) }}</script>
         {# render React Component PageTimeline #}
         <div id="page-timeline"></div>

src/server/views/widget/user_page_content.html

@@ -20,7 +20,7 @@
     {% endif %}
   </ul>
 
-  <div class="m-t-10 user-page-content-tab tab-content">
+  <div class="user-page-content-tab tab-content">
 
     <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
       {% if bookmarkList.length == 0 %}