Fix header logo block size

[mparvazi]

Part of #340

Screencast-from-07-21-2022-01_21_22-PM.mp4

[NeOMakinG]

I've some doubts, should we constraint the height of the logo itself or the navbar? So it adapts to every situations

Would love your opinion @SharakPL @Hlavtox , seems like my integrations skills are getting rusty these days

[JBLach]

I think a better solution would be to leave img-fluid for the logo and add max-height: 4rem to the navbar-brand class as you say @NeOMakinG
WDYT? @mparvazi

[mparvazi]

fixed height navbar-brand & img-fluid logo

[Hlavtox]

Dont forget we need to think about CLS, space for the logo must be preserved before it loads, otherwise the page will jump.

[mparvazi]

Something like this with lazy-load script?

<img class="logo" 
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
  data-lazy="{$shop.logo_details.src}" 
  alt="{$shop.name}" 
  width="{$shop.logo_details.width}" 
  height="{$shop.logo_details.height}"
>

[JBLach]

I think it's bad practice to give a lazyload above the fold, there may be problems with CLS

[mparvazi]

Yeah that was stupid, forget about that.

[mparvazi]

{$max_logo_height = 75}
{$ratio = 1}
{if $shop.logo_details.height > $max_logo_height}
    {$ratio = $max_logo_height / $shop.logo_details.height}
{/if}

<img 
  class="logo img-fluid" 
  src="{$shop.logo_details.src}" 
  width="{$shop.logo_details.width * $ratio}" 
  height="{$shop.logo_details.height * $ratio}"
/>

[JBLach]

It's look fine for me, and the navbar-brand with inline-flex class just like in your PR

[NeOMakinG]

@Hlavtox should we take over this or can we close it?

[NeOMakinG]

Closing it because it didn't move for months, let's open it again is someone wants to do something about it