About HTML/CSS code "Personal-Links" - EmbyServer 4790 (Update)

[Happy2Play 8281]

I will guess you go them working as I see them unless you are testing on a different server.

Looks better but not sure why you have the spaces before and after.

Can you pm your home.html.

[CarlosLima 148]

Hi thanks.
I can no longer understand why the code creates this hidden garbage. I use copy/paste with Windows.
Thanks for your help.
I sent the file.

[CarlosLima 148]

Hi,
I believe I didn't understand about the top/bottom spacing but I think we will need it.
Note in the image that the link line has advanced the field of the line above (Home and Favorites), preventing clicking with the mouse on the links.
Maybe it's the 110px that's exaggerated, I'm not sure.

[CarlosLima 148]

In celular phone, links perfects.

On mobile we have two lines of links due to the width of the screen. Would it be possible just the second row of links to go down a little?

Edited November 2, 2022 by CarlosLima

[Happy2Play 8281]

@CarlosLima Still looking at skinheader changes as you have overlap.  Will check why I am seein different on my test system.

 

[Happy2Play 8281]

@CarlosLima This should correct the issue.

@media not all and (min-width: 100em) {
@supports (height:calc(3.125em + 2 * max(3em,4em))) {
.headerTop-withSectionTabs:not(.skinHeader-tv) {
    height: calc(3.71em + max(1.2em,env(safe-area-inset-top,0)));
}}}

@media not all and (min-width: 100em) {
@supports (height:calc(3.125em + 2 * max(3em,4em))) {
.headerTop-withSectionTabs.headroom-scrolling:not(.skinHeader-tv) {
    height: calc(3.71em + 2 * max(1.2em,env(safe-area-inset-top,0)));
}}}

Along with change this "top: 65px !important;" to something like75px or more.

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 55%;
	}
	.Personal-Links {
	top: 75px !important;
	}
}

 

[CarlosLima 148]

Should I keep the home.HTML the way you sent it, without changing anything, and add these two CSS?

[Happy2Play 8281]

1 minute ago, CarlosLima said:

Should I keep the home.HTML the way you sent it, without changing anything, and add these two CSS?

Yes

But you may have to change the 100em to 120em on both as I am seeing in my tests.

[CarlosLima 148]

Yes, I changed the two CSS from 100em to 120em.
On the pc the vertical/horizontal spacing and the perfect links are now perfect.
On mobile, I think it overlapped the Home and Favorites links line.

Edited November 2, 2022 by CarlosLima

[Happy2Play 8281]

@CarlosLima Yep was just looking at that to see if can fix it.

[Happy2Play 8281]

@CarlosLima Remove previous code and just do this.

/*Move HeaderTop up*/
@media (min-width: 80em) {
div.headerMiddle.sectionTabs.headerMiddle-withSectionTabs:not(.headerMiddle-tv) {    
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: 60%;
   }

div.Personal-Links {
	top: 75px !important;
	}
}

div.headerMiddle.sectionTabs {margin-top: 0;}

 

[CarlosLima 148]

Thanks for your effort.  Before applying this css should i remove the last two css you uploaded or just the last of them?

[Happy2Play 8281]

4 minutes ago, CarlosLima said:

Thanks for your effort.  Before applying this css should i remove the last two css you uploaded or just the last of them?

Remove all from this post and replace with above.

https://emby.media/community/index.php?/topic/109775-about-html-code-personal-links-embyserver-4730/&do=findComment&comment=1196951

 

[CarlosLima 148]

I understand perfectly, I will remove both. Thanks.

[Happy2Play 8281]

You have duplicate code that needs removed.

/* #21ok - Home, Inicio, Favoritos acima - Happy2Play-020722 */
@media (min-width: 80em) {
   .headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 55%;
   }
   .Personal-Links {
   top: 65px !important;
   }
}

 

[CarlosLima 148]

Done.
Now we have this frame.
On mobile, 100% perfect, alignments, spacing and clickable links.
On PC, it is not possible to click on the links.
The top row (Home and Favorites) are right-aligned.

Edited November 2, 2022 by CarlosLima

[CarlosLima 148]

12 minutes ago, Happy2Play said:

Você tem um código duplicado que precisa ser removido.

 

Removed.
Sorry for that glitch, I totally forgot.

[Happy2Play 8281]

7 minutes ago, CarlosLima said:

On mobile, 100% perfect, alignments, spacing and clickable links.
On PC, it is not possible to click on the links.

Will keep looking as getting one working breaks the other.

[CarlosLima 148]

I removed the duplicate code and the line was correct in the center.
Understood. Thanks

[Happy2Play 8281]

@CarlosLima Alright how about adding this.

@media (min-width: 80em) {
    div.headerTop-withSectionTabs:not(.skinHeader-tv), div.headerTop-withSectionTabs.headroom-scrolling:not(.skinHeader-tv) {
        height: calc(3.71em + max(1.2em,env(safe-area-inset-top,0)));
}}

 

Edited November 2, 2022 by Happy2Play
added scroller

[CarlosLima 148]

/*Move HeaderTop up*/
@media (min-width: 80em) {
div.headerMiddle.sectionTabs.headerMiddle-withSectionTabs:not(.headerMiddle-tv) {    
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: 60%;
   }

div.Personal-Links {
	top: 75px !important;
	}
}

div.headerMiddle.sectionTabs {margin-top: 0;}

@media (min-width: 100em) {
div.headerTop-withSectionTabs:not(.skinHeader-tv) {
    height: calc(3.71em + max(1.2em,env(safe-area-inset-top,0)));
}}

If I understand correctly, should I add these lines as a complement and so the code will look like this?

[Happy2Play 8281]

@CarlosLima Correct, but made minor changes above to min-width and added scroller.

[CarlosLima 148]

I believe the add-on has widened the height of the top bar.
I use transparency in the top bar, image1, and when you go up the screen you can see the height of the top bar, which overlaps the links, which were hidden, imagem2.
I'm not sure, but I believe that's it.

Edited November 2, 2022 by CarlosLima

[Happy2Play 8281]

16 minutes ago, CarlosLima said:

I believe the add-on has widened the height of the top bar.
I use transparency in the top bar, image1, and when you go up the screen you can see the height of the top bar, which overlaps the links, which were hidden, imagem2.
I'm not sure, but I believe that's it.

Did you do the change above to include scrolling?

https://emby.media/community/index.php?/topic/109775-about-html-code-personal-links-embyserver-4730/&do=findComment&comment=1197047

 

[CarlosLima 148]

Yeah!