Browse Source

Refactor site header HTML/CSS away from flexbox

I don't like this as much, but it works better to be able to wrap the
coronavirus views bar underneath the logo on small screens.
merge-requests/102/head
Deimos 5 years ago
parent
commit
3903c6f6de
  1. 3
      tildes/scss/_layout.scss
  2. 26
      tildes/scss/modules/_site-header.scss
  3. 7
      tildes/tildes/templates/base.jinja2

3
tildes/scss/_layout.scss

@ -57,9 +57,6 @@ body {
#site-header { #site-header {
grid-area: header; grid-area: header;
display: flex;
align-items: center;
max-width: 100vw; max-width: 100vw;
padding: 0.2rem; padding: 0.2rem;

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

@ -14,33 +14,28 @@
display: flex; display: flex;
} }
margin-left: auto;
float: right;
margin-top: 0.2rem;
} }
.toast { .toast {
display: inline-block;
width: auto; width: auto;
margin: 0 0.2rem 0 -1rem;
margin: 0.2rem 0.2rem 0 0;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
@media (min-width: $size-xs) {
margin-left: 0;
text-indent: -1rem;
padding-left: 1.4rem;
a {
white-space: nowrap;
}
}
vertical-align: top;
} }
} }
.site-header-context { .site-header-context {
vertical-align: text-bottom;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.site-header-logo { .site-header-logo {
display: inline-block;
background-image: url("/favicon-32x32.png"); background-image: url("/favicon-32x32.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -52,7 +47,10 @@
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
@media (min-width: $size-xs) {
margin-right: 1rem; margin-right: 1rem;
}
padding-left: 40px; padding-left: 40px;
padding-right: 8px; padding-right: 8px;
line-height: 32px; line-height: 32px;
@ -72,8 +70,8 @@
display: none; display: none;
} }
margin-left: auto;
flex-shrink: 0;
float: right;
margin-top: 0.2rem;
&.badge { &.badge {
margin-right: 0.6rem; margin-right: 0.6rem;

7
tildes/tildes/templates/base.jinja2

@ -68,10 +68,6 @@
<header id="site-header" data-js-hide-sidebar-if-open> <header id="site-header" data-js-hide-sidebar-if-open>
<a class="site-header-logo" href="/">Tildes</a> <a class="site-header-logo" href="/">Tildes</a>
{% block header_context_link %}{% endblock %}
{{ logged_in_user_info() }}
<button <button
class="btn btn-sm btn-link site-header-sidebar-button class="btn btn-sm btn-link site-header-sidebar-button
{% if request.user and request.user.num_unread_total > 0 %} {% if request.user and request.user.num_unread_total > 0 %}
@ -84,6 +80,9 @@
{% endif %} {% endif %}
>Sidebar</button> >Sidebar</button>
{% block header_context_link %}{% endblock %}
{{ logged_in_user_info() }}
</header> </header>
<main class="{% block main_classes %}{% endblock %}" data-js-hide-sidebar-if-open> <main class="{% block main_classes %}{% endblock %}" data-js-hide-sidebar-if-open>

Loading…
Cancel
Save