Decouple the "Links" section from the "About" section?

March 17

H all, borrowing some ideas from Apple Music and Qobuz, I've reconfigured the top sections of the Artist and Collection detail pages to group certain elements together and exactly align the two top-of-page views as follows:

(Artist page LHS, Collection page RHS)

This is working very well so far and is probably about 90%+ complete. It just needs some fine tuning before I fully concentrate on the sections below. I'm also very slowly learning about the nuances of positioning and sizing along the way...

One area I'm struggling with is the Links section, which has been moved to underneath the primary image. While I can adjust the positioning, the Links section is still part of the About section at the bottom of the pages (and probably other parent containers as well) and I can only seem to move it (absolutely or relatively) to where I want it, referenced to the About section position. As soon as the About section is moved or automatically changes its page positioning, the Links section also moves.

If I move the whole About section to near ,the top, where it won't automatically change position, then the same type of issue still arises with moving Genres and Tags back to the bottom.

Is it possible to completely 'decouple' the Links section from the About section and position it independently by referencing it to the primary image container?

That way I can more easily get the top-of-page views and bottom-of-page views rearranged separately from each other with Links at the top, positioned on it's own, away from Genres and Tags at the bottom. (Hopefully this makes sense.)

March 17

With css note that I am aware of. You need to look at editing the item.html.

As I have an old script I need to update for 4.8+ from 4.7 that moved the links back to overview

But say 4.8+ you want something sort of like this?

image.png.4cec2fad8eb86935ccc9f42595651548.png

item.html copied link section to bottom of topDetailsMain section. May have to play around with the location a little more.

Spoiler

</div>

</div>
<div class="mediaInfo verticalFieldItem detail-mediaInfoPrimary flex align-items-center flex-wrap-wrap reduce-font-size-tv mediaInfoItems readOnlyContent hide detail-lineItem">

</div>

</div>

<button is="emby-button" type="button" class="btnResume raised detailButton hide" data-mode="resume" title="${Resume}">
<i class="md-icon md-icon-fill button-icon button-icon-left autortl"></i>
<span class="resumeButtonText detailButton-lowres">${Resume}</span>
<span class="resumeButtonText detailButton-highres">${Resume}</span>
</button>

<button is="emby-button" type="button" class="btnPlayTrailer btnPlayTrailer-main hide raised detailButton" title="${Trailer}" aria-label="${Trailer}">
<i class="md-icon button-icon button-icon-left"></i>
<span>${Trailer}</span>
</button>

<button is="emby-button" type="button" class="btnShuffle hide raised detailButton" title="${Shuffle}">
<i class="md-icon button-icon button-icon-left"></i>
<span>${Shuffle}</span>
</button>

<button is="emby-button" type="button" class="btnCancelSeriesTimer hide raised detailButton" title="${HeaderCancelSeries}">
<i class="md-icon md-icon-fill button-icon button-icon-left recordingIcon-active"></i>
<span>${HeaderCancelSeries}</span>
</button>

<button is="emby-button" type="button" class="btnCancelTimer hide raised detailButton" title="${HeaderStopRecording}">
<i class="md-icon md-icon-fill button-icon button-icon-left recordingIcon-active"></i>
<span>${HeaderStopRecording}</span>
</button>

<button is="emby-button" type="button" class="btnManualRecording hide raised detailButton" title="${HeaderCreateRecording}">
<i class="md-icon md-icon-fill button-icon button-icon-left"></i>
<span>${HeaderCreateRecording}</span>
</button>

<button is="emby-downloadbutton" type="button" class="btnSyncDownload hide fab detailButton detailButton-autotext" title="${Download}">
<i class="md-icon detailButton-autotext-icon fab-icon"></i>
<div class="detailButton-autotext-text secondaryText button-text">${Download}</div>
</button>

<button is="emby-button" type="button" class="btnSortItems hide fab detailButton detailButton-autotext" title="${HeaderSortBy}" aria-label="${HeaderSortBy}">
<i class="md-icon detailButton-autotext-icon fab-icon"></i>
<div class="detailButton-autotext-text secondaryText btnSortText">${HeaderSortBy}</div>
</button>

<button is="emby-button" type="button" class="btnGroupBy hide fab detailButton detailButton-autotext" title="${HeaderGroupBy}" aria-label="${HeaderGroupBy}">
<i class="md-icon detailButton-autotext-icon fab-icon"></i>
<div class="detailButton-autotext-text secondaryText btnSortText">${HeaderGroupBy}</div>
</button>

<button is="emby-button" type="button" class="btnDeleteItem hide fab detailButton detailButton-autotext" title="${Delete}" aria-label="${Delete}">
<i class="md-icon detailButton-autotext-icon fab-icon"></i>
<div class="detailButton-autotext-text secondaryText">${Delete}</div>
</button>

<button is="emby-button" type="button" class="seriesRecordingButton detailButton raised hide" title="${HeaderRecordSeries}">
<i class="md-icon md-icon-fill button-icon button-icon-left recordingIcon"></i>
<span class="button-text seriesRecordingButtonText">${HeaderRecordSeries}</span>
</button>

<button is="emby-button" type="button" class="manageRecordingButton btnManageSeriesRecording hide detailButton raised" title="${SeriesSettings}">
<i class="md-icon button-icon button-icon-left recordingIcon"></i>
<span class="button-text seriesRecordingButtonText">${SeriesSettings}</span>
</button>

<button is="emby-button" type="button" class="singleRecordingButton detailButton hide raised" title="${Record}">
<i class="md-icon md-icon-fill button-icon button-icon-left recordingIcon"></i>
<span class="button-text singleRecordingButtonText">${Record}</span>
</button>

<button is="emby-button" type="button" class="manageRecordingButton btnManageRecording hide detailButton raised" title="${Settings}">
<i class="md-icon button-icon button-icon-left recordingIcon"></i>
<span class="button-text seriesRecordingButtonText">${Settings}</span>
</button>

</div>
<div class="verticalFieldItem deathDate hide detail-lineItem detailText-moveup">

</div>

<button disabled type="button" is="emby-button" class="button-link button-link-color-inherit btnOverviewText text-align-start" style="opacity:initial;">
<div class="overview-text readOnlyContent"></div>
</button>
<a href="#" is="emby-linkbutton" class="button-link btnReadMore hide flex-shrink-zero secondaryText">${HeaderReadMore}</a>
</div>

</div>

</div>
</div>
</div>

</div>
</div>

               <div class="verticalSection verticalSection-cards linksSection hide">
                   <h4 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right" style="margin-top: 1.25em; margin-bottom: .1em;">${Links}</h4>
                   <div style="margin-top:0;margin-bottom:0;" class="sectionTitle sectionTitle-cards itemLinks padded-left padded-left-page padded-right focusable focuscontainer-x secondaryText textItems" data-focusabletype="nearest"></div>
               </div>

</div>
</div>

<div class="verticalSection verticalSection-cards additionalPartsSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderAdditionalParts}</h2>

</div>
<div is="emby-scroller" class="emby-scroller childrenItemsScroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right" data-mousewheel="false" data-focusscroll="true" data-horizontal="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x childrenItemsContainer generalItemsContainer itemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards artistAlbumsSection hide">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-left-page padded-right">
<a is="emby-sectiontitle" href="#" class="button-link button-link-color-inherit sectionTitleTextButton">
<h2 class="sectionTitle sectionTitle-cards">${Albums}</h2>
</a>
</div>
<div is="emby-scroller" class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right" data-mousewheel="false" data-focusscroll="true" data-horizontal="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x generalItemsContainer itemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>

<div class="verticalSection verticalSection-cards collectionItemsSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${Items}</h2>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap collectionItemsContainer generalItemsContainer focuscontainer-x padded-left padded-left-page padded-right"></div>
</div>

<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer moreFromSeasonItemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards specialsSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${Specials}</h2>

<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer specialsItemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards peopleSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderCastCrew}</h2>

<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer focusable peopleItemsContainer" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards extrasSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${Extras}</h2>

<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer extrasItemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards chaptersSection hide">
<div class="sectionTitleContainer sectionTitleContainer-cards">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${Chapters}</h2>
</div>
</div>

<div class="verticalSection verticalSection-cards albumsAsComposerSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderAlbumsAsComposer}</h2>
<div is="emby-scroller" class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right" data-mousewheel="false" data-focusscroll="true" data-horizontal="true">

<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer albumsAsComposerItemsContainer focusable" data-focusabletype="nearest" data-virtualscrolllayout="horizontal-grid"></div>
</div>
</div>
<div class="verticalSection verticalSection-cards seriesScheduleSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderUpcomingOnTV}</h2>

<div class="verticalSection verticalSection-cards appearsOnListsSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderIncludedIn}</h2>

</div>

<div class="verticalSection verticalSection-cards similarSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderMoreLikeThis}</h2>

<div class="verticalSection verticalSection-cards similarOnLiveTVCollapsible hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right">${HeaderMoreLikeThisOnLiveTV}</h2>

<div class="verticalSection verticalSection-cards seriesTimerScheduleSection padded-left padded-left-page padded-right hide">
<h2 class="sectionTitle" style="margin-bottom: 0;">
${Schedule}
</h2>
<div is="emby-itemscontainer" class="itemsContainer seriesTimerScheduleItemsContainer vertical-list focuscontainer-x" data-monitor="Timers"></div>
</div>

<h2 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right" style="margin-top:.5em;margin-bottom:0;">${About}</h2>

<div class="verticalSection verticalSection-cards genresSection hide">
<h4 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right" style="margin-top:1.25em;margin-bottom:.1em;">${Genres}</h4>
<div style="margin-top:0;margin-bottom:0;" class="sectionTitle sectionTitle-cards itemGenres padded-left padded-left-page padded-right focusable focuscontainer-x secondaryText textItems" data-focusabletype="nearest"></div>
</div>

<div class="verticalSection verticalSection-cards studiosSection hide">
<h4 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right" style="margin-top: 1.25em; margin-bottom: .1em;">${Studios}</h4>
<div style="margin-top:0;margin-bottom:0;" class="sectionTitle sectionTitle-cards itemStudios padded-left padded-left-page padded-right focusable focuscontainer-x secondaryText textItems" data-focusabletype="nearest"></div>
</div>

<div class="verticalSection verticalSection-cards linksSection hide">
<h4 class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right" style="margin-top: 1.25em; margin-bottom: .1em;">${Links}</h4>
<div style="margin-top:0;margin-bottom:0;" class="sectionTitle sectionTitle-cards itemLinks padded-left padded-left-page padded-right focusable focuscontainer-x secondaryText textItems" data-focusabletype="nearest"></div>
</div>

</div>

<div class="verticalSection verticalSection-cards audioVideoMediaInfo hide mediainfo-forcehide" style="margin-top:.5em;">
<h4 class="padded-left padded-left-page padded-right sectionTitle sectionTitle-cards mediaInfoHeader" style="margin-bottom:.1em;">${HeaderMediaInfo}</h4>

<div class="splitVersionContainer padded-top padded-bottom padded-left padded-left-page padded-right">
<button is="emby-button" type="button" class="raised btnSplitVersions subdued">${HeaderSplitVersionsApart}</button>
</div>

</div>
</div>

But think you want more inline with detailImageContainer and may need to look at adding in the item.js below the card. Only did drag and drop to the code in the console.

image.png.63fa4ae21c6040fd048789c63ca690ac.png

Edited March 17 by Happy2Play

March 17

Yeah, I had a sneaking suspicion that this was likely more structural rather than cosmetic. Anyway...

First I removed all my custom CSS with the goal of creating something like your first AC/DC screen shot as a starting point.
I then added just the green highlighted code into the default item.html - no changes to the Links occurred.
Then tried completely replacing item.html with your complete code - didn't work either (I must be doing something wrong?).

I'm guessing that if the HTML had worked for me, then based on your blue highlighted code, it would be possible to target the top copy Links section and make CSS changes to this while leaving the bottom original Links section as is?

BTW - I quite like the idea of having both a top and bottom Links section (a bit the same as Genres is now).

The end goal is to have a Links column of up to 6 items (left-justified or centered or something else that looks good under a circle image).

If I can get past the hurdle of the top independent positioning I don't mind spending time trying to fine-tune it myself as this helps with me learning CSS. Thanks for the assistance...

Edited March 17 by user24
yet if I open item.html I get a ${Links} section near the top and also a ${Links) section below, as per normal

March 17

Now making progress (hooray)...

Onwards and upwards (hopefully)...

Sign In

Decouple the "Links" section from the "About" section?

Recommended Posts

user24 232

Happy2Play 9351

user24 232

user24 232

Create an account or sign in to comment

Create an account

Sign in

Activity