Indent Headings and 'Children' items

[BDeveau]

Phase 1

• [ ] UX: Change icon from H(up), H(dn) to indent/dedent styles
• [x] UX: Rename commands from increase/decrease? to indent/dedent? unindent? deindent?
• [x] Have commands apply standard indent/dedent functionality outside of a header

  Phase 2

• [ ] Actually apply indentation via left-margin or other means on a Header
• [ ] apply indentation to all 'children' of that Header

[BDeveau]

Indentation Values Per @janasoroczak: h2: none h3: 15px h4: 30px h5: 45px h6: 60px

[caffodian]

Can we first try this with some site styles and see if it still makes sense?

We can add the settings to the document settings for the site and get a preview that way.

Also, I wish we used ems or rems, but I don't think we are set up properly for that :/

[jms21852]

@caffodian Could you clarify what is meant by site styles? I came up with these numbers by playing with styles in Chrome Inspector.

[caffodian]

https://pstatdev.pstatbeta.com/admin/doc_settings/ <-- no code changes needed

[BDeveau]

Need code changes for the indentation to apply to all children. Without which, indenting only headings and not contents is not going to test well anyways.

[caffodian]

how so?

[BDeveau]

          HEADER
subtext for that header
                    SUBHEADER
subtext for that

       HEADER
       subtext for that header
                       SUBHEADER
                       subtext for that

... looks weird, and unclear without. IMHO.

[caffodian]

No, I mean, why does it need code changes?

I think you can just use a sibling selector (https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors) and it lasts until the next such selector takes effect

[BDeveau]

OH RIGHT.. hmmmmm.. testing now

[caffodian]

Some change should make it into this code base eventually. But we should make sure everyone accepts the styling (and make sure we don't have unintended consequences on real documents - for example printer friendly sizing )

[BDeveau]

Sibling Selectors don't work quite as expected...

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent

This comes out as

h1
p
   h2
   p
      h3
      p

      p
      p

all future paragraphs are indented to the last indentation level, even if not intended to be a part of it, because they all share the common parent of document-body.

[caffodian]

Why are they not intended to be part of it? Because of the break in between?

[BDeveau]

Yes, I mean as long as you're sticking into the structure it works ok, but would that meet user's expectations? They'd need another H1/2 to bring it back into left aligned. Maybe that's not a big deal.

[BDeveau]

Nope, nevermind. This happens:

h1
p
   h2
   p
      h3
      p
h1
      p

it doesn't reset back

[caffodian]

Does it do that if the last h1 is an h2 instead?

My guess is you might have forgotten to have an h1 sibling selector because it's not indented. I could be wrong and I use a lot of reference when playing with general selectors though

[BDeveau]

Yes, because all previous levels of indentation are being applied to thelast P, and it's taking the largest value.

[caffodian]

:(

[caffodian]

http://stackoverflow.com/questions/31872535/css-successive-indenting-of-siblings-after-headings

[caffodian]

It would be nice if one of the approaches in there works. I'm a bit worried about adding more classes than strictly needed

[caffodian]

On the PolicyStat side, it just means more show changes cases to handle :(

[BDeveau]