[tutorial] several bugs following the guide

I’m following the very well written tutorial, making my first steps in discovering how it works, and I see how much work has been put in the docs and in the framework to make the life of a dev easier. Even if I’m still in the early stage and I haven’t finished to review it all I’ve already discovered several bugs/issues I group them here to eventually split them in separate issues:

minor docs mistakes:

• in drawer-widget/index.js self.pushAsset('script', 'always', { when: 'always' }); is missing
• in lib/modules/drawer-widgets/public/css/always.less both .drawer-title and .drawer rules are ignored leaving it visible. I had to specify a class in the widget.html like

<h4><a data-drawer-title class="drawer-title" href="#">{{ data.widget.title }}</a></h4>
<div data-drawer class="drawer-body">
  {{ apos.area(data.widget, 'content', 
    { edit: false }) }}
</div>

and call .drawer-title and .drawer-body in the css

Visualization bugs

• When I click inside a 'apostrophe-rich-text' it goes into edit mode correctly then I click outside of it but inside of another rich-text. Now the rich text that received the click doesn’t have the ability to enter in edit mode and I have to reload the page to be able to edit again. To be clear, the problem happens in the rich-text that got the outside-click not the one initially edited. If I click outside in an area not editable (like the background) this problem doesn’t manifest. This bug also disable the bottom bar where there is the + sign to add new widgets, so this is the most problematic because disrupt the workflow completely.

• I have made a simple navigation exactly like the one described in the tutorial and inserted in a template (ie in a overridden outerLayout.html) when I make any edit action in the admin toolbar, like inserting a new Page or Person, as soon as I press save, my navigation get removed from the DOM (need a reload).

• keep following the tutorial in lib/modules/people-widgets/views/widget.html the thumbnail is not displayed and a white bar appears instead:

• following the drawer example when I insert content in the modal window the available widgets get partially hidden this is a minor thing because if you scroll they appears but still it’s not desirable.

• The UI for moving the elements and the secondary button like Edit People that appears on hover covers other elements and make impossible to correctly edit the elements underneath. One floating ui with absolute position is already problematic two are just too much! Any chance to make it more design friendly all in one toolbar with a toggle button to set display none? Consider that what is hard to do with a mouse it may be impossible to do in a mobile device

Let me know if I have to clarify any of these issue. thanks for looking into this!

[boutell]

Hi Eli, thanks for the kind words and the feedback!

Going through these…

1. Pushing the script asset always.js: this is automatic, because apostrophe-widgets pushes it, we’re subclassing apostrophe-widgets, and a pushed script or CSS asset is automatically pushed (if it exists) from the public/js or public/css folder for every subclass as well. It’s a convenience that eliminates the need to add code every time — you just create the file and it gets sent. Works nicely with the way your CSS overrides and JavaScript subclasses what came before.

2. Those CSS bugs: guilty as charged, fixing these in the docs, thanks!

3. Issue with clicking on editors consecutively: I see what you mean. I just pushed a fix for this which will get published today. Thanks!

4. Overriding outerLayout is usually not what you want. You should put your navigation in a layout.html which your page templates extend, and your layout.html should extend data.outerLayout, overriding the beforeMain, main and afterMain blocks.

The refresh of the main content area that takes place when pieces are edited via the admin bar is performed to ensure that if you changed something that is in a widget somewhere, that change is now visible. outerLayout is outside of that region.

I am not 500% sure this is all of what’s going on in your case, but please try it, and if things still seem broken, please share a github repository where I can see the issue.

1. The white bar issue: please share a github repository where I can see this issue in action.

2. Floating UI interfering with other things: cc @stuartromanek for some advice here. I’m not sure what the best approach is. Again, maybe helpful to share a repo where we can have a look at it. I know these issues get worked out in our client projects and it may be that we need to share a more complete set of example styles for having this be a pleasant experience.

(Editing on mobile is not considered in scope for Apostrophe at the moment.)

[stuartromanek]

Just catching up to this issue … we’ve consolidated editing controls to one bar per widget, overlapping can still happen on tightly stacked widgets but its at least intuitive to target the control you want.

Glad we were able to improve on the tutorial, @diramazioni I encourage you to make more granular issues if there are still problems.

Closing this.