Merge pull request #2543 from joachimesque/user-menu-mobile-align-right

User menu mobile align right
This commit is contained in:
Mouse Reeve 2022-12-30 07:20:23 -08:00 committed by GitHub
commit ca89a6f098
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions

View file

@ -1,3 +1,53 @@
.summary-on-open {
display: none;
}
@media only screen and (max-width: 768px) {
.navbar-menu {
text-align: right;
padding-right: 1rem;
.tags {
justify-content: flex-end;
}
#navbar-dropdown {
&[open] {
.summary-on-open {
display: initial;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3rem;
z-index: 31;
background-color: $dropdown-content-background-color;
padding: 1rem 1.75rem;
line-height: 1;
}
}
.dropdown-menu {
padding-top: 0;
top: 3rem;
}
.dropdown-content {
padding-top: 0;
box-shadow: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-item {
// see ../components/_details.scss :: Navbar details
padding-right: 1.75rem;
font-size: 1rem;
}
}
}
}
.image {
overflow: hidden;
}

View file

@ -13,6 +13,10 @@
<span class="ml-2">{{ request.user.display_name }}</span>
</span>
<span class="icon icon-arrow-down is-hidden-mobile" aria-hidden="true"></span>
<span class="summary-on-open">
<span class="icon icon-arrow-left is-small" aria-hidden="true"></span>
{% trans "Back" %}
</span>
</summary>
<div class="dropdown-menu">