Update footer css to work with new grid system

[markconroy]

Closes #326

What does this change?

Removes grid overrides from footer.css

[finnlewis]

I tested this and it worked agains the new changes in localgov_base, but this is only on the 2.0 branch of localgov_base now.

Might we want a new release or branch here to track that branch?

[ekes]

From the discussion iirc microsites_base will also need another version to bump up with _base.
So this would go into a 3.x branch?

[finnlewis]

Changed this to target the 3.x branch.

Do we also want to also want to change the composer.json requirement to target localgov_base:^2.0 ?
https://github.com/localgovdrupal/localgov_microsites_base/blob/2.x/composer.json#L9

[finnlewis]

Also update workflows to run tests against the new branch

[msayoung]

With four footer text blocks set, the alignment works well.

However, this doesn't respect the various "footer items alignment" options available.

[finnlewis]

Still wants some testing and updating to target 2.0 of localgov_base.

[tonypaulbarker]

I think that the feature @msayoung raised 'footer items alignment' might just work (in theory). Otherwise it would require a somewhat fiddly upgrade to the config and content. The template seems opinionated about the blocks placed so I didn't get round to testing that feature for real.

[finnlewis]

still wants some testings, @markconroy hoping to find some time for microsites soon :)

[tonypaulbarker]

However, this doesn't respect the various "footer items alignment" options available.

To get the alignment to be respected we need to do something like this:

Remove width: 100%; from localgov_base/css/layout/grid.css line 45 after grid-column: span 1;

The effect of that would be that content can move around horizontally inside the grid column and respect the alignment.
That's a change that needs to come with some health warnings.

We could add some very specific rules to override the width value and then save the upstream change for some future major version release.

On the flip side, the upstream change might be welcome, as people may be experiencing issues trying to align things with grid whilst the width of its items are 100% width.

Then change 'justify-content' to 'justify-items' where the configurable variables are applied.

There is --header-items-alignment and a few other settings I see on the group form that we might want to also take into account.

[markconroy]

I've been working on this for the past few hours now and it's quite tricky. I almost had it working by setting the lgd-row for the footer to this:

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

but that threw up issues on large screens with the items then filling up the full space (e.g. if there were 2 items, they'd be 50% width each). This might break current sites since all our columns are currently 25%. If we are happy that 2 cols should be 50% each and 3cols should be 33% each, etc - this looks like the simplest approach.

Failing that, I'm adding a commit that sets this specific lgd-row to use flexbox.

[tonypaulbarker]

@markconroy

I tested this branch with --footer-grid-column-justification set to center but I see left aligned text in the columns.

Did you have localgov_base 2x in your development environment?

What are your thoughts on deleting the width: 100% line 45 from localgov_base/css/layout/grid.css (or a similar override for the width only for the microsites footer) so we can use grid and justify-items here ?#327 (comment)

[msayoung]

@tonypaulbarker - I think the Footer items alignment only centers the columns, rather than the text within them. So I think what you've done works fine Mark.

---

@markconroy

I've been working on this for the past few hours now and it's quite tricky. I almost had it working by setting the lgd-row for the footer to this:

grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 1fr;

could you set the auto-grid columns in this context to 25%, and the child item width to 100%?

---

Final thought
Would it be ridiculous to add a new field to let users decide whether the columns were fixed width or filled the space?

[markconroy]

Would it be ridiculous to add a new field to let users decide whether the columns were fixed width or filled the space?

That's a great idea.

Maybe we get what's currently in this PR merged so it works as the current v1 works, and we file a follow-up for that new field issue?

[tonypaulbarker]

I think the Footer items alignment only centers the columns, rather than the text within them.

I re-tested without any changes and I'm not sure what actually gets aligned by the setting. Perhaps one for a follow up issue.

[msayoung]

if you have less than 4 columns, and set the "footer items alignment" to center, then the three columns will be centered in the space.

(the footer content is the dark green section)

this is with the setting: space between

does that make sense @tonypaulbarker ?

[tonypaulbarker]

@msayoung aha! That makes sense. I might have skipped over some description but let’s make sure this is clear to folks.