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