From 885cf7b76c8ddfc1379d6aa5794aa746dea65d17 Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Fri, 12 Jan 2024 07:16:36 +0000 Subject: [PATCH] Clean up footer actions styles --- client/scss/components/_bulk_actions.scss | 3 + client/scss/components/_footer.scss | 224 ++++++------------ .../templates/wagtailadmin/pages/create.html | 23 +- .../templates/wagtailadmin/pages/edit.html | 23 +- .../wagtailsnippets/snippets/create.html | 2 +- .../wagtailsnippets/snippets/edit.html | 2 +- 6 files changed, 92 insertions(+), 185 deletions(-) diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss index 1cc2fabbed..3dafd9b63a 100644 --- a/client/scss/components/_bulk_actions.scss +++ b/client/scss/components/_bulk_actions.scss @@ -45,6 +45,9 @@ } .bulk-actions-buttons { + @include unlistimmediate(); + display: flex; + gap: theme('spacing.4'); border-inline-start: 1px solid theme('colors.icon-secondary'); padding-inline-start: 1.5em; diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss index 917c4b6a1b..6e67c78934 100644 --- a/client/scss/components/_footer.scss +++ b/client/scss/components/_footer.scss @@ -1,189 +1,111 @@ @use 'sass:math'; .footer { - $border-curvature: 3px; @include transition(bottom 0.5s ease 1s); @include row(); + margin-top: $mobile-nice-padding; margin-inline-start: $mobile-nice-padding; margin-inline-end: $mobile-nice-padding; z-index: 20; - ul { - @include unlist(); - } - - li { - float: inline-start; - - .dropdown li, // dropdown li - &:last-child { - margin-inline-end: 0; - } - } - - &__container { - border-radius: $border-curvature $border-curvature 0 0; - background: theme('colors.surface-menus'); - color: theme('colors.text-label-menus-default'); - margin-top: 0; - margin-inline-end: 0; - transition: transform 1s; - - &:first-child { - margin-top: 0; - } - - &.footer__container--hidden { - transform: translateY(100%); - } - - li { - margin-inline-end: 1em; - } - } - - &__save-warning { - font-size: 0.95em; - display: flex; - align-items: center; - - .icon { - font-size: 1.2em; - margin-inline-end: 0.5em; - } - - p { - margin: -0.2em 0 0 0; - } - } - - &__emphasise-span-tags span { - color: theme('colors.warning.100'); - } - - .actions { - width: 250px; - - &--primary { - width: 350px; - } - - .dropdown { - input[type='submit'], - input[type='reset'], - input[type='button'], - button, - .button { - padding-inline-end: 2.6em; - } - } - } - - .preview .dropdown { - width: 250px; - } - - .meta { - float: inline-end; - text-align: end; - padding: 7px math.div($grid-gutter-width, 2); - font-size: 0.85em; - - p { - margin: 0; - margin-inline-end: $grid-gutter-width; - white-space: nowrap; - } - - a { - color: inherit; - - &:hover { - color: theme('colors.text-link-default'); - } - } - } - - @include media-breakpoint-down(xs) { - margin-top: $mobile-nice-padding; - - .actions, - .preview, - &__container, - .preview .dropdown { - width: 100%; - } - - .meta { - p { - white-space: normal; - width: 100%; - } - - .avatar { - inset-inline-start: auto; - } - } - - &__container { - &:not(:first-child) { - border-radius: 0; - } - - &--hidden { - display: none; - } - } - - &__save-warning { - display: flex; - flex-direction: row; - justify-content: center; - } - } - @include media-breakpoint-up(sm) { + margin-top: 0; margin-inline-start: calc(#{$desktop-nice-padding} - 0.75em); margin-inline-end: $desktop-nice-padding; width: auto; position: fixed; bottom: 0; + } - > ul { - display: flex; + &__emphasise-span-tags span { + color: theme('colors.warning.100'); + } +} + +.footer__container { + border-radius: theme('borderRadius.sm') theme('borderRadius.sm') 0 0; + background: theme('colors.surface-menus'); + color: theme('colors.text-label-menus-default'); + transition: transform 1s; + + @include media-breakpoint-down(xs) { + width: 100%; + + &:not(:first-child) { + border-radius: 0; } + } - &__container { - padding: 0.75em; - margin-inline-end: 0; + @include media-breakpoint-up(sm) { + padding: theme('spacing.[2.5]'); + margin-inline-end: 0; - &:not(:first-child) { - margin-inline-start: -$border-curvature; - } + &:not(:first-child) { + margin-inline-start: calc(-1 * theme('borderRadius.sm')); } + } - &__save-warning { - margin-inline-end: 50px; + &.footer__container--hidden { + transform: translateY(100%); + + @include media-breakpoint-down(xs) { + display: none; } } } +.footer__save-warning { + font-size: 0.95em; + display: flex; + flex-direction: row; + justify-content: center; + + .icon { + font-size: 1.2em; + margin-inline-end: 0.5em; + } + + p { + margin: -0.2em 0 0 0; + } + + @include media-breakpoint-up(sm) { + margin-inline-end: 50px; + align-items: center; + } +} + // Footer control bar for performing actions on the page -footer .actions, -footer .preview { +.actions { + width: 100%; + + @include media-breakpoint-up(sm) { + width: 250px; + } + + &--primary { + @include media-breakpoint-up(sm) { + width: 350px; + } + } + .button { @apply w-leading-none w-inline-flex w-items-center; + font-weight: 600; + white-space: initial; .icon { + width: theme('spacing.4'); margin-inline-end: theme('spacing.2'); flex-shrink: 0; } } } -footer .actions { - .button { - font-weight: 600; - white-space: initial; +.actions .w-dropdown-button { + width: 100%; + + > .button { + flex-grow: 1; } } diff --git a/wagtail/admin/templates/wagtailadmin/pages/create.html b/wagtail/admin/templates/wagtailadmin/pages/create.html index f6265eba87..ecb1a6351c 100644 --- a/wagtail/admin/templates/wagtailadmin/pages/create.html +++ b/wagtail/admin/templates/wagtailadmin/pages/create.html @@ -21,22 +21,13 @@ {{ edit_handler.render_form_content }} -