Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Help With CSS Changes and Gulp
#15
(09-18-2022, 08:35 PM)Tim Curtis Wrote: Note that the 820 release has a CoverView wide layout built in. Maybe give that a try.

Coverview is pretty cool and it is a bonus that there is a wide version. I like the timer function so it can switch into that view after a set amount of time. 

Also, for anyone else looking, here is how I ended up in terms of a layout:

   

As you can see, there is still some minor tweaking necessary, but it's close. To achieve this with the minimum amount of editing to the stock files, I added the following the the bottom of moode.css (starting at line 615):
Code:
@media (min-width: 1599px) and (max-width: 1601px) {
    
    #playback-queue {width: 400px;}
    
    #container-playqueue {width: 300px;}
        
    #playback-panel.active div#playback-controls {
        display: grid;
        grid-template-columns: 300px 300px;
        grid-template-rows: 220px 220px;
        width: 290px;
        }
    
    #timezone {
        grid-column: 1;
        grid-row: 1;
        }    
    
    #playbtns {
        grid-column: 1;
        grid-row: 2;
        padding-top: 70px;
        }
    
    #volzone {
        grid-column: 2;
        grid-row: 1;
        }
    
    #togglebtns {
        grid-column: 1;
        grid-row: 2;
        padding-top: 170px;
        }
    
    #playback-queue {width: 25%;}
    
    #playback-cover {width:400px;}
    
    div.covers {    
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 220px 220px;
        }

    #coverart-url {
        grid-column: 1/3;
        grid-row: 1/3;
        width: 400px;
        height:400px;
        margin-left: 60px;
        }
        
    #songsand {
       grid-row: 2;
        grid-column: -3;
        width: 200px;
        padding-top: 70px;
        padding-right: 50px;
        padding-left: 50px;
        }

   div.viewswitch {
        font-size: 3em;
        }

    #menu-header {
        font-size: 1.2rem;
        }

    #cv-playqueue {
        height: calc(100% - 2.75em - 100px);
        }

}

#playbar-controls {
  margin-left: 100px;
}

It's not elegant, kludgy even, but I wanted the two controls side-by-side and I wanted to make the album art as large as possible. The final change to #playbar-controls was added to all views as in album view the controls overlapped the album art and moving the controls right 100px fixed that issue.

Now I am working on fixing my music library. Very fun and thank you again all for the help!
Reply


Messages In This Thread
Help With CSS Changes and Gulp - by jener8tionx - 09-15-2022, 01:23 AM
RE: Help With CSS Changes and Gulp - by Nutul - 09-15-2022, 10:37 AM
RE: Help With CSS Changes and Gulp - by bitlab - 09-16-2022, 12:48 PM
RE: Help With CSS Changes and Gulp - by jener8tionx - 09-20-2022, 02:20 AM

Forum Jump: