Skip to content
Snippets Groups Projects
Commit 74600276 authored by Julian's avatar Julian
Browse files

Use flexbox-based layout for navbar contents

parent b1aa6c5c
No related branches found
No related tags found
1 merge request!907Resolve "Feature: Account Menu in Top Navbar"
Hide whitespace changes
Inline Side-by-side
aleksis/core/static/public/style.scss
+ 59
− 2
View file @ 74600276
......@@ -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});
......
aleksis/core/templates/core/base.html
+ 13
− 11
View file @ 74600276
......@@ -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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment