kopia lustrzana https://github.com/wagtail/wagtail
Steve Stein
GitHub
rodzic
7b4cf43e2e
commit
229fbf476a
|
|
@ -27,6 +27,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Backwards-compatibility for branding_logo customisations in legacy sidebar.
|
||||
//RemovedInWagtail218Warning Remove when removing the legacy sidebar.
|
||||
.wagtail-logo-container__mobile {
|
||||
margin-inline-end: 10px;
|
||||
background-color: #555;
|
||||
|
|
@ -40,91 +42,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wagtail-logo-container__desktop {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #555;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
|
||||
|
||||
.page404__bg & {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wagtail-logo-container-inner {
|
||||
width: 52px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
.page404__bg & {
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.wagtail-logo {
|
||||
display: block;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
|
||||
&.wagtail-logo__eye--open {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: inline !important; // doesn't work without `!important`, likely a specificity issue
|
||||
}
|
||||
|
||||
&.wagtail-logo__eye--closed {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Wagtail 'serious' animation (nod):
|
||||
&.logo-serious {
|
||||
&:hover {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Wagtail 'playful' animation (tail-wag, triggered by JS in base.html):
|
||||
&.logo-playful {
|
||||
&:hover {
|
||||
transform: rotate(8deg);
|
||||
transition: transform 1.2s ease;
|
||||
|
||||
.wagtail-logo {
|
||||
// stylelint-disable max-nesting-depth
|
||||
&.wagtail-logo__tail {
|
||||
animation: tail-wag 0.09s alternate;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
&.wagtail-logo__eye--open {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.wagtail-logo__eye--closed {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media for Windows High Contrast mode
|
||||
|
||||
@media (forced-colors: $media-forced-colours) {
|
||||
.wagtail-logo-container__desktop {
|
||||
background-color: $system-color-link-text;
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
display: block;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 0.8em;
|
||||
margin: 75px auto 0.8em;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ $nav-submenu-bg: color.adjust($color-white, $lightness: -85%);
|
|||
$nav-footer-account-bg: $nav-item-active-bg;
|
||||
$nav-footer-submenu-bg: $nav-submenu-bg;
|
||||
$nav-footer-closed-height: 50px;
|
||||
$nav-footer-submenu-height: 77px;
|
||||
$nav-footer-submenu-height: 85px;
|
||||
$nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;
|
||||
|
||||
// Nav search
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$c-page-explorer-bg: #4c4e4d;
|
||||
$c-page-explorer-bg-dark: $nav-grey-1;
|
||||
$c-page-explorer-bg-active: rgba(0, 0, 0, 0.425);
|
||||
$c-page-explorer-secondary: #a5a5a5;
|
||||
$c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
|
|
@ -10,10 +8,10 @@ $menu-footer-height: 50px;
|
|||
@import 'PageExplorerItem';
|
||||
|
||||
.c-page-explorer {
|
||||
@apply w-bg-primary-200;
|
||||
max-width: 485px;
|
||||
width: 90vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: $c-page-explorer-bg;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
|
|
@ -43,12 +41,10 @@ $menu-footer-height: 50px;
|
|||
$explorer-header-horizontal-padding: 10px;
|
||||
|
||||
.c-page-explorer__header {
|
||||
@apply w-bg-black/50 w-text-white/85;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
background-color: $c-page-explorer-bg-dark;
|
||||
border-bottom: 1px solid $c-page-explorer-bg-dark;
|
||||
color: $color-white;
|
||||
margin-inline-start: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
|
||||
height: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
|
||||
|
||||
|
|
@ -61,18 +57,9 @@ $explorer-header-horizontal-padding: 10px;
|
|||
.c-page-explorer__header__title {
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
background-color: $c-page-explorer-bg-active;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// Overrides for default link hover.
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
background-color: $c-page-explorer-bg-active;
|
||||
@apply w-bg-black/50 w-text-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,17 +70,17 @@ $explorer-header-horizontal-padding: 10px;
|
|||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
color: $c-page-explorer-secondary;
|
||||
@apply w-text-white/85;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.icon--explorer-header {
|
||||
@apply w-text-white/85;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-inline-end: 0.25rem;
|
||||
vertical-align: text-top;
|
||||
color: $c-page-explorer-secondary;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -102,16 +89,14 @@ $explorer-header-horizontal-padding: 10px;
|
|||
}
|
||||
|
||||
.c-page-explorer__header__select {
|
||||
@apply w-text-white w-bg-primary;
|
||||
$margin: 10px;
|
||||
margin-inline-end: $margin;
|
||||
|
||||
> select {
|
||||
padding: 5px 30px 5px 10px;
|
||||
|
||||
background-color: $c-page-explorer-bg-dark;
|
||||
border-radius: 0;
|
||||
border-color: #4c4e4d;
|
||||
color: $color-white;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:disabled {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,14 @@
|
|||
.c-page-explorer__item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
border-bottom: 1px solid $c-page-explorer-bg-dark;
|
||||
@apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-black/50 w-divide-x w-divide-solid w-divide-black/50 w-divide-y-0;
|
||||
}
|
||||
|
||||
.c-page-explorer__item__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
@apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1;
|
||||
padding: 1.45em 1em;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
background: $c-page-explorer-bg-active;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// Overrides for default link hover.
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $c-page-explorer-bg-active;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +22,9 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__item__link .icon {
|
||||
@apply w-text-white/85;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
color: $c-page-explorer-secondary;
|
||||
margin-inline-end: 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -44,6 +35,7 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__item__action {
|
||||
@apply w-text-white/85;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -53,21 +45,9 @@
|
|||
line-height: 1;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
color: $c-page-explorer-secondary;
|
||||
border: 0;
|
||||
border-inline-start: solid 1px $c-page-explorer-bg-dark;
|
||||
|
||||
&:focus {
|
||||
background: $c-page-explorer-bg-active;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// Overrides for default link hover.
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $c-page-explorer-secondary;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
background: $c-page-explorer-bg-active;
|
||||
color: $color-white;
|
||||
}
|
||||
|
|
@ -87,7 +67,6 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__meta {
|
||||
margin-inline-start: 0.5rem;
|
||||
color: $c-page-explorer-secondary;
|
||||
@apply w-flex w-gap-2 w-text-white/85;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ const PageExplorerItem: React.FunctionComponent<PageExplorerItemProps> = ({
|
|||
className="c-page-explorer__item__link"
|
||||
>
|
||||
{hasChildren ? childrenIcon : null}
|
||||
|
||||
<h3 className="c-page-explorer__item__title">{title}</h3>
|
||||
|
||||
{(!isPublished || localeName) && (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.c-status {
|
||||
background: $color-grey-1;
|
||||
@apply w-bg-black/50 w-tracking-tight w-text-white/85;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03rem;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,16 +17,20 @@
|
|||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
inset-inline-end: $sidebar-toggle-spacing;
|
||||
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: initial;
|
||||
inset-inline-start: initial;
|
||||
}
|
||||
|
||||
.has-messages & {
|
||||
top: $sidebar-toggle-spacing + 70px;
|
||||
|
||||
|
|
@ -37,18 +41,12 @@
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
@apply w-fixed w-flex w-flex-col w-h-full w-bg-primary w-z-[300];
|
||||
width: $menu-width;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: $menu-width;
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: $nav-grey-3;
|
||||
z-index: 300;
|
||||
|
||||
@include transition(
|
||||
width $menu-transition-duration ease,
|
||||
|
|
@ -75,11 +73,8 @@
|
|||
}
|
||||
|
||||
&__inner {
|
||||
height: 100%;
|
||||
background: $nav-grey-3;
|
||||
// On medium, make it possible for the nav links to scroll.
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
@apply w-h-full w-bg-primary w-flex w-flex-col w-flex-nowrap;
|
||||
}
|
||||
|
||||
&__collapse-toggle {
|
||||
|
|
@ -109,22 +104,12 @@
|
|||
display: none; // Nav toggle is for mobile only
|
||||
z-index: 305;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
&--open {
|
||||
position: fixed;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
color: #ccc;
|
||||
}
|
||||
@apply w-fixed hover:w-bg-primary-200 hover:w-text-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { ModuleDefinition, Sidebar, Strings } from './Sidebar';
|
||||
import { WagtailBrandingModuleDefinition } from './modules/WagtailBranding';
|
||||
import { SearchModuleDefinition } from './modules/Search';
|
||||
import { MainMenuModuleDefinition } from './modules/MainMenu';
|
||||
import { PageExplorerMenuItemDefinition } from './menu/PageExplorerMenuItem';
|
||||
|
|
@ -19,21 +18,6 @@ const STRINGS: Strings = {
|
|||
SEARCH: 'Search',
|
||||
};
|
||||
|
||||
function wagtailBrandingModule(): WagtailBrandingModuleDefinition {
|
||||
return new WagtailBrandingModuleDefinition('/admin/', {
|
||||
mobileLogo:
|
||||
'https://wagtail.org/static/wagtailadmin/images/wagtail-logo.svg',
|
||||
desktopLogoBody:
|
||||
'https://wagtail.org/static/wagtailadmin/images/logo-body.svg',
|
||||
desktopLogoTail:
|
||||
'https://wagtail.org/static/wagtailadmin/images/logo-tail.svg',
|
||||
desktopLogoEyeOpen:
|
||||
'https://wagtail.org/static/wagtailadmin/images/logo-eyeopen.svg',
|
||||
desktopLogoEyeClosed:
|
||||
'https://wagtail.org/static/wagtailadmin/images/logo-eyeclosed.svg',
|
||||
});
|
||||
}
|
||||
|
||||
function searchModule(): SearchModuleDefinition {
|
||||
return new SearchModuleDefinition('/admin/search/');
|
||||
}
|
||||
|
|
@ -258,11 +242,7 @@ function renderSidebarStory(
|
|||
}
|
||||
|
||||
export function standard() {
|
||||
return renderSidebarStory([
|
||||
wagtailBrandingModule(),
|
||||
searchModule(),
|
||||
bogStandardMenuModule(),
|
||||
]);
|
||||
return renderSidebarStory([searchModule(), bogStandardMenuModule()]);
|
||||
}
|
||||
|
||||
export function withNestedSubmenu() {
|
||||
|
|
@ -339,11 +319,7 @@ export function withNestedSubmenu() {
|
|||
),
|
||||
);
|
||||
|
||||
return renderSidebarStory([
|
||||
wagtailBrandingModule(),
|
||||
searchModule(),
|
||||
menuModule,
|
||||
]);
|
||||
return renderSidebarStory([searchModule(), menuModule]);
|
||||
}
|
||||
|
||||
export function withLargeSubmenu() {
|
||||
|
|
@ -375,11 +351,7 @@ export function withLargeSubmenu() {
|
|||
),
|
||||
);
|
||||
|
||||
return renderSidebarStory([
|
||||
wagtailBrandingModule(),
|
||||
searchModule(),
|
||||
menuModule,
|
||||
]);
|
||||
return renderSidebarStory([searchModule(), menuModule]);
|
||||
}
|
||||
|
||||
export function withoutSearch() {
|
||||
|
|
@ -557,8 +529,8 @@ function arabicMenuModule(): MainMenuModuleDefinition {
|
|||
}
|
||||
|
||||
export function rightToLeft() {
|
||||
return renderSidebarStory(
|
||||
[wagtailBrandingModule(), searchModule(), arabicMenuModule()],
|
||||
{ rtl: true, strings: STRINGS_AR },
|
||||
);
|
||||
return renderSidebarStory([searchModule(), arabicMenuModule()], {
|
||||
rtl: true,
|
||||
strings: STRINGS_AR,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,17 +183,18 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
|
|||
>
|
||||
<div className="sidebar__inner">
|
||||
<button
|
||||
className="button sidebar__collapse-toggle"
|
||||
onClick={onClickCollapseToggle}
|
||||
aria-label={strings.TOGGLE_SIDEBAR}
|
||||
aria-expanded={slim ? 'false' : 'true'}
|
||||
type="button"
|
||||
className="button sidebar__collapse-toggle hover:w-bg-primary-200 hover:text-white hover:opacity-100"
|
||||
>
|
||||
{collapsed ? (
|
||||
<Icon name="angle-double-right" />
|
||||
) : (
|
||||
<Icon name="angle-double-left" />
|
||||
)}
|
||||
<Icon
|
||||
name="expand-right"
|
||||
className={`w-transition motion-reduce:w-transition-none
|
||||
${!collapsed ? '-w-rotate-180' : ''}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -10,12 +10,15 @@ exports[`Sidebar should render with the minimum required props 1`] = `
|
|||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
className="button sidebar__collapse-toggle"
|
||||
className="button sidebar__collapse-toggle hover:w-bg-primary-200 hover:text-white hover:opacity-100"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<Icon
|
||||
name="angle-double-left"
|
||||
className="w-transition motion-reduce:w-transition-none
|
||||
-w-rotate-180
|
||||
"
|
||||
name="expand-right"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
// making the text semi-transparent
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $nav-item-hover-bg;
|
||||
color: $color-white;
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
@ -64,18 +63,16 @@
|
|||
}
|
||||
|
||||
&--in-sub-menu {
|
||||
@apply hover:w-bg-primary;
|
||||
|
||||
#{$root}__link {
|
||||
// Links inside a submenu should have normal wrapping
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $nav-item-active-bg;
|
||||
@apply w-bg-primary-200;
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
> a {
|
||||
|
|
|
|||
|
|
@ -30,11 +30,8 @@
|
|||
}
|
||||
|
||||
.sidebar-sub-menu-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $nav-submenu-bg;
|
||||
@apply w-flex w-flex-col w-bg-primary-200 w-h-screen;
|
||||
width: $menu-width;
|
||||
height: 100vh;
|
||||
|
||||
> h2,
|
||||
&__list {
|
||||
|
|
@ -42,12 +39,8 @@
|
|||
}
|
||||
|
||||
> h2 {
|
||||
display: block;
|
||||
padding: 0.2em 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: $color-menu-text;
|
||||
// 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-[35px] w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center;
|
||||
|
||||
&:before {
|
||||
font-size: 4em;
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export const SubMenuItem: React.FunctionComponent<SubMenuItemProps> = ({
|
|||
<div className="sidebar-sub-menu-panel">
|
||||
<h2
|
||||
id={`wagtail-sidebar-submenu${path.split('.').join('-')}-title`}
|
||||
className={item.classNames}
|
||||
className={`${item.classNames} w-h4`}
|
||||
>
|
||||
{item.iconName && (
|
||||
<Icon name={item.iconName} className="icon--submenu-header" />
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ exports[`SubMenuItem should render with the minimum required props 1`] = `
|
|||
className="sidebar-sub-menu-panel"
|
||||
>
|
||||
<h2
|
||||
className=""
|
||||
className=" w-h4"
|
||||
id="wagtail-sidebar-submenu-reports-title"
|
||||
/>
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
$avatar-size: 60px;
|
||||
|
||||
// stylelint-disable declaration-no-important
|
||||
.sidebar-main-menu {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
margin-bottom: $avatar-size;
|
||||
margin-bottom: 60px;
|
||||
@include transition(margin-bottom $menu-transition-duration ease);
|
||||
|
||||
&--open-footer {
|
||||
|
|
@ -48,11 +46,9 @@ $avatar-size: 60px;
|
|||
}
|
||||
|
||||
.sidebar-footer {
|
||||
position: fixed !important; // override li styling in MenuWrapper
|
||||
width: $menu-width;
|
||||
bottom: 0;
|
||||
background-color: $nav-footer-submenu-bg;
|
||||
@apply w-bg-primary w-bottom-0 w-fixed;
|
||||
transition: width $menu-transition-duration ease !important; // Override body.ready
|
||||
width: $menu-width;
|
||||
|
||||
> ul,
|
||||
ul > li {
|
||||
|
|
@ -88,76 +84,24 @@ $avatar-size: 60px;
|
|||
}
|
||||
|
||||
&__account {
|
||||
background: $nav-footer-account-bg;
|
||||
color: $color-menu-text;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include clearfix;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(100, 100, 100, 0.15);
|
||||
color: $color-white;
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
|
||||
&:before {
|
||||
color: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
$icon-size: 1.5em;
|
||||
|
||||
&-icon {
|
||||
height: $icon-size;
|
||||
width: $icon-size;
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
@include show-focus-outline-inside();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.9em;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
width: $menu-width - $avatar-size;
|
||||
line-height: $icon-size;
|
||||
position: absolute;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: $avatar-size; // Width of avatar
|
||||
inset-inline-start: $avatar-size; // Width of avatar
|
||||
transform: translateX(0);
|
||||
transition: transform $menu-transition-duration ease;
|
||||
@apply w-pl-2 w-inline-flex w-justify-between w-w-full w-translate-x-0 w-transition w-duration-150;
|
||||
}
|
||||
|
||||
&-label {
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@apply w-text-white w-text-left w-overflow-hidden w-whitespace-nowrap w-text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .sidebar--slim #{&} {
|
||||
width: $menu-width-slim;
|
||||
|
||||
&__account {
|
||||
@apply w-px-0 w-pb-3 w-justify-center;
|
||||
}
|
||||
|
||||
&__account-toggle {
|
||||
transform: translateX($menu-width-slim - $menu-width);
|
||||
@apply w-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,11 +113,4 @@ $avatar-size: 60px;
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&--open &__account-toggle {
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: $avatar-size !important;
|
||||
inset-inline-start: $avatar-size !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ interface MenuProps {
|
|||
expandingOrCollapsing: boolean;
|
||||
currentPath: string;
|
||||
strings: Strings;
|
||||
|
||||
navigate(url: string): Promise<void>;
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +203,23 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
|
|||
}
|
||||
>
|
||||
<button
|
||||
className="sidebar-footer__account"
|
||||
className="
|
||||
sidebar-footer__account
|
||||
w-bg-primary
|
||||
w-text-white
|
||||
w-flex
|
||||
w-items-center
|
||||
w-relative
|
||||
w-p-0
|
||||
w-w-full
|
||||
w-appearance-none
|
||||
w-border-0
|
||||
w-overflow-hidden
|
||||
w-px-5
|
||||
w-py-3
|
||||
hover:w-bg-primary-200
|
||||
focus:w-bg-primary-200
|
||||
w-transition"
|
||||
title={strings.EDIT_YOUR_ACCOUNT}
|
||||
onClick={onClickAccountSettings}
|
||||
aria-label={strings.EDIT_YOUR_ACCOUNT}
|
||||
|
|
@ -210,13 +227,15 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
|
|||
aria-expanded={accountSettingsOpen ? 'true' : 'false'}
|
||||
type="button"
|
||||
>
|
||||
<div className="avatar square avatar-on-dark">
|
||||
<div className="avatar avatar-on-dark w-flex-shrink-0 !w-w-[28px] !w-h-[28px]">
|
||||
<img src={user.avatarUrl} alt="" />
|
||||
</div>
|
||||
<div className="sidebar-footer__account-toggle">
|
||||
<div className="sidebar-footer__account-label">{user.name}</div>
|
||||
<div className="sidebar-footer__account-label w-label-3">
|
||||
{user.name}
|
||||
</div>
|
||||
<Icon
|
||||
className="sidebar-footer__account-icon"
|
||||
className="w-w-4 w-h-4 w-text-white"
|
||||
name={accountSettingsOpen ? 'arrow-down' : 'arrow-up'}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
.sidebar-search {
|
||||
@apply w-relative w-box-border w-flex w-items-center w-flex-row w-h-[42px] w-px-5;
|
||||
$root: &;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
height: 42px;
|
||||
|
||||
.sidebar--slim & {
|
||||
padding: 0;
|
||||
@apply w-justify-center w-p-0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
|
|
@ -19,6 +13,7 @@
|
|||
|
||||
// Beat specificity
|
||||
input:not([type='submit']) {
|
||||
@apply w-pl-[45px];
|
||||
@include show-focus-outline-inside();
|
||||
position: absolute;
|
||||
// Remove once we drop support for Safari 13.
|
||||
|
|
@ -26,9 +21,6 @@
|
|||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
// Need !important to override body.ready class
|
||||
transition: background-color $menu-transition-duration ease,
|
||||
opacity $menu-transition-duration ease !important;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
|
|
@ -48,11 +40,6 @@
|
|||
|
||||
&__submit {
|
||||
@include show-focus-outline-inside();
|
||||
position: absolute;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -64,13 +51,11 @@
|
|||
width $menu-transition-duration ease;
|
||||
|
||||
svg {
|
||||
margin-inline-end: 15px;
|
||||
margin-inline-end: 20px;
|
||||
transition: margin-inline-end $menu-transition-duration ease;
|
||||
}
|
||||
|
||||
.sidebar--slim & {
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ interface SearchInputProps {
|
|||
expandingOrCollapsing: boolean;
|
||||
searchUrl: string;
|
||||
strings: Strings;
|
||||
|
||||
navigate(url: string): void;
|
||||
}
|
||||
|
||||
|
|
@ -48,6 +49,13 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
|
|||
method="get"
|
||||
onSubmit={onSubmitForm}
|
||||
>
|
||||
<button
|
||||
className="button sidebar-search__submit"
|
||||
type="submit"
|
||||
aria-label={strings.SEARCH}
|
||||
>
|
||||
<Icon className="icon--menuitem" name="search" />
|
||||
</button>
|
||||
<label className="sidebar-search__label" htmlFor="menu-search-q">
|
||||
{strings.SEARCH}
|
||||
</label>
|
||||
|
|
@ -58,13 +66,6 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
|
|||
name="q"
|
||||
placeholder={strings.SEARCH}
|
||||
/>
|
||||
<button
|
||||
className="button sidebar-search__submit"
|
||||
type="submit"
|
||||
aria-label={strings.SEARCH}
|
||||
>
|
||||
<Icon className="icon--menuitem" name="search" />
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,12 +26,7 @@
|
|||
width $menu-transition-duration ease, height $menu-transition-duration ease,
|
||||
padding-top $menu-transition-duration ease;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
border-radius: 100%;
|
||||
|
||||
// Reduce overall size when in slim mode
|
||||
.sidebar--slim & {
|
||||
|
|
@ -47,30 +42,28 @@
|
|||
// Set wagging styles
|
||||
&--wagging {
|
||||
&:hover {
|
||||
transform: rotate(8deg);
|
||||
transition: transform 1.2s ease;
|
||||
|
||||
#{$root}__icon {
|
||||
// stylelint-disable max-nesting-depth
|
||||
&[data-part='tail'] {
|
||||
animation: tail-wag 0.09s alternate;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
// stylelint-disable max-nesting-depth
|
||||
[data-part='tail'] {
|
||||
animation: tail-wag 0.1s alternate;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
// TODO: Fix legacy specificity issues
|
||||
&[data-part='eye--open'] {
|
||||
display: none !important;
|
||||
}
|
||||
// TODO: Fix legacy specificity issues
|
||||
[data-part='eye--open'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&[data-part='eye--closed'] {
|
||||
display: inline !important;
|
||||
}
|
||||
[data-part='eye--closed'] {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bird wrapper
|
||||
&__icon-wrapper {
|
||||
@apply w-bg-white/15 w-overflow-hidden hover:w-overflow-visible;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
// Remove once we drop support for Safari 13.
|
||||
|
|
@ -80,7 +73,6 @@
|
|||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 50%;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
|
|
@ -92,11 +84,11 @@
|
|||
.sidebar--slim & {
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: -10px;
|
||||
inset-inline-start: -10px;
|
||||
left: 10px;
|
||||
inset-inline-start: 10px;
|
||||
top: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.page404__bg & {
|
||||
|
|
@ -108,35 +100,14 @@
|
|||
|
||||
// Bird icons
|
||||
&__icon {
|
||||
display: block;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
transition: left $menu-transition-duration ease,
|
||||
inset-inline-start $menu-transition-duration ease,
|
||||
width $menu-transition-duration ease,
|
||||
height $menu-transition-duration ease;
|
||||
|
||||
.sidebar--slim & {
|
||||
width: 42px;
|
||||
height: 51px;
|
||||
top: 10px;
|
||||
// Remove once we drop support for Safari 13.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
left: -10px;
|
||||
inset-inline-start: -10px;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
left: -9px;
|
||||
inset-inline-start: -9px;
|
||||
}
|
||||
|
||||
// TODO: Fix legacy specificity issues
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { ModuleDefinition, Strings } from '../Sidebar';
|
||||
|
||||
export interface LogoImages {
|
||||
mobileLogo: string;
|
||||
desktopLogoBody: string;
|
||||
desktopLogoTail: string;
|
||||
desktopLogoEyeOpen: string;
|
||||
desktopLogoEyeClosed: string;
|
||||
}
|
||||
import WagtailLogo from './WagtailLogo';
|
||||
|
||||
interface WagtailBrandingProps {
|
||||
homeUrl: string;
|
||||
images: LogoImages;
|
||||
strings: Strings;
|
||||
currentPath: string;
|
||||
navigate(url: string): void;
|
||||
|
|
@ -19,7 +11,6 @@ interface WagtailBrandingProps {
|
|||
|
||||
const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
|
||||
homeUrl,
|
||||
images,
|
||||
strings,
|
||||
currentPath,
|
||||
navigate,
|
||||
|
|
@ -102,30 +93,7 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
|
|||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
<div className="sidebar-wagtail-branding__icon-wrapper">
|
||||
<img
|
||||
className="sidebar-wagtail-branding__icon"
|
||||
data-part="body"
|
||||
src={images.desktopLogoBody}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="sidebar-wagtail-branding__icon"
|
||||
data-part="tail"
|
||||
src={images.desktopLogoTail}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="sidebar-wagtail-branding__icon"
|
||||
data-part="eye--open"
|
||||
src={images.desktopLogoEyeOpen}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="sidebar-wagtail-branding__icon"
|
||||
data-part="eye--closed"
|
||||
src={images.desktopLogoEyeClosed}
|
||||
alt=""
|
||||
/>
|
||||
<WagtailLogo />
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
|
@ -133,11 +101,9 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
|
|||
|
||||
export class WagtailBrandingModuleDefinition implements ModuleDefinition {
|
||||
homeUrl: string;
|
||||
images: LogoImages;
|
||||
|
||||
constructor(homeUrl: string, images: LogoImages) {
|
||||
constructor(homeUrl: string) {
|
||||
this.homeUrl = homeUrl;
|
||||
this.images = images;
|
||||
}
|
||||
|
||||
render({ strings, key, navigate, currentPath }) {
|
||||
|
|
@ -145,7 +111,6 @@ export class WagtailBrandingModuleDefinition implements ModuleDefinition {
|
|||
<WagtailBranding
|
||||
key={key}
|
||||
homeUrl={this.homeUrl}
|
||||
images={this.images}
|
||||
strings={strings}
|
||||
navigate={navigate}
|
||||
currentPath={currentPath}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
import React from 'react';
|
||||
|
||||
interface WagtailLogoProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const WagtailLogo = ({ className }: WagtailLogoProps) => {
|
||||
const feathersClasses = 'group-hover:w-text-black';
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={`
|
||||
${className || ''}
|
||||
sidebar-wagtail-branding__icon !w-overflow-visible w-group w-text-primary w-transition w-delay-150 w-duration-150 hover:w-scale-75 hover:w-rotate-6 hover:w-translate-y-[-20px] hover:w-translate-x-[10px] w-z-10 w-absolute w-w-[100px] w-h-[125px] w-top-[25px] w-left-[-20px]
|
||||
`}
|
||||
width="430"
|
||||
height="537"
|
||||
viewBox="0 0 430 537"
|
||||
enableBackground="new 0 0 430 537"
|
||||
xmlSpace="preserve"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
className="wagtail-logo-face"
|
||||
fill="#FFF"
|
||||
d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
|
||||
c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
|
||||
C393.958,42.106,360.062,15.018,352.963,12.781"
|
||||
/>
|
||||
<path
|
||||
className={`w-hidden ${feathersClasses}`}
|
||||
data-part="eye--closed"
|
||||
d="M343 77.2c14-16 33.8-7 33.8-7"
|
||||
fill="#261A4E"
|
||||
stroke="#231f20"
|
||||
strokeWidth="12"
|
||||
/>
|
||||
<path
|
||||
className={feathersClasses}
|
||||
data-part="eye--open"
|
||||
fill="currentColor"
|
||||
d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
|
||||
s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"
|
||||
/>
|
||||
<path
|
||||
className={feathersClasses}
|
||||
data-part="body"
|
||||
fill="currentColor"
|
||||
d="M374 176s-14-69.4-104.4-50.7C260.6 94 262 71 282 49.8c27.5-29 70-13 70-13v-24C337 6.2 322.8 5 307 5c-58 0-90.3 43.3-104 72.8L39.4 378l46.2-8.6 19.3 24.2c127.6 0 291.7-46 269-217.7"
|
||||
/>
|
||||
|
||||
<polygon
|
||||
className={feathersClasses}
|
||||
data-part="beak"
|
||||
fill="currentColor"
|
||||
points="429.948,117.665 393.96,83.063 365.567,117.665"
|
||||
/>
|
||||
<path
|
||||
data-part="feather-accent"
|
||||
fill="#FFFFFF"
|
||||
d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
|
||||
c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
|
||||
c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
|
||||
c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
|
||||
l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
|
||||
c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
|
||||
c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
|
||||
c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
|
||||
c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
|
||||
c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
|
||||
c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
|
||||
c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
|
||||
c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
|
||||
c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
|
||||
c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
|
||||
c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
className={feathersClasses}
|
||||
data-part="tail"
|
||||
fill="currentColor"
|
||||
d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WagtailLogo;
|
||||
|
|
@ -15,12 +15,28 @@ exports[`Menu should render with the minimum required props 1`] = `
|
|||
<button
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
className="sidebar-footer__account"
|
||||
className="
|
||||
sidebar-footer__account
|
||||
w-bg-primary
|
||||
w-text-white
|
||||
w-flex
|
||||
w-items-center
|
||||
w-relative
|
||||
w-p-0
|
||||
w-w-full
|
||||
w-appearance-none
|
||||
w-border-0
|
||||
w-overflow-hidden
|
||||
w-px-5
|
||||
w-py-3
|
||||
hover:w-bg-primary-200
|
||||
focus:w-bg-primary-200
|
||||
w-transition"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="avatar square avatar-on-dark"
|
||||
className="avatar avatar-on-dark w-flex-shrink-0 !w-w-[28px] !w-h-[28px]"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -31,10 +47,10 @@ exports[`Menu should render with the minimum required props 1`] = `
|
|||
className="sidebar-footer__account-toggle"
|
||||
>
|
||||
<div
|
||||
className="sidebar-footer__account-label"
|
||||
className="sidebar-footer__account-label w-label-3"
|
||||
/>
|
||||
<Icon
|
||||
className="sidebar-footer__account-icon"
|
||||
className="w-w-4 w-h-4 w-text-white"
|
||||
name="arrow-up"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -116,6 +116,14 @@ const colors = {
|
|||
usage: 'Wagtail branding, Panels, Headings, Buttons, Labels',
|
||||
contrastText: 'white',
|
||||
},
|
||||
200: {
|
||||
hex: '#261A4E',
|
||||
bgUtility: 'w-bg-primary-200',
|
||||
textUtility: 'w-text-primary-200',
|
||||
usage:
|
||||
'Accent for elements used in conjunction with primary colour in sidebar',
|
||||
contrastText: 'white',
|
||||
},
|
||||
},
|
||||
info: {
|
||||
100: {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,12 @@ module.exports = {
|
|||
none: 'none',
|
||||
},
|
||||
spacing,
|
||||
extend: {
|
||||
opacity: {
|
||||
15: '0.15',
|
||||
85: '0.85',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
typeScale,
|
||||
|
|
@ -87,5 +93,7 @@ module.exports = {
|
|||
// Disable float and clear which have poor RTL support.
|
||||
float: false,
|
||||
clear: false,
|
||||
// Disable text-transform so we don’t rely on uppercasing text.
|
||||
textTransform: false,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,6 +14,5 @@ module.exports = {
|
|||
corePlugins: {
|
||||
// Risk of clashing with existing styles.
|
||||
preflight: false,
|
||||
textTransform: false,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M353 12.8v24s-42.6-16-70 13c-20 21-21.6 44.3-12.5 75.5C361 125.3 375 176 375 176l-9.4-58.3L394 83c0-41-34-68-41-70.2"/><path clip-path="url(#SVGID_2_)" d="M374 176s-14-69.4-104.4-50.7C260.6 94 262 71 282 49.8c27.5-29 70-13 70-13v-24C337 6.2 322.8 5 307 5c-58 0-90.3 43.3-104 72.8L39.4 378l46.2-8.6 19.3 24.2c127.6 0 291.7-46 269-217.7"/><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M430 117.7L394 83l-28.4 34.7"/><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M127.2 356.7s4.2-1 11.7-2.5c7.3-1.7 18-4 30.4-7.5 6.3-1.7 13-3.7 20-6 7.2-2.4 14.6-5.2 22-8.3 7.6-3 15-6.8 22.5-11 7.4-4 14.6-8.7 21.4-14 1.7-1.3 3.5-2.5 5-4l5-4c3-3 6.2-6 9-9 3-3.2 5.4-6.5 8-9.7 1.3-1.6 2.4-3.3 3.6-5l1.8-2.4 1.6-2.6 3-5c1-1.8 2-3.5 2.8-5.2.5-1 1-1.7 1.3-2.6l1.2-2.7 2.3-5 3.7-10 2.8-9.7 2-9 1.4-8c.4-2.7.6-5 .8-7.3l.7-6.2.6-11.6 6.7.2-1 12c0 2-.4 4-.7 6.4-.3 2.3-.5 4.8-1 7.5-.6 2.6-1.2 5.4-1.7 8.4l-2.4 9c-1 3.3-2 6.6-3.2 10l-4 10.2c-1 1.8-1.8 3.5-2.6 5.3L301 260l-1.5 2.7-3 5.3-3.3 5.2-1.7 2.6-2 2.5c-1 1.7-2.4 3.4-3.7 5-2.8 3.3-5.5 6.6-8.6 9.7-3 3.2-6.2 6-9.5 9l-5 4.2-5.3 4c-7 5-14.5 9.8-22.2 13.7-7.6 4-15.3 7.4-23 10.4-7.6 3-15 5.6-22.2 7.7-7 2.3-14 4-20.3 5.7-12.7 3-23.3 5.3-30.8 6.7l-11.8 2.3"/></svg>
|
||||
|
Przed Szerokość: | Wysokość: | Rozmiar: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path d="M343 77.2c14-16 33.8-7 33.8-7" fill="none" stroke="#231f20" stroke-width="12"/></svg>
|
||||
|
Przed Szerokość: | Wysokość: | Rozmiar: 182 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.8 71.3c0 6-4.8 11-11 11s-10.7-5-10.7-11 5-11 11-11 10.8 5 10.8 11"/></svg>
|
||||
|
Przed Szerokość: | Wysokość: | Rozmiar: 218 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"/></svg>
|
||||
|
Przed Szerokość: | Wysokość: | Rozmiar: 177 B |
|
|
@ -1,32 +1,32 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="430px" height="537px" viewBox="0 0 430 537" enable-background="new 0 0 430 537" xml:space="preserve">
|
||||
<g>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
|
||||
c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
|
||||
C393.958,42.106,360.062,15.018,352.963,12.781"/>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
|
||||
s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"/>
|
||||
<path clip-path="url(#SVGID_2_)" d="M374.882,175.859c0,0-13.937-69.263-104.269-50.584c-9.15-31.225-7.514-54.4,12.447-75.489
|
||||
c27.446-28.997,69.947-13.096,69.947-13.096l0.045-23.909c-14.938-6.55-29.306-7.793-45.234-7.793
|
||||
c-58.05,0-90.339,43.279-104.013,72.822L40.449,378.081l46.114-8.633L1.876,532.531l59.087-10.6l44.912-128.322
|
||||
C233.685,393.609,397.758,347.72,374.882,175.859"/>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#231F20" points="429.948,117.665 393.96,83.063 365.567,117.665 "/>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
|
||||
c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
|
||||
c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
|
||||
c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
|
||||
l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
|
||||
c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
|
||||
c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
|
||||
c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
|
||||
c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
|
||||
c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
|
||||
c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
|
||||
c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
|
||||
c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
|
||||
c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
|
||||
c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
|
||||
c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"/>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="430px" height="537px" viewBox="0 0 430 537" enable-background="new 0 0 430 537" xml:space="preserve">
|
||||
<g>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
|
||||
c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
|
||||
C393.958,42.106,360.062,15.018,352.963,12.781"/>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
|
||||
s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"/>
|
||||
<path clip-path="url(#SVGID_2_)" d="M374.882,175.859c0,0-13.937-69.263-104.269-50.584c-9.15-31.225-7.514-54.4,12.447-75.489
|
||||
c27.446-28.997,69.947-13.096,69.947-13.096l0.045-23.909c-14.938-6.55-29.306-7.793-45.234-7.793
|
||||
c-58.05,0-90.339,43.279-104.013,72.822L40.449,378.081l46.114-8.633L1.876,532.531l59.087-10.6l44.912-128.322
|
||||
C233.685,393.609,397.758,347.72,374.882,175.859"/>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#231F20" points="429.948,117.665 393.96,83.063 365.567,117.665 "/>
|
||||
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
|
||||
c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
|
||||
c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
|
||||
c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
|
||||
l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
|
||||
c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
|
||||
c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
|
||||
c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
|
||||
c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
|
||||
c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
|
||||
c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
|
||||
c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
|
||||
c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
|
||||
c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
|
||||
c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
|
||||
c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Przed Szerokość: | Wysokość: | Rozmiar: 3.0 KiB Po Szerokość: | Wysokość: | Rozmiar: 3.0 KiB |
|
|
@ -68,13 +68,6 @@ a.button.page404__button {
|
|||
}
|
||||
}
|
||||
|
||||
// SMALL DESKTOP CHANGES:
|
||||
@include media-breakpoint-down(sm) {
|
||||
.wagtail-logo-container__desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// MOBILE CHANGES:
|
||||
@include media-breakpoint-down(xs) {
|
||||
.page404__text-container {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
{% block furniture %}
|
||||
<main class="page404__bg">
|
||||
<div class="page404__wrapper">
|
||||
<div class="w-w-full w-h-full w-max-w-6xl w-mx-auto w-flex w-items-center w-justify-center">
|
||||
{% block branding_logo %}
|
||||
{% include "wagtailadmin/shared/animated_logo.html" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<symbol id="icon-expand-right" viewBox="0 0 15 13" >
|
||||
<g opacity=".8" fill="currentColor">
|
||||
<path d="M8.26953 2.81445c-.21484.21485-.19336.53711 0 .75196l2.59957 2.44921H4.70312c-.30078 0-.51562.23633-.51562.51563v.6875c0 .30078.21484.51563.51562.51563h6.16598L8.26953 10.2051c-.19336.2148-.19336.5371 0 .7519l.47266.4727c.21484.1933.53711.1933.73047 0l4.18944-4.18947c.1934-.19335.1934-.51562 0-.73046L9.47266 2.3418c-.19336-.19336-.51563-.19336-.73047 0l-.47266.47265Z"/>
|
||||
<rect y="1" width="2" height="12" rx="1"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
|
@ -1,10 +1,5 @@
|
|||
{% load wagtailadmin_tags %}
|
||||
|
||||
<div class="wagtail-logo-container__desktop u-hidden@xs" data-animated-logo-container>
|
||||
<div class="wagtail-logo-container-inner">
|
||||
<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
|
||||
<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
|
||||
<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
|
||||
<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
|
||||
</div>
|
||||
<div class="wagtail-logo-container__desktop w-hidden sm:w-block">
|
||||
<img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt=""/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ from wagtail.admin.ui.sidebar import (
|
|||
PageExplorerMenuItem,
|
||||
SearchModule,
|
||||
SubMenuItem,
|
||||
WagtailBrandingModule,
|
||||
)
|
||||
from wagtail.telepath import JSContext
|
||||
from wagtail.test.utils import WagtailTestUtils
|
||||
|
|
@ -171,25 +170,6 @@ class TestAdaptPageExplorerMenuItem(TestCase):
|
|||
)
|
||||
|
||||
|
||||
class TestAdaptWagtailBrandingModule(TestCase):
|
||||
def test_adapt(self):
|
||||
packed = JSContext().pack(WagtailBrandingModule())
|
||||
|
||||
self.assertEqual(packed["_type"], "wagtail.sidebar.WagtailBrandingModule")
|
||||
self.assertEqual(len(packed["_args"]), 2)
|
||||
self.assertEqual(packed["_args"][0], reverse("wagtailadmin_home"))
|
||||
self.assertEqual(
|
||||
packed["_args"][1].keys(),
|
||||
{
|
||||
"desktopLogoBody",
|
||||
"desktopLogoEyeClosed",
|
||||
"desktopLogoEyeOpen",
|
||||
"desktopLogoTail",
|
||||
"mobileLogo",
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
class TestAdaptSearchModule(TestCase):
|
||||
def test_adapt(self):
|
||||
packed = JSContext().pack(SearchModule(SearchArea("Search", "/search/")))
|
||||
|
|
|
|||
|
|
@ -137,21 +137,6 @@ class WagtailBrandingModule:
|
|||
def js_args(self):
|
||||
return [
|
||||
reverse("wagtailadmin_home"),
|
||||
{
|
||||
"mobileLogo": versioned_static("wagtailadmin/images/wagtail-logo.svg"),
|
||||
"desktopLogoBody": versioned_static(
|
||||
"wagtailadmin/images/logo-body.svg"
|
||||
),
|
||||
"desktopLogoTail": versioned_static(
|
||||
"wagtailadmin/images/logo-tail.svg"
|
||||
),
|
||||
"desktopLogoEyeOpen": versioned_static(
|
||||
"wagtailadmin/images/logo-eyeopen.svg"
|
||||
),
|
||||
"desktopLogoEyeClosed": versioned_static(
|
||||
"wagtailadmin/images/logo-eyeclosed.svg"
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -962,6 +962,7 @@ def register_icons(icons):
|
|||
"duplicate.svg",
|
||||
"edit.svg",
|
||||
"ellipsis-v.svg",
|
||||
"expand-right.svg",
|
||||
"error.svg",
|
||||
"folder-inverse.svg",
|
||||
"folder-open-1.svg",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue