UX Squished TinyMCE Editor

[muskie9]

resolves #485

This didn't turn out exactly as noted in the issue ticket from when it was last fixed. Below is the UX with adding the label. I played with ->addExtraClass('stacked') a bit but that didn't seem to change anything.

[muskie9]

I'm not a css guru, but I was playing around a bit and this may be where a bit of padding could happen:

.custom-summary {
  .ui-accordion-content,
  .ui-accordion-content .field {
    padding: 0;
  }

  // Change the caret to a plus icon
  .ui-icon-triangle-1-e {
    background-position: -16px -128px;
  }
}

I'm not sure what design patterns need to be followed and I don't have the FE build tools setup at this point.

[Cheddam]

@muskie9 Thanks for raising this, and sorry it hasn't received attention until now.

Had a play around with this PR, and it doesn't seem to render the way your screenshot suggests unless I add the $summary->addExtraClass('stacked'); you described. The added padding also seems to trigger horizontal scroll, and the layout actually looks fine without it.

If you've got some time to get this across the line, my recommendations are:

• Target the PR at the 3 branch (git rebase --onto=3 HEAD~2)
• Add the $summary->addExtraClass('stacked'); call
• Remove the added padding

If not, I'll need to close this out.

[emteknetnz]

It seems like there's going to be no further activity on this pull request, so we've closed it for now. Please open a new pull-request if you want to re-approach this work, or for anything else you think could be fixed or improved.

[lerni]

code bellow gets what the screenshot above shows with just css or also with stacked.

vendor/silverstripe/blog/client/src/styles/cms.scss:140

.custom-summary {
  .ui-accordion-content,
  .ui-accordion-content .field {
    padding: 0;

>     margin: 0;
>     &:last-of-type::after {
>       display: none;
>     }
>     .form__field-holder {
>       margin-left: 0;
>       max-width: calc(100% - 2px);
>       flex: initial;
>       padding-left: 0;
>       padding-right: 0;
>     }

    // WITH „stacked“
    // margin: 0;
    // &:last-of-type::after {
    //   display: none;
    // }
    // .form__field-holder {
    //   margin-left: 0;
    //   padding-left: 0;
    //   padding-right: 0;
    //   .mce-container {
    //     max-width: calc(100% - 2px);
    //   }
    // }
  }

  // Change the caret to a plus icon
  .ui-icon-triangle-1-e {
    background-position: -16px -128px;
  }
}

Haven’t got whats up with peerDependencies - on build yarn says bellow. To bring this further I would need know if you're OK with it - I would suggest withoutstacked and how to get jquery right in to the build. @NightJar helped me (also installed admin with yarn build env)

…/vendor/silverstripe/blog/client/src/bundles/cms.js
  2:20  error  Unable to resolve path to module ‚jquery‘  import/no-unresolved
  2:20  error  Missing file extension for „jquery“        import/extensions