diff --git a/aleksis/core/static/public/style.scss b/aleksis/core/static/public/style.scss
index cb59138727e2a9345fb4295261a4393414d0aade..deca8e460e816be942160fdebb5ecfe68b11835c 100644
--- a/aleksis/core/static/public/style.scss
+++ b/aleksis/core/static/public/style.scss
@@ -823,8 +823,8 @@ $person-logo-size: 20vh;
& img {
border-radius: 50%;
- width: 20vh;
- height: 20vh;
+ width: 100%;
+ height: 100%;
object-fit: cover;
}
}
@@ -841,6 +841,63 @@ $person-logo-size: 20vh;
border-radius: 50%;
}
+.nav-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 1rem;
+ > a {
+ position: static!important;
+ transform: none!important;
+ }
+ & .nav-spacer {
+ width: 60px;
+ }
+ & ul.account-nav {
+ display: flex;
+ margin-inline: 7.5px;
+ & > li > a {
+ padding: 0 7.5px;
+ }
+ }
+}
+
+.nav-wrapper .navbar-dropdown-trigger {
+ cursor: pointer;
+ height: 100%;
+ display: grid;
+}
+
+.navbar-dropdown-trigger .clip-circle {
+ margin: auto;
+ width: $navbar-height*0.75;
+ height: $navbar-height*0.75;
+ cursor: pointer;
+
+ &.no-image, &.no-image > i.material-icons {
+ font-size: calc(#{$navbar-height} * 0.75 * 0.5);
+ color: #6f6f6f;
+ background: #f2f2f2;
+ line-height: $navbar-height*0.75;
+ width: $navbar-height*0.75;
+ cursor: pointer;
+ }
+}
+
+i.material-icons.new-notification {
+ position: relative;
+ &:after {
+ content: "";
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ bottom: 27%;
+ right: -4%;
+ background-color: $secondary-color;
+ border-radius: 50%;
+ }
+}
+
#hero-bg {
position: absolute;
width: calc(100% + #{$main-padding-lr});
diff --git a/aleksis/core/templates/core/base.html b/aleksis/core/templates/core/base.html
index bd9047a18c3d1d65ff1865f03a9fd2d11ff5b8db..e94737f2aa0d46a04d24931b4f2f1a9fb513cef4 100644
--- a/aleksis/core/templates/core/base.html
+++ b/aleksis/core/templates/core/base.html
@@ -61,23 +61,25 @@
<body {% if no_menu %}class="without-menu"{% endif %}>
<header>
- <!-- Menu button (sidenav) -->
- <div class="container">
- <a href="#" data-target="slide-out" class="top-nav sidenav-trigger hide-on-large-only">
- <i class="material-icons">menu</i>
- </a>
- </div>
-
<!-- Nav bar (logged in as, logout) -->
<nav class="nav-extended">
<div class="nav-wrapper">
+ <a href="#" data-target="slide-out" class="top-nav sidenav-trigger hide-on-large-only">
+ <i class="material-icons">menu</i>
+ </a>
+
<a class="brand-logo" href="/">{{ request.site.preferences.general__title }}</a>
- <ul id="nav-mobile" class="right hide-on-med-and-down">
- {% if user.is_authenticated %}
- <li>{% trans "Logged in as" %} {{ user.get_username }}</li>
+ {% if user.is_authenticated %}
+ <ul class="account-nav">
+ {% trans "Notifications" as notifications_text %}
<li>
- <a href="{% url 'logout' %}">{% trans "Logout" %} <i class="material-icons right">exit_to_app</i></a>
+ <a href="{% url "notifications" %}" class="tooltipped" data-position="bottom"
+ data-tooltip="{{ notifications_text }}" aria-label="{{ notifications_text }}">
+ <i class="material-icons {% if request.user.person.unread_notifications_count > 0 %}new-notification{% endif %}">
+ notifications
+ </i>
+ </a>
</li>
<li>
<a href="#!" class="navbar-dropdown-trigger" data-target="account-dropdown">