adjust styles for alerts

lib/views/page.html

@@ -80,33 +80,37 @@
   {% else %}
 
   {% if page.isDeleted() %}
-  <div class="alert alert-danger">
-    <ul class="list-inline pull-right">
-      <li>
-        <form role="form" id="revert-delete-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() }}">
-          <input type="submit" class="btn btn-success btn-sm" value="Put Back">
-        </form>
-      </li>
-      <li>
-        <form role="form" id="delete-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() }}">
-          <input type="hidden" name="completely" value="true">
-          <input type="submit" class="btn btn-danger btn-sm" value="Delete Completely">
-        </form>
-      </li>
-    </ul>{# /.pull-right #}
-    <p>
+  <div class="alert alert-danger alert-trash">
+    <div>
+      <ul class="list-inline pull-right">
+        <li>
+          <form role="form" id="revert-delete-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-success btn-sm">
+              <i class="fa fa-undo" aria-hidden="true"></i>
+              Put Back
+            </button>
+          </form>
+        </li>
+        <li>
+          <form role="form" id="delete-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() }}">
+            <input type="hidden" name="completely" value="true">
+            <button type="submit" class="btn btn-danger btn-sm">
+              <i class="fa fa-times-circle" aria-hidden="true"></i>
+              Delete Completely
+            </button>
+          </form>
+        </li>
+      </ul>{# /.pull-right #}
       <i class="fa fa-trash-o" aria-hidden="true"></i>
       This page is in the trash.<br>
-    </p>
-    <p>
-    Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm picture-rounded"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
-    </p>
+      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm picture-rounded"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+    </div>
   </div>
   {% endif %}
 

resource/css/_page.scss

@@ -100,6 +100,22 @@
       .tab-content {
         margin-top: 30px;
       }
+
+      // alert component settings for trash page and moved page
+      // see: https://jsfiddle.net/me420sky/2/
+      .alert-trash, .alert-moved {
+        padding: 10px 15px;
+
+        span {
+          line-height: 25px;
+        }
+
+        >div:after {
+          clear: both;
+          content: '';
+          display: table;
+        }
+      }
     }
   } // }}}