Mobile viewport alignment

This commit is contained in:
Edd Baldry 2016-10-27 08:28:43 +01:00 committed by Matt Westcott
parent d0a2573ec8
commit ad94e689fc
6 changed files with 37 additions and 12 deletions

View file

@ -29,6 +29,13 @@ header {
.col {
float: left;
margin-right: 2em;
// @media screen and (max-width: $breakpoint-mobile) {
// // To all hamburger menu to be visible
// padding-left: 2em;
// margin-top: -2px;
// No... This fixes the snippet page but breaks all else
}
}
.left {
@ -53,6 +60,13 @@ header {
&.tab-merged,
&.no-border {
border: 0;
@media screen and (max-width: $breakpoint-mobile) {
// To all hamburger menu to be visible
padding-left: $desktop-nice-padding;
padding-top: 11px;
}
}
&.merged.no-border {
@ -151,10 +165,5 @@ header {
.col9 {
@include column(9);
}
.breadcrumb {
margin-left: -($desktop-nice-padding);
margin-right: -($desktop-nice-padding);
}
}
}

View file

@ -103,9 +103,8 @@ $zindex-modal-background: 500;
}
.header-title {
padding-left: 1em!important;
/* We need !important as the modal is nested within the page-editor and
page-editor.scss is compiled after this file */
padding-left: 0em!important;
margin-left: -28px;
}
}

View file

@ -447,6 +447,8 @@ footer,
.breadcrumb {
padding-top: 0;
background: $color-teal-darker;
margin-left: -($desktop-nice-padding);
margin-right: -($desktop-nice-padding);
li {
a,
@ -501,6 +503,12 @@ footer,
}
}
// @media screen and (max-width: $breakpoint-mobile) {
// .breadcrumb {
// padding-left: $mobile-nice-padding;
// }
// }
// Transitions (resolution agnostic)
.content-wrapper,
.nav-main,

View file

@ -31,6 +31,13 @@
.header-title {
padding-left: 3.1em;
@media screen and (max-width: $breakpoint-mobile) {
padding-left: 0;
margin-left: -28px;
// Because it's nested within tab-merged which we've given padding
// on mobile viewports due to snippets
}
}
}

View file

@ -18,10 +18,11 @@
add_text - text for the 'add' button
{% endcomment %}
<header class="{% if merged %}merged{% endif %} {% if tabbed %}tab-merged{% endif %} {% if search_form %}hasform{% endif %}">
<div class="row">
<div class="row nice-padding">
<div class="left">
<div class="col header-title">
<h1 class="icon icon-{{ icon }}">{{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}</h1>
<h1 class="icon icon-{{ icon }}">
{{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}</h1>
</div>
{% if search_url %}
<form class="col search-form" action="{% url search_url %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate>

View file

@ -17,8 +17,9 @@
<header class="nice-padding">
<div class="row row-flush">
<div class="left col9 header-title">
<h1 class="icon icon-snippet">{% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
<div class="left col9 header-snippet">
<h1 class="icon icon-snippet">
{% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
{% if is_searchable %}
<form class="col search-form" action="{% url 'wagtailsnippets:list' model_opts.app_label model_opts.model_name %}" method="get" novalidate>