Slim header design fixes

pull/9884/head
Thibaud Colas 2022-12-21 14:40:04 +00:00
rodzic 90ffcb05b0
commit 1884447a6b
3 zmienionych plików z 12 dodań i 5 usunięć

Wyświetl plik

@ -415,6 +415,13 @@ table.listing {
width: 100%;
}
// Use consistent spacing to the left and right of the header.
.page-explorer .w-slim-header {
@include media-breakpoint-up(md) {
padding-inline-end: theme('spacing.6');
}
}
.page-explorer .w-breadcrumb {
li[hidden] ~ li:last-child,
li:only-child {

Wyświetl plik

@ -14,11 +14,11 @@
<button
type="button"
data-toggle-breadcrumbs
class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-mr-2.5 w-w-slim-header w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-mr-2.5 w-w-slim-header w-h-slim-header w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
aria-label="{% trans 'Toggle breadcrumbs' %}"
aria-expanded="false"
>
{% icon name="breadcrumb-expand" class_name="w-w-4 w-h-4" %}
{% icon name="breadcrumb-expand" class_name="w-w-5 w-h-5" %}
</button>
{% endif %}
<div class="w-relative w-h-slim-header w-mr-4 w-top-0 w-z-20 w-flex w-items-center w-flex-row w-flex-1 sm:w-flex-none w-transition w-duration-300">

Wyświetl plik

@ -1,16 +1,16 @@
{% load wagtailadmin_tags i18n %}
{# Z index 99 to ensure header is always above #}
<header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
<header class="w-slim-header w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
{# Padding left on mobile to give space for navigation toggle, #}
<div class="w-slim-header w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
<div class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
<div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
{% block header_content %}
{% endblock %}
</div>
</div>
<div class="w-w-full sm:w-w-min w-flex sm:w-flex-nowrap sm:w-flex-row w-items-center w-p-0 sm:w-py-0 sm:w-pr-2 sm:w-justify-end">
<div class="w-w-full sm:w-w-min w-flex sm:w-flex-nowrap sm:w-flex-row w-items-center w-p-0 sm:w-py-0 sm:w-pr-4 sm:w-justify-end">
{% block actions %}
{% endblock %}
</div>