WIP: apply bootstrap theme

* page alerts

lib/views/crowi-plus/base/page_nosidebar.html

@@ -16,6 +16,7 @@
   {% endif %}
   <article>
     {% block content_main_before %}
+      {% parent %}
     {% endblock %}
 
     {% block content_main %}
@@ -23,6 +24,7 @@
     {% endblock content_main %}
 
     {% block content_main_after %}
+      {% parent %}
     {% endblock %}
 
     {% block content_footer %}

lib/views/page.html

@@ -41,6 +41,57 @@
 {% block content_main %}
 
 {% block content_main_before %}
+  {% if page.isDeleted() %}
+  <div class="alert alert-danger alert-trash d-flex align-items-center justify-content-between">
+    <div>
+      <i class="fa fa-trash-o" aria-hidden="true"></i>
+      This page is in the trash.<br>
+      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+    </div>
+    {% if user %}
+    <ul class="list-inline">
+      <li>
+        <a href="#" class="btn btn-default btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="fa fa-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
+      </li>
+      <li>
+        <a href="#" class="btn btn-danger btn-sm" data-target="#deletePage" data-toggle="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
+      </li>
+    </ul>{# /.pull-right #}
+    {% endif %}
+  </div>
+  {% endif %}
+
+  {% if req.query.renamed and not page.isDeleted() %}
+  <div class="alert alert-info alert-moved">
+    <span>
+      <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.renamed) }}
+    </span>
+  </div>
+  {% endif %}
+  {% if req.query.redirectFrom and not page.isDeleted() %}
+  <div class="alert alert-info alert-moved d-flex align-items-center justify-content-between">
+    <span>
+      <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.redirectFrom) }}
+    </span>
+    {% if user %}
+    <form role="form" id="unlink-page-form" onsubmit="return false;">
+      <input type="hidden" name="_csrf" value="{{ csrf() }}">
+      <input type="hidden" name="path" value="{{ page.path }}">
+      <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
+      <button type="submit" class="btn btn-default btn-sm pull-right">
+        <i class="fa fa-unlink" aria-hidden="true"></i>
+        Unlink
+      </button>
+    </form>
+    {% endif %}
+  </div>
+  {% endif %}
+  {% if req.query.unlinked %}
+  <div class="alert alert-info alert-unlinked">
+    <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
+  </div>
+  {% endif %}
+
 {% endblock %}
 
 <div id="content-main" class="content-main {% if not page or req.body.pageForm %}on-edit{% endif %}"
@@ -68,27 +119,6 @@
 
   {% else %}
 
-  {% if page.isDeleted() %}
-  <div class="alert alert-danger alert-trash">
-    <div>
-      {% if user %}
-      <ul class="list-inline pull-right">
-        <li>
-          <a href="#" class="btn btn-default btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="fa fa-undo" aria-hidden="true"></i> {{ t('Put Back') }}</a>
-        </li>
-        <li>
-          <a href="#" class="btn btn-danger btn-sm" data-target="#deletePage" data-toggle="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> {{ t('Delete Completely') }}</a>
-        </li>
-      </ul>{# /.pull-right #}
-      {% endif %}
-
-      <i class="fa fa-trash-o" aria-hidden="true"></i>
-      This page is in the trash.<br>
-      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
-    </div>
-  </div>
-  {% endif %}
-
   {% if not page.isDeleted() %}
   <ul class="nav nav-tabs hidden-print">
     <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip" {# data-title="あなたの 確認待ち です" title="" data-placement="bottom" data-trigger="manual" data-tooltip-stay #}>
@@ -129,39 +159,6 @@
   {% endif %}
 
   <div class="tab-content">
-  {% if req.query.renamed and not page.isDeleted() %}
-  <div class="alert alert-info alert-moved">
-    <span>
-      <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.renamed) }}
-    </span>
-  </div>
-  {% endif %}
-  {% if req.query.redirectFrom and not page.isDeleted() %}
-  <div class="alert alert-info alert-moved">
-    <div>
-      {% if user %}
-      <form role="form" id="unlink-page-form" onsubmit="return false;">
-        <input type="hidden" name="_csrf" value="{{ csrf() }}">
-        <input type="hidden" name="path" value="{{ page.path }}">
-        <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
-        <button type="submit" class="btn btn-default btn-sm pull-right">
-          <i class="fa fa-unlink" aria-hidden="true"></i>
-          Unlink
-        </button>
-      </form>
-      {% endif %}
-      <span>
-        <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.redirectFrom) }}
-      </span>
-    </div>
-  </div>
-  {% endif %}
-  {% if req.query.unlinked %}
-  <div class="alert alert-info alert-unlinked">
-    <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
-  </div>
-  {% endif %}
-
 
   {% if not page.isLatestRevision() %}
   <div class="alert alert-warning">

resource/styles/scss/_override-agileadmin.scss

@@ -63,6 +63,14 @@
 }
 
 
+/*
+ * Alert
+ */
+.alert {
+  border-radius: 0;
+}
+
+
 /*
  * Form
  */

resource/styles/scss/_page.scss

@@ -101,39 +101,13 @@
 
   }
 
-  /*
-  .main { // {{{ .main of layout related
-    transition: .5s ease;
-    -webkit-transition: .5s ease;
-    background: #fff;
-
-    article {
-      background: #fff;
-    }
-
-    .content-main {
-      .tab-content {
-        margin-top: 30px;
-      }
-
-      // alert component settings for trash page and moved page
-      // see: https://jsfiddle.net/me420sky/2/
-      .alert-trash, .alert-moved, .alert-unlinked {
-        padding: 10px 15px;
-
-        span {
-          line-height: 25px;
-        }
-
-        >div:after {
-          clear: both;
-          content: '';
-          display: table;
-        }
-      }
-    }
-  } // }}}
+  // alert component settings for trash page and moved page
+  // see: https://jsfiddle.net/me420sky/2/
+  .alert-trash, .alert-moved, .alert-unlinked {
+    padding: 10px 15px;
+  }
 
+  /*
   // {{{ grant related style
   .main.grant-restricted,
   .main.grant-specified,