[TASK] improve styling
Some checks failed
CI/CD Pipeline / test (push) Failing after 15m38s
CI/CD Pipeline / deploy-staging (push) Has been skipped
CI/CD Pipeline / deploy-main (push) Has been skipped

This commit is contained in:
Marie Birner 2024-04-19 11:09:31 +02:00
parent 686feaf66b
commit 30756ad4aa
3 changed files with 22 additions and 11 deletions

View File

@ -13,3 +13,4 @@
@import 'components/search'; @import 'components/search';
@import 'components/important'; @import 'components/important';
@import 'components/searchable-table'; @import 'components/searchable-table';
@import 'components/notification';

View File

@ -0,0 +1,5 @@
.notification {
right: -.2rem;
top: -.1rem;
font-size: .5rem;
}

View File

@ -28,20 +28,25 @@
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10"> <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
<div class="max-w-screen-xl w-full flex justify-between items-center"> <div class="max-w-screen-xl w-full flex justify-between items-center">
<div class="w-1/3 truncate"> <div class="w-1/3 truncate">
<a href="/"> <a class="flex items-center" href="/">
{{ loggedin_user.name }} {{ loggedin_user.name }}
{% if loggedin_user.amount_unread_notifications > 0 %} {% if loggedin_user.amount_unread_notifications > 0 %}
<span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300 inline-flex items-center"> <span class="relative inline-flex items-end ms-1">
<svg class="w-3 h-3 me-1.5" <svg
height="20"
width="24"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20"> viewBox="0 0 20 24">
<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" /> <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" /> <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
</svg> </svg>
{{ loggedin_user.amount_unread_notifications }}</span> <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
{{ loggedin_user.amount_unread_notifications }}
</small>
</span>
{% endif %} {% endif %}
</a> </a>
</div> </div>