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

Design review updates - Remove tab animation, adjust tab spacing and high contrast support, sidebar alignment (#8452)

pull/8459/head
Steve Stein 2022-04-29 06:51:42 -06:00 zatwierdzone przez GitHub
rodzic 91d6606c2f
commit 20d9fd145e
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
13 zmienionych plików z 28 dodań i 24 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

11
client/scss/components/_tabs.scss
Wyświetl plik

@ -11,7 +11,7 @@
.w-tabs {
&__wrapper {
@apply w-mb-10 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
@apply w-mb-8 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
}
&__list {
@ -37,11 +37,14 @@
after:w-left-0
after:-w-bottom-px
after:w-transition-all
motion-reduce:after:w-transition-none
hover:after:w-w-full;
after:forced-colors:w-h-1
after:forced-colors:w-bg-LinkText
hover:after:w-w-full
hover:after:forced-colors:w-w-full
motion-reduce:after:w-transition-none;
&[aria-selected='true'] {
@apply after:w-w-full w-text-primary;
@apply after:w-w-full w-text-primary after:forced-colors:w-w-full;
}
}

4
client/src/components/Sidebar/menu/MenuItem.scss
Wyświetl plik

@ -5,7 +5,7 @@
position: relative;
&__link {
@apply w-text-14 w-leading-none;
@apply w-text-14 w-leading-none w-transition;
@include transition(
border-color $menu-transition-duration ease,
background-color $menu-transition-duration ease
@ -61,8 +61,6 @@
}
&--in-sub-menu {
@apply hover:w-bg-primary;
#{$root}__link,
.menuitem-label {
@apply w-leading-tight;

6
client/src/components/Sidebar/menu/SubMenuItem.scss
Wyświetl plik

@ -41,7 +41,7 @@
> h2 {
// w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
@apply w-min-h-[160px] w-mt-[45px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
@apply w-min-h-[180px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
&:before {
font-size: 4em;
@ -51,10 +51,6 @@
width: 100%;
opacity: 0.15;
}
@at-root .sidebar--slim & {
@apply w-min-h-[150px];
}
}
ul > li {

5
client/src/components/Sidebar/modules/WagtailBranding.scss
Wyświetl plik

@ -30,15 +30,14 @@ $logo-size: 110px;
border-radius: 100%;
@include media-breakpoint-up(sm) {
margin: 0 auto 4rem;
margin: 1.25rem auto;
}
// Reduce overall size when in slim mode
.sidebar--slim & {
@include show-focus-outline-inside();
margin: 1.125em auto 4em;
width: 40px;
height: 40px;
height: 110px;
}
// Remove background on 404 page

2
client/src/entrypoints/admin/comments.js
Wyświetl plik

@ -343,7 +343,7 @@ window.comments = (() => {
const commentCounter = document.createElement('div');
commentCounter.className =
'-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-6px] w-text-[0.5625rem] w-font-bold w-bg-teal-100 w-text-white w-border w-border-white w-rounded-[1rem]';
'-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-teal-100 w-text-white w-border w-border-white w-rounded-[1rem]';
commentToggle.className =
'w-h-[50px] w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary';
commentToggle.appendChild(commentCounter);

1
client/src/tokens/objectStyles.js
Wyświetl plik

@ -10,6 +10,7 @@ const borderRadius = {
const borderWidth = {
DEFAULT: '0.0625rem', // 1px
0: '0',
5: '0.3125rem',
};
// If adding new values, use T-shirt sizing naming.

7
client/tailwind.config.js
Wyświetl plik

@ -118,4 +118,11 @@ module.exports = {
// Disable text-transform so we don’t rely on uppercasing text.
textTransform: false,
},
variants: {
extend: {
backgroundColor: ['forced-colors'],
width: ['forced-colors'],
height: ['forced-colors'],
},
},
};

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

@ -6,7 +6,7 @@
{% trans "Account" as account_str %}
{% include "wagtailadmin/shared/header.html" with title=account_str icon="user" merged=1 %}
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div class="w-tabs__wrapper">
<div role="tablist" class="w-tabs__list nice-padding">
{% for tab in panels_by_tab.keys %}

4
wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.html
Wyświetl plik

@ -1,8 +1,8 @@
{% load wagtailadmin_tags i18n %}
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div class="w-tabs__wrapper">
<div role="tablist" class="w-tabs__list w-px-5 sm:w-px-[4.5rem]">
<div role="tablist" class="w-tabs__list">
{% for child in self.children %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=child.heading title=child.heading classes=child.classes|join:" " %}
{% endfor %}

2
wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.html
Wyświetl plik

@ -12,7 +12,7 @@
<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-w-[70px] 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-p-4 w-w-[50px] w-h-full 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"
>

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

@ -685,7 +685,7 @@
<section id="tabs">
<h2>Tabs</h2>
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div role="tablist" class="w-tabs__list">
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-1' title='Tab 1' %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-2' title='Tab 2' %}
@ -694,7 +694,7 @@
<p>Tabs can also indicate errors:</p>
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div role="tablist" class="w-tabs__list">
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-1' title='Tab 1' errors_count='5' %}
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-2' title='Tab 2' errors_count='55' %}

2
wagtail/users/templates/wagtailusers/users/create.html
Wyświetl plik

@ -7,7 +7,7 @@
{% trans "Add user" as add_user_str %}
{% include "wagtailadmin/shared/header.html" with title=add_user_str merged=1 icon="user" %}
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div class="w-tabs__wrapper">
<div role="tablist" class="w-tabs__list nice-padding">
{% trans "Account" as account_text %}

2
wagtail/users/templates/wagtailusers/users/edit.html
Wyświetl plik

@ -7,7 +7,7 @@
{% trans "Editing" as editing_str %}
{% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=user.get_username merged=1 icon="user" %}
<div class="w-tabs" data-tabs data-tabs-animate>
<div class="w-tabs" data-tabs>
<div class="w-tabs__wrapper">
<div role="tablist" class="w-tabs__list nice-padding">
{% trans "Account" as account_text %}