Home page box

[ajparsons]

Related to #1789 and #1791

This is a go at reducing some of the elements on the home page - as the search box now accepts postcodes, we can combine the two search boxes together. This PR:

• Applies some of the colour changes lucas suggested - but sidesteps the big homepage colour problem by getting rid of it.
• Creates an abstract search box that's customised for each Parliament
• Different images are used for each Parliament (some need to be licensed or changed before deploy)
• Adds a few quick links - which will also take the 'your mp' link when the cookie is set.

If we're broadly good with this approach, need to:

• Adjusted tests to look for new content
• Create a new 'about' box below that brings the 'who we are' onto the homepage.

Known issues:

• Not loading different sized images for mobile, etc

[ajparsons]

I think this is hitting the point where it needs a designer to have a think - @lucascumsille ?

[lucascumsille]

TODOS:

• Get rid of comments and placeholder text
• Responsive for smaller sizes screen
• Add icon to all quick links in other parliaments

[lucascumsille]

@ajparsons I have included the new layout for the "Quick links" sections. Here is a video of how it would look on mobile and desktop:

Screen.Recording.2024-08-19.at.08.59.04.mov

I notched down the size and fonts of cards so they don't look so prominent, but they are still noticeable.

Apologies for the amount of commits, I would normally rebase, but trying to run git rebase -I master causes the following issue:

hint: Waiting for your editor to close the file... error: cannot run editor: No such file or directory
error: unable to start editor 'editor'

I think is the same problem we had in the past, let me know if you know how to fix it, and I'll rebase =)

Regarding the images for the other parliaments, due to timing, I didn't have much time to keep looking, but during the week I might have some extra time. In the meantime let me know what you think of the current layout and if you need me to make some changes.

[ajparsons]

Ok, I've rebased that and fixed the tests.

On images: if you could give me an example of how you'd make the UK image responsive - I can apply that to the others.

I'm a bit stuck on the images and putting it down for the day.

NI Assembly is fine - it's a nice horizontal building that bits behind the banner.

The trouble with the other two:

Scottish Parliament: to get clean sky behind it, you're usually looking at quite a busy bit of the building architecturally - which makes it hard to layer the search box on top of it.

Like this is fine:

But is less nice than the others. Don't have to get it right first time.

Senedd I've tried a few, but the current one is the best. Again a problem where the architecturally distinctive bit is hard to layer a box onto of.

[lucascumsille]

@ajparsons I added the CSS rules + Images for the UK Parliament.

A few considerations:

• I decreased the quality while doing the compression of the images to 92% quality.

• For mobile and tablet I used images sizing from their minimum viewpoint. For example, for Tablet the image has a width of 768px because that's where medium starts. While for Desktop and Huge(1136px) I didn't create images using the minimum, I added some extra pixels. The reason behind, it's that on Desktop and Huge screens users can appreciate the image more, because there is more space. So it makes sense the quality is better for those ones.

I have added a rule for huge-screen, but considering that rule applies for screen above > 1136px, while $large from 1040px, probably is not very useful at the moment, unless we create a new variable for truly 'huge screens'

Let me know what you think

[ajparsons]

Ok, I this now does everything I think is needed - thanks for the work on those devolved parliament images Lucas.

@dracos : Is there anything in this you want to look at in more detail?

Lucas was a bit concerned that the devolved parliament images were a bit heavy even compressed. They're off the main homepage so I think that's more ok, but flagging.

[dracos]

Couple of tiny questions.
On the images - firstly, we need to take out the photos we're not using that are stock? And secondly, running e.g. the Scottish huge one through squoosh.app gets it from 85.2KB to 40.4KB kept as a webp or 59.4KB JPEG, so would like them to at least go through that. Or Senedd huge goes from 274KB to 147 or 135KB.

[dracos]

Also, just one thought - check the background colour is okay if the images don't load, I see WEBP is pretty well supported nowadays but just to be nice to anyone that doesn't get it.

[ajparsons]

Also, just one thought - check the background colour is okay if the images don't load, I see WEBP is pretty well supported nowadays but just to be nice to anyone that doesn't get it.

Quick check, it's not the prettiest but is all legible.

[ajparsons]

Ok, I need to merge that last set of fixups - but I've:

• Squished the images more
• Replaced the Scottish Parliament mobile image
• Did translation change in above comment (seems to work locally)

If ok with the different ways the Senedd and SP handle data - that should be that round of fixes.

[dracos]

All looks good - only thing is why is parliament-photo.jpg in there, it doesn't appear to be used, but there may be a reason for that