messages: fix styling in flashed messages

* Adds a close icon * Shorter height for the message
inveniosoftware · Jun 19, 2020 · 53f34f6 · 53f34f6
1 parent 3c934be
commit 53f34f6
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/invenio_theme/assets/semantic-ui/js/invenio_theme/theme.js b/invenio_theme/assets/semantic-ui/js/invenio_theme/theme.js
@@ -13,3 +13,11 @@ import "semantic-ui-less/semantic.less";
 
 // Initialize Semantic UI components
 jquery(".ui.dropdown.icon.button").dropdown();
+
+jquery(".message .close").on("click", function () {
+  $(this).closest(".message").transition({
+    animation: "fade",
+    duration: 0,
+    interval: 0,
+  });
+});
diff --git a/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/collections/message.overrides b/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/collections/message.overrides
@@ -1,4 +1,15 @@
 .ui.flashed.message {
     margin-top: 0;
     border-radius: 0;
+    padding: 2px 0;
+}
+
+.flashed.close.icon {
+    cursor: pointer;
+    position: absolute;
+    margin: 0;
+    top: .78575em;
+    right: .5em;
+    opacity: .7;
+    transition: opacity .1s ease;
 }
diff --git a/invenio_theme/templates/semantic-ui/invenio_theme/header_login.html b/invenio_theme/templates/semantic-ui/invenio_theme/header_login.html
@@ -40,10 +40,10 @@
               </a>
               <div class="divider"></div>
             {%- endfor %}
-            <div class="item"><a style="color:black;"
-                                 href="{{ url_for_security('logout') }}"><i
-                    class="sign-out icon"></i>
-              {{ _('Log out') }}</a></div>
+            <a class="item" style="color:black;" href="{{ url_for_security('logout') }}">
+              <i class="sign-out icon"></i>
+              {{ _('Log out') }}
+            </a>
           </div>
         </div>
       </div>

diff --git a/invenio_theme/templates/semantic-ui/invenio_theme/macros/messages.html b/invenio_theme/templates/semantic-ui/invenio_theme/macros/messages.html
@@ -11,8 +11,13 @@
     {%- for category, msg in get_flashed_messages(with_categories=True) %}
       {%- set category = 'info' if category not in ['info', 'error', 'warning', 'success'] else category %}
       <div class="ui {{ category }} flashed message">
-        <div class="container">
+        <div class="ui grid container">
+          <div class="fourteen wide left aligned column">
             <p>{{ msg }}</p>
+          </div>
+          <div class="right aligned column">
+            <i class="flashed close icon"></i>
+          </div>
         </div>
       </div>
     {%- endfor %}