Problem/Motivation

We punted on this for the initial commit, because it gets into a lot of questions regarding how to properly do this so it interacts well with lots of different themes.

However, currently, the off-canvas tray looks like this:

White background, serif text

And it needs to look more like this:

Proposed resolution

Update both module and theme CSS to accurately reflect the designs/

Remaining tasks

Size and position (module)

  • Make summaries and details elements span the full width of the tray
  • Remove margin from summaries and details so that they collapse together when closed
  • Increase the line height of summaries so that they are more readable
  • Remove unneeded padding top and bottom
  • reduce the size of descriptions and make darker

Font and color (theme)

  • Make font match toolbar (lucida stack from Seven theme)
  • Make tray background dark (#444)
  • Make type light (#ddd to match toolbar)
  • Make link color lighter
  • Add pencil icon to tray title (#fff)
  • Change color of close button (#ddd)
  • Remove noisy styling from table (no cell backgrounds)
  • Collapse cell borders
  • Make table full width
  • Add back table header
  • Make th font normal
  • Add back table row lines (above 1px solid #555)
  • Style buttons (match quickedit)
  • Style primary button (match quickedit)
  • Override standard dropbutton styling (no gradients)

Out of scope for this issue

  • Change table-drag icon
  • Load block config in separate container
  • Style config container header with wrench icon

User interface changes

The tray gets a dark theme and tray elements are "morticed" up to the edges of the tray to provide more horizontal space.

API changes

N/A

Data model changes

N/A

CommentFileSizeAuthor
#58 interdiff-2781577-outsidein-55-58.txt628 bytestkoleary
#58 2781577-outsidein-58.patch36.87 KBtkoleary
#56 2781577-outsidein-55.patch36.7 KBtkoleary
#48 Screen Shot 2016-09-19 at 7.08.41 AM.png144.23 KBtkoleary
#44 interdiff-2781577-37-43.txt31.48 KBtkoleary
#43 interdiff-2781577-outsidein-37-43.txt36.73 KBtkoleary
#43 2781577-outsidein-43.patch36.73 KBtkoleary
#37 Screen Shot 2016-09-09 at 7.31.33 AM.png134.24 KBtkoleary
#37 interdiff-2781577-outsidein-27-2781577-outsidein-37.txt5.6 KBtkoleary
#37 2781577-outsidein-37.patch18.74 KBtkoleary
#27 interdiff-2781577.txt1.03 KBtim.plunkett
#27 2781577-outsidein-27.patch16.76 KBtim.plunkett
#25 interdiff-2781577.txt4.96 KBtim.plunkett
#25 2781577-outsidein-24.patch16.18 KBtim.plunkett
#21 2781577-outsidein-21.patch12.59 KBtim.plunkett
#21 interdiff-2781577.txt5.63 KBtim.plunkett
#20 2781577-outsidein-19.patch10.86 KBtim.plunkett
#20 interdiff-2781577.txt2.59 KBtim.plunkett
#17 outside_in_after-17.png42.53 KBtim.plunkett
#17 outside_in_before-17.png45.57 KBtim.plunkett
#17 2781577-outsidein-17.patch9.56 KBtim.plunkett
#13 tray-specs-mvp.pdf92.36 KBtkoleary
#9 Screen Shot 2016-08-22 at 5.51.24 PM.png236.55 KBtkoleary
#6 Screen Shot 2016-08-18 at 1.41.29 PM.png52.31 KBtkoleary
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

webchick created an issue. See original summary.

xjm’s picture

Posted another potential solution (or interim improvement): #2782345: Use the admin theme for the Outside In sidebar

tkoleary’s picture

I think perhaps we should have two issues for this because there are really two somewhat different problem sets.

One is that form elements in the off canvas tray need some CSS that makes them "fit" the given space without overflow and in a more efficient and elegant arrangement.

The other is that we do not want the form in the tray to simply inherit the styling of the theme both to visually disambiguate the creation (site) from the tool (configuration form) for the user, and to avoid unintended gotchas because a front-end them could do anything, including .field-item {display: none;}.

These, it seems to me, should be handled in that order.

webchick’s picture

Issue tags: +Usability, +sprint
tedbow’s picture

Component: quickedit.module » outside_in.module
tkoleary’s picture

Issue summary: View changes
FileSize
52.31 KB
tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

Issue summary: View changes
FileSize
236.55 KB
tkoleary’s picture

Issue summary: View changes
Bojhan’s picture

This is looking great, I hope we can get it in. Kevin could you share source and full screenshot (with the full page).

I am just wondering a few things:
1) In the sidebar we use a white background, here a dark grey. I prefer dark grey, but should the two visually match, or not?
2) I wouldn't do custom checkboxes - they are a hell to maintain, if we do it - we should do it consistently across core.
3) There is no separation between the button and the "menu levels", where there is between others - I would prefer if we are consistent and always have a line between larger elements.
4) There are like 4 different styles around the button "menu levels", "advanced", "submit button", and "tools block" this looks a bit messy - can we have a consistent accordion style and place it all in there, and maybe one diverting style for the "advanced" which takes people elsewhere?
5) Why use new drag and drop slider? That's scope creep.

