mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

added prefix w- before header classes 

- refine existing scss to use classes & remove unused scss
pull/8749/head
PaarthAgarwal 2022-07-05 15:55:27 +05:30 zatwierdzone przez LB (Ben Johnston)
rodzic cff9aac514
commit 79a212b4b5
16 zmienionych plików z 51 dodań i 61 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
CHANGELOG.txt
Wyświetl plik

@ -56,6 +56,7 @@ Changelog
* Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
* Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
* Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
* Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
* Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
* Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
* Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

35
client/scss/components/_header.scss
Wyświetl plik

@ -1,13 +1,9 @@
@use 'sass:math';
@use 'sass:color';
header {
.w-header {
@apply w-text-primary w-mb-8;
a {
@apply w-text-primary w-underline;
}
h1,
h2 {
@apply w-text-primary;
@ -19,7 +15,6 @@ header {
position: relative;
}
h1 > svg.icon, // can remove once all headers use shared include
.w-header__glpyh {
position: absolute;
inset-inline-start: -1.5em;
@ -42,8 +37,8 @@ header {
}
// Give padding to the rows inside of headers so that nested breadcrumbs aren't padded by their parent header el.
// Use header--with-padding for headers that don't contain .row elements.
&.header--with-padding,
// Use w-header--with-padding for headers that don't contain .row elements.
&.w-header--with-padding,
> .row {
padding-top: 0.5rem;
padding-bottom: 1.5rem;
@ -51,7 +46,7 @@ header {
padding-inline-end: 20px;
}
&.merged .w-breadcrumb {
&.w-header--merged .w-breadcrumb {
padding-inline-start: $mobile-nav-indent;
}
@ -65,11 +60,6 @@ header {
display: flex;
align-items: center;
flex-wrap: wrap;
.hasform &:first-child {
padding-bottom: 0.5em;
float: none;
}
}
.right {
@ -87,21 +77,16 @@ header {
}
// For case where content below header should merge with it
&.merged {
&.w-header--merged {
margin-bottom: 0;
padding-bottom: 1rem;
}
&.no-border {
&.w-header--no-border {
border: 0;
}
&.merged.no-border {
padding-bottom: 0;
}
&.no-v-padding {
padding-top: 0;
&.w-header--merged.w-header--no-border {
padding-bottom: 0;
}
@ -165,20 +150,20 @@ header {
// Media for Windows High Contrast
@media (forced-colors: $media-forced-colours) {
header .field-content {
.w-header .field-content {
border: 0.1em solid $system-color-link-text;
}
}
@include media-breakpoint-up(sm) {
header {
.w-header {
.row {
padding-top: 1.5rem;
padding-inline-start: 90px;
padding-inline-end: 90px;
}
&.merged .w-breadcrumb {
&.w-header--merged .w-breadcrumb {
padding-inline-start: 0;
}

1
docs/releases/4.0.md
Wyświetl plik

@ -63,6 +63,7 @@ When using a queryset to render a list of images, you can now use the `prefetch_
* Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
* Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
* Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
* Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
### Bug fixes

2
wagtail/admin/templates/wagtailadmin/pages/index.html
Wyświetl plik

@ -4,7 +4,7 @@
{% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
{% block content %}
<header class="header merged no-border">
<header class="w-header w-header--merged w-header--no-border">
<h1 class="visuallyhidden">Explorer</h1>
{% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' %}

4
wagtail/admin/templates/wagtailadmin/pages/preview_error.html
Wyświetl plik

@ -4,8 +4,8 @@
{% block titletag %}{% trans 'Preview error' %}{% endblock %}
{% block content %}
<header class="header header--with-padding">
<h1 class="header__title">{% trans 'Preview error' %}</h1>
<header class="w-header w-header--with-padding">
<h1 class="w-header__title">{% trans 'Preview error' %}</h1>
</header>
<div class="nice-padding">
<p>

8
wagtail/admin/templates/wagtailadmin/reports/base_report.html
Wyświetl plik

@ -4,13 +4,13 @@
{% block titletag %}{{ title }}{% endblock %}
{% block content %}
<header class="header" role="banner">
<header class="w-header" role="banner">
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% if header_icon %}{% icon name=header_icon %}{% endif %}
{{ title }}{% if subtitle %} <span class="header__subtitle">{{ subtitle }}</span>{% endif %}
<h1 class="w-header__title">
{% if header_icon %}{% icon class_name="w-header__glpyh" name=header_icon %}{% endif %}
{{ title }}{% if subtitle %} <span class="w-header__subtitle">{{ subtitle }}</span>{% endif %}
</h1>
</div>
</div>

4
wagtail/admin/templates/wagtailadmin/shared/header.html
Wyświetl plik

@ -16,12 +16,12 @@
- `action_icon` - icon for the 'action' button, default is 'icon-plus'
{% endcomment %}
<header class="{% classnames "header" classname merged|yesno:"merged," search_form|yesno:"hasform," %}">
<header class="{% classnames "w-header" classname merged|yesno:"w-header--merged," search_form|yesno:"w-header--hasform," %}">
{% block breadcrumb %}{% endblock %}
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
<h1 class="w-header__title">
{% if icon %}
{% icon class_name="w-header__glpyh" name=icon %}
{% elif avatar %}

6
wagtail/admin/templates/wagtailadmin/workflows/index.html
Wyświetl plik

@ -2,12 +2,12 @@
{% load i18n wagtailadmin_tags %}
{% block content %}
<header class="header" role="banner">
<header class="w-header" role="banner">
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
<h1 class="w-header__title">
{% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
{{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
</h1>
</div>

8
wagtail/admin/templates/wagtailadmin/workflows/task_index.html
Wyświetl plik

@ -2,13 +2,13 @@
{% load i18n wagtailadmin_tags %}
{% block content %}
<header class="header" role="banner">
<header class="w-header" role="banner">
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
{{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
<h1 class="w-header__title">
{% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
{{ view.page_title }}{% if view.subtitle %} <span class="w-header__subtitle">{{ view.subtitle }}</span>{% endif %}
</h1>
</div>
</div>

2
wagtail/admin/tests/pages/test_edit_page.py
Wyświetl plik

@ -859,7 +859,7 @@ class TestPageEdit(TestCase, WagtailTestUtils):
response, "<title>Wagtail - Preview error</title>", html=True
)
self.assertContains(
response, '<h1 class="header__title">Preview error</h1>', html=True
response, '<h1 class="w-header__title">Preview error</h1>', html=True
)
@override_settings(

8
wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
Wyświetl plik

@ -81,14 +81,14 @@
</script>
{% endblock %}
{% block content %}
<header class="header">
<header class="w-header w-header--hasform">
<form action="" method="get" novalidate>
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% icon name="form" %}
{% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span>{{ form_title }}</span>{% endblocktrans %}
<h1 class="w-header__title">
{% icon class_name="w-header__glpyh" name="form" %}
{% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span class="w-header__subtitle">{{ form_title }}</span>{% endblocktrans %}
</h1>
</div>
<div class="col search-bar">

8
wagtail/contrib/modeladmin/templates/modeladmin/index.html
Wyświetl plik

@ -17,16 +17,16 @@
{% block content %}
{% block header %}
<header class="header hasform">
<header class="w-header w-header--hasform">
{% block breadcrumb %}{% endblock %}
<div class="row">
<div class="left header-left">
<div class="col">
{% block h1 %}
<h1>
{% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
<h1 class="w-header__title">
{% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
{{ view.get_page_title }}
{% if view.get_page_subtitle %} <span class="header__subtitle">{{ view.get_page_subtitle }}</span> {% endif %}
{% if view.get_page_subtitle %} <span class="w-header__subtitle">{{ view.get_page_subtitle }}</span> {% endif %}
{% include 'modeladmin/includes/result_count.html' %}
</h1>
{% endblock %}

7
wagtail/contrib/redirects/templates/wagtailredirects/index.html
Wyświetl plik

@ -27,12 +27,15 @@
{% trans "Import redirects" as import_str %}
{% trans "Export redirects" as export_str %}
<header class="header hasform">
<header class="w-header w-header--hasform">
{% block breadcrumb %}{% endblock %}
<div class="row">
<div class="left">
<div class="col">
<h1>{% icon name="redirect" %}{{ redirects_str }}</h1>
<h1 class="w-header__title">
{% icon class_name="w-header__glpyh" name="redirect" %}
{{ redirects_str }}
</h1>
</div>
<form class="col search-form" action="{% url "wagtailredirects:index" %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate role="search">
<ul class="fields">

8
wagtail/contrib/settings/templates/wagtailsettings/edit.html
Wyświetl plik

@ -3,14 +3,14 @@
{% block titletag %}{% blocktrans trimmed %}Editing {{ setting_type_name}} - {{ instance }}{% endblocktrans %}{% endblock %}
{% block bodyclass %}menu-settings{% endblock %}
{% block content %}
<header class="header merged">
<header class="w-header w-header--merged">
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% icon name="cogs" %}
<h1 class="w-header__title">
{% icon class_name="w-header__glpyh" name="cogs" %}
{% trans "Editing" %}
<span class="header__subtitle">{{ setting_type_name|capfirst }}</span>
<span class="w-header__subtitle">{{ setting_type_name|capfirst }}</span>
</h1>
</div>
</div>

4
wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
Wyświetl plik

@ -623,8 +623,8 @@
</div>
<p>These can also have an inverted theme:</p>
<header class="header">
<div class="c-dropdown t-inverted" data-dropdown="">
<header class="w-header">
<div class="c-dropdown t-inverted" data-dropdown="">
<a class="c-dropdown__button u-btn-current">
More
<div data-dropdown-toggle="" class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">

6
wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
Wyświetl plik

@ -19,12 +19,12 @@
{% block content %}
{% include 'wagtailsnippets/snippets/headers/list_header.html' %}
<header class="header">
<header class="w-header">
<div class="row">
<div class="left">
<div class="col">
<h1 class="header__title">
{% icon name="snippet" %} {{ model_opts.verbose_name_plural|capfirst }}
<h1 class="w-header__title">
{% icon class_name="w-header__glpyh" name="snippet" %} {{ model_opts.verbose_name_plural|capfirst }}
</h1>
{% if is_searchable and search_url %}
<form class="col search-form" action="{% url search_url %}" method="get" novalidate>