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

[Happy2Play 9445]

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.

[Guest]

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.

[Guest]

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.

[Guest]

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 9445]

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

 

[Happy2Play 9445]

@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;
	}
}

 

[Guest]

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

[Happy2Play 9445]

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.

[Guest]

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 9445]

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

[Happy2Play 9445]

@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;}

 

[Guest]

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

[Happy2Play 9445]

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

 

[Guest]

I understand perfectly, I will remove both. Thanks.

[Happy2Play 9445]

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;
   }
}

 

[Guest]

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

[Guest]

12 minutes ago, Happy2Play said:

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

 

Removed.
Sorry for that glitch, I totally forgot.

[Happy2Play 9445]

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.

[Guest]

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

[Happy2Play 9445]

@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

[Guest]

/*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 9445]

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

[Guest]

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 9445]

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

 

[Guest]

Yeah!