More compact layout

[christianlupus]

This PR fixes #328.

Starting at a certain screen width of currently 1600px the title and times are shifted to the right.

I am open to further suggestions

[christianlupus]

@sam-19 I am requesting your review as a confirmation that this change is okay for you as the one person most involved in the frontend development in our team.

[christianlupus]

Here are two screenshots of the page close to the boundary of 1600px window width.

[dekrabor]

Hi @christianlupus ,

first of all thanks for the great work on this app, I really enjoy it! 👍

By chance I have just today experimented with something similar on my version of your app. I like to print recepies with an image, but the current version takes way to much space for the image when printing, causing most of my recepies to be printed on multiple pages.
Therefore I made a few quick changes to the print version (see below).

Just after that I found your change here!
Would it be possible to have the shifted image also in the print view with images?
Or should I open a new feature request for that?

[christianlupus]

I just tried it out and adopted the CSS to reflect your suggestions, @dekrabor. Here is a PDF example printout:

job_192-Cookbook_-_Nextcloud.pdf

[dekrabor]

That is perfect, by far better then before!
Now I can finally print some recipes, thanks a lot @christianlupus

[sam-19]

I made a small change to the CSS to alight the left border of the meta section when it is positioned below the image (the margin to the navigation pane was very narrow). About the timers: should we try and reduce the margins between them when they are positioned next to the image and possibly try to make them the same width?

Edit: I just noticed that the layout places the meta next to an image container even if there is no image. I'll see if I can fix this in the template.

[sam-19]

Sorry for the rebase mess. At least I finally found out what was wrong with my settings. Still don't understand why DCO doesn't accept GPG-signed commits. Now the layout only adjusts when there is an actual image present. I noticed the style section uses a mix of pixels and rems. The styles should (maybe later) be changed to use only pixels.

[christianlupus]

Sorry for the rebase mess. At least I finally found out what was wrong with my settings. Still don't understand why DCO doesn't accept GPG-signed commits.

DCO is not about the GPG signature bug about the last line of the form Signed-off-by:. I think this is due to 5802c1b. As you only merged the commits together somehow, this commit is still buried somewhere in the history. I will try to rebase it if you do not mind.

Now the layout only adjusts when there is an actual image present. I noticed the style section uses a mix of pixels and rems. The styles should (maybe later) be changed to use only pixels.

For me that looks good. I have not tested it on my dev instance. I can do so, if it is desired. Just tell me.

[sam-19]

I made the time field margins narrower when it is aligned next to the image. This way there is enough room that at least the English field names are never wrapped.