set error as panel in main body

debomatic-webui/public/javascripts/page_distribution.js

@@ -579,12 +579,12 @@ function Page_Distrubion(socket) {
         set: function (socket_error) {
             if ($('#error').is(':visible'))
                 return;
-            $('#error span').html(socket_error);
+            $('#error .message').html(socket_error);
             error.view();
         },
         clean: function () {
             $('#error').hide();
-            $('#error span').html('');
+            $('#error .message').html('');
         },
         view: function () {
             $('#error').fadeIn(100);

debomatic-webui/views/distribution.ejs

@@ -5,10 +5,6 @@
   </ol>
 </nav>
 
-<div id="error" class="alert alert-danger">
-  <strong>Oh snap!</strong> <span></span>
-</div>
-
 <article class="row">
   <aside id="sidebar" class="col-md-3">
     <nav id="packages">
@@ -70,6 +66,12 @@
     <header>
       <h1 id="title"></h1>
     </header>
+    <div id="error" class="panel panel-danger">
+        <div class="panel-heading">
+          <h3 class="panel-title">Oh snap!</h3>
+        </div>
+        <div class="panel-body message"></div>
+    </div>
     <div id="welcome"></div>
     <div id="file">
       <div id="package_info"></div>