src/main/resources/public/css/agency.css

@@ -713,3 +713,42 @@ ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons l
   border-radius: 5px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }
+/* ---------------------------------------------------
+    FEEDBACK STYLE
+----------------------------------------------------- */
+.feedback-panel {
+  list-style-type: none;
+  padding: 5px;
+}
+
+.feedback-panel .alert {
+  padding: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+@media (min-width: 768px) {
+  .feedback-panel {
+    position: fixed;
+    overflow-y: hidden;
+    max-height: calc(100vh - 60px);
+    width: 250px;
+    top: 50px;
+    right: 15px;
+    opacity: .8;
+    z-index: 10000;
+  }
+
+  .feedback-panel .alert {
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow: hidden;
+  }
+
+  .feedback-panel .alert:hover {
+    border-color: #888;
+  }
+}

src/main/resources/templates/default.html

@@ -61,9 +61,14 @@
         </div>
     </div>
 </nav>
+<div class="container-fluid">
+    <div class="container">
+        <ul id="messages" class="feedback-panel">
+        </ul>
+    </div>
     <div layout:fragment="content">
     </div>
-
+</div>
 <footer>
     <div class="container">
         <div class="row">