PeppySpectrum with MoOde

[franktw956]

I pushed the WIP commits to the develop branch last night. Update your clone of the moode repo and your next build should reflect the changes.

cd REPO_CLONE
git fetch --all
git pull origin develop

The CSS isn't fully refactored yet and so there could be some oddness in the Config screens.

Please see the results, some are the same, and some are different.

The same: Cover_View, Cover_View_Playlist, Volume, Audio_Info, Tag_View, Configurations.

Different: Main, Album_View

The stair stepping in the Queue in Playback view is most likely caused by one of the files containing HTML in a tag. Try with just the Default Playlist.

In the Library section of Preferences there is a setting named "Thumbnail columns". In my screen shots I had this set to 10/4.

it's done.

    /* Playback view Queue  */
    .playqueue li:before {font-size:1.75em;margin-top:10px;}
    .playqueue .playqueue-thumb {width:4.5em;height:4.5em;}
    /*.playqueue .pll1 {font-size:1.25rem;}*/
    /*.playqueue .pll2 {font-size:1.15rem;margin-left:calc(3.5em + 1vmin)!important}*/
    .playqueue .pll1 {font-size:1.9rem;}
    .playqueue .pll2 {font-size:1.5rem;margin-left:calc(3em + 1vmin)!important}

    /* CoverView Queue */
    #cv-playqueue {width:75vmin;}
    .cv-playqueue li:before {font-size:1.5em;margin-top:8px;}
    .cv-playqueue .playqueue-thumb {width:3.5em;height:3.5em;}
    .cv-playqueue .pll1 {font-size:1.25rem;}
    .cv-playqueue .pll2 {font-size:1rem;margin-left:calc(2.5em + 1vmin)!important}
    /* Time knob */
    #countdown {margin:0 auto;height:16.5vw;width:16.5vw;}
    #countdown div {margin:0 auto;} /* needed to center the knob */
    #countdown-display {position:absolute;top:47%;left:50%;margin-right:0px;margin-bottom:0px;transform:translate(-50%, -50%);font-size:2.5vw;font-weight:500;cursor:pointer;}
    #total {position:absolute;top:70%;left:50%;transform:translate(-50%);font-size:1.5vw;}

I'll add the changes to the next WIP commit.

Also try the following:

1. Establish same position for the Radio badge and total time.

/* Time knob */
#total {position:absolute;top:62%;left:50%;transform:translate(-50%);font-size:1.5vw;}

.total-radio {top:65%!important}

2. Bump the font size for the ... and track time

/* Playback view Queue */
.playqueue-action {font-size:1.25rem!important;}


3. Bump the font size and spacing for dropdown and context menus

/* Dropdown and context menus */

.dropdown-menu>li>a,
.viewswitch .btn {line-height:2.5rem;font-size:1.15em;}

One of the challenges is that the UI in the simulator (Chrome) is not exactly the same as on your real screen. For example in the sim the font size for the Queue looks too large to my eye,

I smaller the playgueue items (just for my personal favorites) :
    /* Playback view Queue  */
    .playqueue li:before {font-size:1.35em;margin-top:10px;}
    .playqueue .playqueue-thumb {width:3.5em;height:3.5em;}
    .playqueue .pll1 {font-size:1.35rem;}
    .playqueue .pll2 {font-size:1.15rem;margin-left:calc(3.5em + 1vmin)!important}
    .playqueue-action {font-size:1.25rem!important;}

one issue is that after gulp build-->deploy, I lost the [Folder] albumart thumbnails in plaugueue, album_view and tag_view.
Have been tried re-plug USB drive, regenerate music library, regenerate album cover thumbnail cache, restart MPD...but no success, may I know how to fix this ? thanks.