It looks like quite some few elements here wouldn't pass WCAG 2.0.

Would love to help out, perhaps we can schedule a meeting to just do some design brainstorming together.

tkoleary’s picture

1) In the sidebar we use a white background, here a dark grey. I prefer dark grey, but should the two visually match, or not?

I don't think they need to match necessarily. The thinking behind the dark background is to differentiate it from the site. Of course there are sites with dark backgrounds but they are a minority. At a later point we might add a configuration option for a light background and my specs file contains styles for that should we need them. This is something that may apps do.

2) I wouldn't do custom checkboxes - they are a hell to maintain, if we do it - we should do it consistently across core.

Those are Chrome's standard checkboxes. They just have box-shadow added (can be done with CSS) to pop them off the background.

3) There is no separation between the button and the "menu levels", where there is between others - I would prefer if we are consistent and always have a line between larger elements.

There is a background color change but it's subtle. I'm ok with adding a line.

4) There are like 4 different styles around the button "menu levels", "advanced", "submit button", and "tools block" this looks a bit messy - can we have a consistent accordion style and place it all in there, and maybe one diverting style for the "advanced" which takes people elsewhere?

Good idea.

5) Why use new drag and drop slider? That's scope creep.

For table drag that icon is becoming much more common than the one we use, which tends to be used for omni-directional drag and drop. What's more important to me is that there is still no good affordance for indent which I'd like to address with an additional icon, but I think that should also be a different issue.

I'm ok with making the table drag icon a different issue as well.

It looks like quite some few elements here wouldn't pass WCAG 2.0.

@tim.plunkett already pointed that out and I went through and made adjustments and re-tested. It all passes now.

Would love to help out, perhaps we can schedule a meeting to just do some design brainstorming together.

Sure, just let me know some times that would work for you.

tkoleary’s picture

FileSize
92.36 KB

@bojhan

Uploaded an MVP spec as pdf

I can also send a sketch file if you like.

tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

tkoleary’s picture

Title: Properly style outside-in sidebar » Properly style outside-in off canvas tray
tim.plunkett’s picture

Status: Active » Needs review
FileSize
9.56 KB
45.57 KB
42.53 KB

Hacks are needed for now, since \Drupal\Core\Asset\AssetResolver::sort() and \Drupal\Core\Asset\LibraryDiscoveryParser::buildByExtension() contradict each other.

When sorting by group, AssetResolver::sort() says

    // First order by group, so that all items in the CSS_AGGREGATE_DEFAULT
    // group appear before items in the CSS_AGGREGATE_THEME group. Modules may
    // create additional groups by defining their own constants.

But when actually parsing the library to set the group, LibraryDiscoveryParser::buildByExtension() says:

          // Unconditionally apply default groups for the defined asset files.
          // The library system is a dependency management system. Each library
          // properly specifies its dependencies instead of relying on a custom
          // processing order.

And then it overwrites the 'group':

            $options['group'] = $extension_type == 'theme' ? CSS_AGGREGATE_THEME : CSS_AGGREGATE_DEFAULT;

