Tidy up gym QR Code

[scd]

• [x] Update theCrag logo
• [x] Format for route
• [x] Fix route url so it is shorter https://github.com/theCrag/website/issues/1414
• [x] Redesign rope and route card.
• [x] translate page
• [x] Link to page from gym page
• [x] We probably want a mode where all the QR cards for routes are shown for a gym in one page

[scd]

QR codes have rope mode and route mode. Examples

Rope Mode:

https://www.thecrag.com/climbing/australia/queensland/brisbane/rocksports-indoor-climbing/room1?gym=grey,yellow,pink,green,purple

Route Mode:

https://www.thecrag.com/climbing/australia/queensland/brisbane/rocksports-indoor-climbing/room1/rope1?gym=blue

[brendanheywood]

• [x] I was utterly confused by the second url, it bears no similarity to rope 1 - until I realized there is a bug and it is showing archived routes.

• [x] Lots of the route names get cropped. I'd make the grade the same height as the qr code and let the name run across the full width and also be centered in the card. OR alternatively bring it over the top of the grade and then make the qr code full height (this won't give as much room so will still barf on long names but might look more balanced)

[scd]

Do we want the design to be similar for Rope mode and Route mode? In other words the area name in the same spot as the route name? Normally I would say obviously yes, but in this instance the space constraints are very different.

[brendanheywood]

Each gym would probably be 100% one or the other so I don't see a huge reason to make them consistent. I'm optimize each for their own use case

[scd]

How are these designs:

[brendanheywood]

yup cool

tiny things:

• [ ] move the "You're Gissing me off" down slighly, ie vertically centered between the purple border and the black line

• [ ] have the purple full fill in and make the number either white or black. We can then also make the number much larger so it can be better seen from across a room. It should also be in the same san serif font as the rest. Note the logic around background colors and wether it's white or black text should already be handled in WebHelper grade, line 1302 so you get this for free

something like this:

Note the text is only as wide as the color but this is probably double what it is now and probably enough for most route names

[brendanheywood]

Also in the gyms where I have seen individual route labels like this, they usually also have the setters name on it too. Add now? This could probably be smaller and just black on white possibly under the QR code (which I just made bigger in that mockup to be full height)

[scd]

How is this?