Skip to content

Studio: Course Outline Static Rendering/Styling - #4419

Closed
talbs wants to merge 4 commits into
bulk-publishingfrom
talbs/studio-outline-rendering
Closed

Studio: Course Outline Static Rendering/Styling#4419
talbs wants to merge 4 commits into
bulk-publishingfrom
talbs/studio-outline-rendering

Conversation

@talbs

@talbs talbs commented Jul 14, 2014

Copy link
Copy Markdown
Contributor

This work provides some rendering support of the bulk publishing-related course outline changes.

@talbs

talbs commented Jul 15, 2014

Copy link
Copy Markdown
Contributor Author

@andy-armstrong and @frrrances, this is ready for a UI review. I'd love your expertise and thoughts on the following:

  • Markup/semantics - both
  • Sass/styling architecture - @frrrances
  • UI and Visual Design - @frrrances, please have at it

I've add most UI elements back into the static template (seen locally at http://localhost:8001/template/ux/reference/outline.html), but here are a few things that still need to be added by the team in the near future:

  • Drag and drop UI
  • Editing section/subsection title button
  • Outline styling sync up in unit/container views (styles are abstracted as best as possible in anticipation)
  • JS to control collapse/expand UI, drag and drop, adding new section/subsections, and title editing

FYI, @cahrens and @explorerleslie.

@talbs talbs changed the title (WIP) Studio: Course Outline Static Rendering/Styling Studio: Course Outline Static Rendering/Styling Jul 16, 2014
@andy-armstrong

Copy link
Copy Markdown
Contributor

This is looking gorgeous. I'm so psyched I'm going to start wiring it up right now... :-)

Comment thread cms/templates/ux/reference/outline.html Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought we were going with class names like button, button-toggle, button-toggle-expand-collapse? I know that @frrrances is switching the unit page from add-button to button-add.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know - I'll sync up these and double check other button UI. Thx!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been synced up.

@andy-armstrong

Copy link
Copy Markdown
Contributor

It looks like is-hidden is no longer taking effect:

image

@talbs

talbs commented Jul 16, 2014

Copy link
Copy Markdown
Contributor Author

@andy-armstrong, can you tell me what element those styles are from in your inspector? I can proof things once I have that info,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using list-sections here is a little tricky for me. I don't know what the potential children are, I don't want to enforce a hierarchy, and even if I did I don't know how to pluralize the name! I could hack this for the key classes, but what will happen if we get a split_test included? I won't know whether the children are subsections, units or some kind of components.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we reviewed this in person last week, this semantic class naming around lists seemed okay.

If its going to be troublesome, we can definitely figure out a more flexible naming convention, but I want to avoid going back to the "list-sortable" original classes. I've looked through my Sass/CSS and my references to the list elements that contain outline elements are minimal, but I do need some sort of differentiator for subsection and unit lists (to add vertical spacing between them and their parents).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't remember everything we discussed in the semantic review, but this strikes me as not accurate given that we don't know the child types. If you need the class, I'd prefer it if we could name it for the parent instead of for the child, e.g. something like 'list-course-children', list-section-children.

Having said this, for now I've put in the special case logic for the three cases and it doesn't seem so bad. I will be interested to see what happens with split tests. I guess I'll treat them as subsections.

@andy-armstrong

Copy link
Copy Markdown
Contributor

Here's a child branch that starts to pull things together. It is still in very rough shape:

https://github.com/edx/edx-platform/pull/4442

@andy-armstrong

Copy link
Copy Markdown
Contributor

@talbs Here's a case where my is-hidden classes are being ignored. It causes the toggle button on the toolbar to render both states. It might be that I'm not using the correct styling, but we use is-hidden for a lot of programmatic control so it would be best for me if it just applied everywhere.

image

@andy-armstrong

Copy link
Copy Markdown
Contributor

@talbs Hmmm, I see now that there's an explicit style on my buttons, so maybe this is my mistake where I'm manually showing and hiding the buttons. I'll investigate when I get into the office.

@andy-armstrong

Copy link
Copy Markdown
Contributor

Btw, here's how it looks right now.

image

We definitely need to sync up on the new pattern for inline editable fields because I don't want to change the markup there as we agreed it with @frrrances and @dan-f, so that's why the titles have slightly odd stylings.

@talbs

talbs commented Jul 16, 2014

Copy link
Copy Markdown
Contributor Author

@andy-armstrong, syncing up with @frrrances is on my list. Hopefully then we can iron out markup/semantics. Let me know once the liquid hot magma cools on your wiring branch - I can sync any lighter styling issues then.

Comment thread cms/static/sass/_variables.scss Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What makes this color alt?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ack! I should remove this and the other alts (they are the RGB values you and @andywaldrop used in your wireframes+comps). I've moved to using Studio standard colors that you're using on the unit/container views for publishing status.

@talbs

talbs commented Jul 17, 2014

Copy link
Copy Markdown
Contributor Author

@frrrances, I think I've addressed all of your feedback. Let me know if there are any more concerns from a UI/visual/FED point of view and thanks for the support!

@frrrances

Copy link
Copy Markdown
Contributor

Looks good! Thanks for addressing my comments. Not sure if you need tests to pass, but I'm 👍 once you check on that.

@talbs

talbs commented Jul 18, 2014

Copy link
Copy Markdown
Contributor Author

Thanks! @andy-armstrong, I've rebased against bulk-publishing. Seeing as I haven't touched any existing/live views (my styling and markup work were done on static templates) are we worried about tests passing on this branch? If so, can you help resolve the failing tests?

talbs added 3 commits July 22, 2014 15:27
* static markup for all section states in outline UI
* static markup for all subsection states in outline UI
* static markup for all unit states in outline UI
* adding in outline-related color values
* styling for publishing states
* light styling abstraction for specific outline and unit/container contexts
* revising add item to outline button styles
* adding a few bells and whistles (hover states and error pulsing)
@talbs

talbs commented Jul 22, 2014

Copy link
Copy Markdown
Contributor Author

@andy-armstrong, I'm hands off now with all static styling. You should have what you need and I can tweak more of the interactive styling finishes once we've merged this and I'm on your branch. A few heads ups:

  • I've refactored the collapse/expand markup and CSS so that we only need two classes toggled on any item that already has a class of .is-collapsible - is-expanded and is-collapsed. The rest of the classes needed should be removed.
  • I've changed the icon one more time for draft or has-unpublished-content elements to icon-file-alt

@talbs

talbs commented Jul 23, 2014

Copy link
Copy Markdown
Contributor Author

@andy-armstrong, tests continue to fail on this branch, but my work is not touching any "live" views. I'm only adjusting style and creating the static templates we've been working on. Would you mind taking a look at the tests and giving me the skinny on whether or not we should be worried about them failing?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants