Create styling that matches issue edit form mockup

I'll tackle this

One minor thing that might have not been mentioned yet: in the "Issue metadata" fieldset it feels more logical to group the "assigned" drop down to the left column (the one with the issue title). I'd place it next to the already too wide "status" dropdown.

Also, in #2125755-12: System messages removed all issue tags during D7 upgrade I mention that the tags field is too narrow (visually). What's even worse is that it is also too short (storage-wise). This causes a) not all tags to be shown when there are too many of them b) the last few tags are not stored at all.

Yes, I know. Sorry though: #1304216: A user should be able to "follow" individual pages of content and receive email notifications for new comments

Issue #2161601 by Mark Carver | webchick: Create fieldset styling that matches issue edit form mockup.
Committed to master and stage:
https://github.com/dreditor/drupal_org/commit/ddf986d17827bbb6131261f539...

Example of changes can be seen on both sites:
http://form-drupal.redesign.devdrupal.org/node/2130811 (dev)
http://page-drupal.redesign.devdrupal.org/node/2130811 (stage)

what user do I use to check this out?

I know this isn't at the needs review stage yet, but I took a peek anyway. This is not straightforward to review since the BZR repo information was removed from the dev site. To review/deploy, I will need a diff, which I can apply and review to our theme repo. The output of bzr diff sites/all/themes is usually good. Any other diff that does the same thing is of course good too.

Mark Carver restored the .bzr directory and it indeed is a whole lot more reviewable now. The initial changes look okay, although it is more than I was expecting.

The fieldset-related changes within .comments .node-project_issue-form will need some brief explanation.

It would be good to make the changes to .form-text, .form-textarea, and any any other common elements more generically. Bluecheese hasn't had a lot of attention for forms in general, and I don't want to see forms looking differently throughout the site. (If there is a good reason to do something form-specific, that's of course good.)

display: none; should not be used to work around #2097987: remove the summary field from issues.

I think the .link-button styles are redundant with .action-button.

As @drumm pointed out in #12, there appears to be a lot of changes besides just this issue. I'll work on cleaning up the dev and staging sites to only include the patches we need.

If things need to be deployed all at once, a megapatch is okay. I can sort it out. If smaller deployments are possible, they are of course preferred.

The same field set styling should be applied everywhere. Unless there is something truly specific to the issue forms, we don't want different types of field sets running around on the site.

It would be good to improve https://drupal.org/style-guide along the way too.

I can generalize these more. The only issue is how we'd deal with nested fieldsets (ie: the text formats). Currently they have their border, does it matter if there isn't one and it's the same background as the parent fieldset? Personally I think it should be a tad darker (to show that it's a collapsed block of copy). I can post a proof of concept image if you'd like?

It would be good to change the text format widget site-wide too. (If this hasn't been done already.)

Nested fieldsets look ugly no matter what, so as long as they are at least usable, in case one does show up user-facing. The theme is used on all Drupal.org sites, they might run into it even if Drupal.org itself doesn't.

Here's an actual patch, since we're not changing any actual branding resources aside from colors. Which, as @drumm pointed out, is fine since people can manually inspect in their browser.

I've addressed the feedback and commented most of the code changes and reasoning behind things.

Also, the display: none on .summary is for inside the fieldset legends themselves, not the summary field of the body.

I deployed a couple small, reviewable, chunks:

• The JS.
• -/* Project page issues edit */, which was introduced by #548898: Bluecheese + table_drag == badness, for the record.

I have not had time to review the remaining chunks. I know the one in _variables.scss is no longer needed, due to #2168069: Fully implement Sass variables through out the theme.

Attached is the remaining diff, .scss changes only. (Including the .css changes makes review a little bit harder for me, but won't stop me if I want to review it.)

The remaining changes applied cleanly. I did change a #D8D8D2 to $grey.

The only thing that jumps out at me on skimming the code is the empty declarations:

+  // Node view embeded form.
+  body:not(.page-node-edit) & {
+  }
+  // Node edit form.
+  body.page-node-edit & {
+
+  }

Otherwise, I'll review more chunks as I'm able to.

I noticed a couple more chunks that had already been applied. Attached is the remaining work as far as I can tell.

Thanks @drumm! I haven't had the time to work on this like I'd like. One note:

+++ sass/partials/drupalorg/_issue-page.scss	2014-01-21 04:13:15 +0000
@@ -148,8 +148,127 @@
+  // Node view embeded form.
+  body:not(.page-node-edit) & {
+  }
+  // Node edit form.
+  body.page-node-edit & {
+
+  }

This chunk can be removed. I started down the path of targeting the specific forms, but realized it wasn't needed. Forgot to delete.

Un-assigning myself since I don't have the time. Patch _should_ be good to go, but if anything else needs work someone else may have to pick it up.

I committed the whitespace change and .vertical-tabs fieldset.vertical-tabs-pane. The remaining patch is attached.

 table {
   margin-bottom: 0.5em;
   border-collapse: separate; /* reset borders from collapsed */
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }

This seems like it would but issue comment text up against the nodechanges and files tables directly above them. But maybe another change I haven't read & understood yet fixes that.

Committed the _forms.scss chunk.

I confirmed #26. An improved version of the table style change should be made in a new issue.

Committed the fieldset chunk. I did bump a couple styles up out of html.js &.collapsible because non-collapsible fieldsets do exist.

AFAICT this is deployed. Big improvement, it makes scanning the form much easier! Thanks! :)

Parts of it were deployed, only the _issue-page.scss chunk needs to be deployed now. But, that has some good changes for all forms in it. Change notice edit forms are a good example. So the next work to do is to make those more generic.

Hurray, more improvements coming! Thanks, d.o team! :)

I committed http://drupalcode.org/project/project_issue.git/commit/60a8ef3 to project_issue to get some overly-specific styles out of the way, so we don't have to override them in bluecheese.

http://drupalcode.org/project/bluecheese.git/commit/a4148f2 has cleanup of the patches already committed, especially making sure the vertical spacing on all forms is good. And pulling some styles out of #27 that are good for all forms.

The remainder is attached, and does need to be applied at the same time as #2159813: Display parts of the issue edit form instead of the comment form on issue pages.

This will be deployed within the next hour.

I think http://drupalcode.org/project/bluecheese.git/commit/53c2488 finishes this. The main change I made is using Susy to arrange the elements on the grid, rather than putting specific percentages in.

This is on staging now. Watch #2159813: Display parts of the issue edit form instead of the comment form on issue pages for news on deployment.