I've added an @todo, but it needs a follow-up issue.

Also needed a workaround for #2793343: Dialog drupalAutoButtons option should be respected on initial load.


The major parts left undone are:

  1. Changing the top title bar text
  2. Changing the submit button text
  3. Swapping out tabledrag images
  4. Putting images in the top title bar
  5. Putting images next to the block name at the very bottom

For 4/5, not sure why one is a pencil and one is a wrench, also why does the text differ?

Also, is the submit button really supposed to say "Save site details" for all of these? More guidance is needed there.

Finally, the comps completely ignore the Title field and the Display Title checkbox. So I left them in.


Status: Needs review » Needs work

The last submitted patch, 17: 2781577-outsidein-17.patch, failed testing.

Wim Leers’s picture

tim.plunkett’s picture

With some help from Wim, I confirmed that the hook_css_alter() is the best approach right now.
#1945262: Replace custom weights with dependencies in library declarations; introduce "before" and "after" for conditional ordering is the issue to fix that.

Also fixed the tests to adjust for the workaround for #2793343: Dialog drupalAutoButtons option should be respected on initial load.

tim.plunkett’s picture

Changed the title of the tray to be "Configure @block", and removed it from the bottom.
Changed the submit button to "Save @block".
Added the pencil icon to the titlebar.

Fixed some CSS issues when used with a theme that doesn't extend Classy.

tim.plunkett’s picture

Reviewed the color contrast, everything passes at least WCAG AA now.

Also fixed an issue with the weights on the branding block.

As far as I'm concerned, this is done.

tkoleary’s picture

Some detailed notes:

TRAY

/* Give the border less contrast with the dark background. */
{ border-left: #000; }

TITLE BAR

/* Lighter weight just looks more elegant and white text on black serves the ‘strong’ purpose without needing bold.
Also ‘normal’ is narrower and gives us a few more characters per line. */
{ font-weight: normal; color: #fff; border-bottom: 1px solid #777; }

/* Use the core close icon, not jquerys. */
{ background-image: url(/core/themes/stable/images/core/icons/ffffff/ex.svg) }

/* Make 'show row weights' link correct link color. */
{ color: #85bef4; }

TABLES

/* Disable the menu links in the table. Change 'Menu link' to 'Link', and 'enabled' to 'On'. */

/* Table heads need to be smaller and have less contrast. */
th { font-size: 90%; color: #ddd; }

/* When links are long they should be truncated, not wrap. */
td a { white-space: nowrap; max-width: 100px; text-overflow: ellipsis; }

SUMMARY AND DETAILS

/* Now that the backgrounds are the same we don't need so much padding or the border. */
summary { padding-top:.5em; padding-bottom: .5em; border-bottom: 0; }

/* So that we don’t get scrollbars. */
.details-wrapper { overflow: visible; }
/* @todo add a word-wrap option (not sure which) there so that long words don’t go off right edge and be inaccessible. */

FORM ELEMENTS

/* Text field on focus. */
input:focus { border-color: #40b6ff; outline: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px #40b6ff; background-color: #fff; }

/* Make tray buttons look like full-width buttons in mobile. */
.button { width: 100%; }

/* Drop button in the tray needs smaller text but more padding. */
.drop-button { font-size: 90%; padding-left: .8em; padding-right: .8em; line-height: 1.8em; }

/* Style select box for dark background. */
input[type="select"] { border: 1px solid #000; background-color: #777; color: #fff; }

/* When labels break to two lines remove any extra line height so lines group together and read more easily. */
label { line-heigh: normal; margin-bottom: .5em; }

/* Keep descriptions from crashing up against field items and give them less contrast. */
.description { color: #ddd; margin-top: .5em; }

webchick’s picture

Status: Needs review » Needs work

Sounds like a "needs work."

tim.plunkett’s picture

Status: Needs work » Needs review
FileSize
16.18 KB
4.96 KB

The show row weights link is already that color.

I'm not changing the input:focus, let's discuss that in a follow-up. It is very disorienting, and non-standard.

We can't style .details-wrapper, since it's non-standard markup that differs between subthemes of Stable and subthemes of Classy.

Also skipping "Style select box for dark background" as that isn't cross-browser safe and is also disorienting. We shouldn't be changing the look-and-feel of standard input elements.

Changed everything else.

tkoleary’s picture

I'm not changing the input:focus, let's discuss that in a follow-up. It is very disorienting, and non-standard.

That's lifted directly out of Seven theme.

Also skipping "Style select box for dark background" as that isn't cross-browser safe and is also disorienting. We shouldn't be changing the look-and-feel of standard input elements.

We also already do re-style the look and feel of standard input elements in Seven theme. These arguments have already come up and been resolved.

tim.plunkett’s picture

Copied that bit from Seven, with the scoping.

There is no input[type="select"] anywhere in core, nor is the color #777 used in Seven or anywhere else.

tkoleary’s picture

This is the re-styling of selects from seven theme.

/**
 * Select elements - Webkit only
 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1px 1.571em 1px 0.5em; /* LTR */
    border: 1px solid #a6a6a6;
    border-radius: 0.143em;
    background:
      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
    font-size: 0.875rem;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-font-smoothing: antialiased;
  }
  [dir="rtl"] select {
    padding: 1px 0.714em 1px 1.571em;
    background-position: 1% 63%, 0 0;
  }
  select:focus,
  select:hover {
    background-image: url(../../../../misc/icons/333333/caret-down.svg),
    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
    color: #1a1a1a;
  }
  select:hover {
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
  }
}

It's in components/form.css

If I recall correctly it's scoped to webkit because styling selects was only supported in webkit at that point.

Essentially what we should be going for is a "dark" version of this.

Bojhan’s picture

@kevin Just wondering - the "focus of eye" should be on the Edit Menu Tools part in this interaction (at least thats what I am assuming is the 80%).

Given this. I imagine we should flip the greys. Making the core interaction light grey, and the less important parts use dark grey.

I am not totally a fan of all the different border colors, not sure if we need them to pass WCAG AA.

Either way this is already 100% better than the current, so love to see it go in!

tkoleary’s picture

@TimPlunkett

I'm ok moving the select stuff to a follow-up issue, though, and calling this one complete. It checks all the boxes of the MVP design.

tkoleary’s picture

@bojhan

I tested for WCAG at the design stage and I believe everything is passing at at least AA if not AAA.

Bojhan’s picture

Could you also read the other parts of my comment? :P

tkoleary’s picture

@bojhan

Given this. I imagine we should flip the greys. Making the core interaction light grey, and the less important parts use dark grey.

I agree that the focus of the eye should be where the primary action is, but to my eye that *is* the dark area (inside the details wrapper), which has more contrast than the lighter areas.

riddhi.addweb’s picture

Issue tags: +drupal core
tkoleary’s picture

@Bojhan

Opened a follow-up issue for validating the visual design of the tray with user testing.

#2796597: Validate usability of visual design in outside-in off canvas tray with user testing

tim.plunkett’s picture

Issue tags: -drupal core
tkoleary’s picture

Changes look like this:

  • full width table,
  • selects match dropbuttons
  • darker, bigger fields
  • bigger titlebar
  • shadow on checkboxes
  • lighter drag icons
  • Shadow on whole tray
  • More RTL support
SKAUGHT’s picture

just to comment: the addition of being able to drag the tray wider/narrower is very nice.

tkoleary’s picture

@skaught

We got that for free from jquery UI AFAICT.

Bojhan’s picture

@tkoleary Alright, thats not really in line with our other styles (e.g. the toolbar we use the lighter color to emphasize, instead of the dark). However given the major improvement this already is, that nitpick is not important. I doubt we can really "test" the visual design, you test the "usability" and occasionally visual design is an artefact of that.

tkoleary’s picture

@bojhan

We can totally test visual design independent of general usability. Al we need to do is have a control. In this case the control would be the module with it's theme css turned off so that it just inherits from jquery UI.

Coupling that with a set of tasks and questions that probe clarity, discoverability, and completion time should tell us a lot of things.

Bojhan’s picture

Well we could :) But given that we rarely test, I would question it's impact vs. other tests.

tkoleary’s picture

Some work to make the file structure more clear and files more well commented.

tkoleary’s picture

FileSize
31.48 KB

Ignore the interdiff in 43, this is the correct one.

tkoleary’s picture

tkoleary’s picture

  1. +++ b/core/modules/outside_in/css/outside_in.details.css
    @@ -0,0 +1,51 @@
    + * Visual styling for summary and details in the Outside-In module off canvas tray.
    

    Copied relevant styles from details component and altered.

  2. +++ b/core/modules/outside_in/css/outside_in.form.css
    @@ -0,0 +1,110 @@
    + * Visual styling for forms in the Outside-In module off canvas tray.
    

    Copied relevant styles from form component and altered.

  3. +++ b/core/modules/outside_in/css/outside_in.module.css
    @@ -35,21 +35,7 @@
    - * @todo Remove when more general form styling is done:
    

    todo done

  4. +++ b/core/modules/outside_in/css/outside_in.table.css
    @@ -0,0 +1,74 @@
    + * Visual styling for tables in the Outside-In module off canvas tray.
    

    Copied relevant styles from table component and altered.

  5. +++ b/core/modules/outside_in/css/outside_in.tabledrag.css
    @@ -0,0 +1,104 @@
    + * Table drag behavior for outside-in module.
    

    Copied relevant styles from tabledrag component and altered.

  6. +++ b/core/modules/outside_in/css/outside_in.tabledrag.css
    @@ -0,0 +1,104 @@
    +.ui-dialog-offcanvas tr.region-message {
    

    There is a child of this issue just for messages

  7. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -3,123 +3,166 @@
    +  background-color: #50a0e9;
    +  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
    +  color: #ddd;
    +  text-shadow: none;
    +  font-weight: bold;
    

    Copied from quickedit module so button colors are consistent

  8. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -3,123 +3,166 @@
    -/* Highlight editable regions in edit mode. */
    ...
    -/* Turn off the outlines on editables when the tray is open. */
    -#main-canvas-wrapper.js-tray-open .outside-in-editable {
    -  outline: transparent;
    -  outline-color: transparent;
    -  box-shadow: none;
    -}
    -#main-canvas-wrapper.js-tray-open .contextual {
    -  opacity: 0;
    -}
    -#main-canvas-wrapper.js-tray-open .contextual:hover {
    -  opacity: 1;
    -}
    

    This never worked

  9. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -3,123 +3,166 @@
    +/* Style content in the tray. */
    

    Added after testing across multiple themes and seeing a lot of 'bleedthrough' of theme styles

  10. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -127,103 +170,37 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
    +/* Override default styling from jquery UI. */
    ...
    +/* Hide the defauld Jquery UI dialog close button. */
    

    These should be moved into a global reset css for jquery styles.

  11. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -127,103 +170,37 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
    -.ui-dialog-offcanvas details,
    

    This chunk was moved to details component

  12. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -127,103 +170,37 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
    -.ui-dialog-offcanvas table {
    

    Moved to table component

  13. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -127,103 +170,37 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
    -.ui-dialog-offcanvas #menu-overview tr,
    -.ui-dialog-offcanvas #menu-overview td,
    -.ui-dialog-offcanvas #menu-overview th {
    -  border: 0px solid #777;
    -  border-bottom-width: 1px;
    -  background: none;
    

    Scoped this to all tables in the tray

  14. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -233,119 +210,106 @@ a.tabledrag-handle:hover .handle {
    -  border-radius: 1em;
    

    237-310 moved into forms component

  15. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -233,119 +210,106 @@ a.tabledrag-handle:hover .handle {
    -  /* @todo Pick a different hover color. */
    

    todo done

  16. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -233,119 +210,106 @@ a.tabledrag-handle:hover .handle {
    -  /* @todo Pick a different hover color. */
    

    todo done

  17. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -233,119 +210,106 @@ a.tabledrag-handle:hover .handle {
    +/* Make an arrow out of borders with some fancy CSS. */
    

    CSS inherited from dropbutton that's overly complex and could be accomplished with an icon. Should be changed upstream in dropbutton.

  18. +++ b/core/modules/outside_in/css/outside_in.toolbar.css
    @@ -0,0 +1,70 @@
    + * Visual styling for the toolbar when Outside-In module is enabled.
    

    Grouped toolbar related styles

  19. +++ b/core/modules/outside_in/outside_in.libraries.yml
    @@ -6,6 +6,10 @@ drupal.outside_in:
         component:
    

    Added components

rickvug’s picture

I haven't applied the patch to test but based on the screenshot in #22 I'm wondering if the default width should be slightly wider. Look at how "Recent Content (disabled)" wraps to 3 lines. I'd expect there to be a lot more excess line wrapping in the real world. The fact that the drawer is already resizable is a big win.

My other nitpick is that the submit buttons look a few px too narrow. Overall this is looking great. Huge improvement.

tkoleary’s picture

@rickvug

Thanks!

the default width should be slightly wider. Look at how "Recent Content (disabled)" wraps to 3 lines.

In the latest patch table cells are set to whitespace nowrap with overflow ellipsis. We're also hiding the descriptions and the font size is slightly smaller so everything fits better.

Bojhan’s picture

@tkoleary Should the select list be full width too?

Bojhan’s picture

I would really like to get this in before release, I think it will have a big impact on adoption and appreciation of this module.

Can we devise a strategy to get it in sooner?

tkoleary’s picture

@tkoleary Should the select list be full width too?

It could, but then we'd need to do a lot of work on individual styling of all of the 'text type' selects like number, date etc. If we just made .form-select 100% all of those would be 100% as well (AFAICT). I think that's a good future enhancement though.

Can we devise a strategy to get it in sooner

As far as I understand this can be committed to 8.3 and backported to 8.2 immediately since it does not target any existing markup or break backwards compatibility. Please do mark it RTBC though, if you're happy with it, and we can make it happen.

Bojhan’s picture

Status: Needs review » Reviewed & tested by the community

We should do that in a future improvement.

Definitively happy with it, lets do it! It's experimental so shouldn't need thorough review on changes to CSS.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 43: 2781577-outsidein-43.patch, failed testing.

tkoleary’s picture

Rerolling patch

nod_’s picture

Issue tags: +JavaScript
tkoleary’s picture

No changes, just pulled and rebased against core.

tkoleary’s picture

Status: Needs work » Needs review
tkoleary’s picture

Found one visual regression when I tested on simplytest.me. Rerolled again.

  1. +++ b/core/modules/outside_in/css/outside_in.module.css
    @@ -38,14 +38,9 @@
    -.ui-dialog.ui-dialog-offcanvas input:focus,
    -.ui-dialog.ui-dialog-offcanvas summary:focus {
    -  outline: none;
    -  box-shadow: 2px 2px #ddd;
    -}
    

    These focus effects were too broadly scoped and are handled in theme css.

  2. +++ b/core/modules/outside_in/css/outside_in.module.css
    @@ -38,14 +38,9 @@
    -  background: #fff;
    +  background: #333;
    

    This was set to #fff when the tray background was #fff. Changing to #333 to match new tray style.

rickvug’s picture

@tkoleary The changes address my concern. This is looking great!

tkoleary’s picture

Status: Needs review » Reviewed & tested by the community

@rickvug,

Thanks! Moving back to RTBC since it's passing tests now.

  • webchick committed 7f4cbc4 on 8.3.x
    Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers:...
webchick’s picture

Status: Reviewed & tested by the community » Fixed

YAY! This looks SO much better!! So glad to get this in before 8.2.0's release.

Committed and pushed to 8.2.x and 8.3.x.

  • webchick committed fa7b647 on 8.2.x
    Issue #2781577 by tim.plunkett, tkoleary, Bojhan, rickvug, Wim Leers:...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Gábor Hojtsy’s picture

Issue tags: -sprint
tedbow’s picture

Component: outside_in.module » settings_tray.module

Changing to new settings_tray.module component. @drpal thanks for script help! :)