Help With CSS Changes and Gulp

[jener8tionx]

Thank you!

Changing permissions worked. The thumb-gen.php file permissions were 644, as were lots of other files. I tried to change the permission through Filezila, but there were 'permission denied' erorrors so I went in through SSH and just changed everything in /var/www to 755 by going to /var/ and entering:

Code:

sudo chown -R pi:pi www
sudo chmod -R 755 www

I imagine that it might be better practice to use one build to generate the minified CSS and just transfer that to my primary build, but if I just have to change permissions after a Gulp build, that is fine too.

Considering that I am the only user of this pi, is there any risk to changing all of the permissions of /var/www to 755?

[Tim Curtis]

I don't think so, particularly since it's a pi used for testing. We do have a TODO item to go through and set permissions to "least needed" and document them but just have not gotten to it yet.

[Tim Curtis]

Actually looking at a release image /var/www/* is 0755.

[Tim Curtis]

Note that the 820 release has a CoverView wide layout built in. Maybe give that a try.

[jener8tionx]

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!