Browse Source

Rearrange notifications to prevent header resizing

Previously, the site's main content would be pushed down a little when
you have new comment notifications or messages. This moves them to the
left of the username instead, and uses a different flexbox arrangement
inside the sidebar when it's collapsed on smaller screens.
merge-requests/64/head
Deimos 6 years ago
parent
commit
607f17263f
  1. 11
      tildes/scss/modules/_logged-in-user.scss
  2. 4
      tildes/scss/modules/_sidebar.scss
  3. 3
      tildes/scss/modules/_site-header.scss

11
tildes/scss/modules/_logged-in-user.scss

@ -2,6 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
.logged-in-user-info { .logged-in-user-info {
flex-direction: row-reverse;
align-items: center;
font-size: 0.8rem; font-size: 0.8rem;
a { a {
@ -9,14 +12,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
@media (min-width: $size-md) {
justify-content: right;
}
} }
} }
.logged-in-user-alert { .logged-in-user-alert {
font-weight: bold; font-weight: bold;
font-size: 0.5rem; font-size: 0.5rem;
@media (min-width: $size-md) {
margin-right: 1rem;
}
} }

4
tildes/scss/modules/_sidebar.scss

@ -10,6 +10,10 @@
width: 100%; width: 100%;
} }
.logged-in-user-info {
flex-direction: column;
}
.sidebar-controls .btn { .sidebar-controls .btn {
width: auto; width: auto;
} }

3
tildes/scss/modules/_site-header.scss

@ -6,11 +6,10 @@
// hidden on small screens // hidden on small screens
display: none; display: none;
@media (min-width: $show-sidebar-width) { @media (min-width: $show-sidebar-width) {
display: block;
display: flex;
} }
margin-left: auto; margin-left: auto;
text-align: right;
} }
} }

Loading…
Cancel
Save