Thank you for your donation!


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


Limiting CSS impact to local display
#1
I've made some progress in figuring out how to edit css to create a screen layout that I like. However, I'd like to have my changes affect the local display only. Can anyone suggest how to do this?

One method that occurs to me is that there might be a way to link it to screen size, similar to the reformatting that I see if I view the URL on my smartphone, where there's a different layout for portrait vs landscape. Is this based on orientation (only) or screensize, or some other factor? Where are the different display options stashed?

To clarify, I'm customizing the screen layout for an attached 800x480 touchscreen, and I'd like my modifications not to affect the display for larger screens or for other orientations. Is this in panels.css or in a script somewhere else?

Any advice would be appreciated.

Also, if anyone else is modifying their display and is interested in exchanging tips, let me know...

Regards,
Michael
Michael

RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Reply
#2
Have a look at /var/www/css/moode.css in the section /* Pi 7" Touch */
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#3
(12-26-2020, 10:33 PM)Tim Curtis Wrote: Have a look at /var/www/css/moode.css in the section /* Pi 7" Touch */
Hi Tim, thanks for pointing me there.

There are many different @media sections, based on width, height, orientation. How are they kept separate? Is the total impact of moode.css @media rules the cumulative effect of all that apply? Is there a heirarchy of order?

BTW, I'm seeing duplicated code in moode.css. Line 462 to 465 and again line 466 to 469. Both sections say 
@media (width:896px) and (height:414px) {
    #playback-queue {margin-left:calc(env(safe-area-inset-left) - 2rem);}
    #playback-cover {margin-right:calc(env(safe-area-inset-right) - 2rem);}
}
Michael

RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Reply
#4
CSS is cascading so read from top to bottom.

With regard to media queries they get applyed when the rule fits, so you can build sets of rules. It sounds like you need to find some reading material to get up to speed tbh.

And always remember specificity. Big Grin
Reply
#5
(12-28-2020, 08:30 AM)grumbleweed Wrote: CSS is cascading so read from top to bottom.

With regard to media queries they get applyed when the rule fits, so you can build sets of rules. It sounds like you need to find some reading material to get up to speed tbh.

And always remember specificity. Big Grin

You're right, gw! The problem when I started on moOde was that my previous experience with websites ended when HTML was the only way to go, but CSS and JS had just begun to be used.  I wasn't sure where to begin with moOde, and whether there were good books or online sources. You and Tim have helped me narrow it down to CSS, and I've found what appear to be some good online references/tutorials. 

I've always interpreted "cascading" as a reference to the heirarchicial structure, but I've just realized that if you consider specificity, the combination of those rules and the order you read the file is just a different way to reference the heirarchy, and you don't need to learn how a document is structured from the top down if you recognize the structural (specificity) signals and work your way up.  Idea  The developer tools are starting to make more sense too!

I was doing some reading this morning, and the section on specificity started with "Memorize the rules on specificity." Big Grin

Thanks for your help.
Michael

RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Reply
#6
(12-26-2020, 10:33 PM)Tim Curtis Wrote: Have a look at /var/www/css/moode.css in the section /* Pi 7" Touch */

Hi Tim,
 I ssh into RPI and I don't see moode.css under /var/www/css/
I only see the Shellinabox..., main.min and style.min.css
Do I need to add it?
Looking at Github, there are a bunch missing.
Reply
#7
Starting with moOde 7 series we use a build process based on Gulp which bundles and minifies the CSS/JS/HTML. This provides a nice performance improvement on the client.

There is a Gulp build guide in the repo under moode/other/build
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#8
thanks
Reply
#9
(02-10-2021, 04:23 PM)Alaini93 Wrote: thanks

@Alaini93

As is often the case, there's more than one way to skin this cat. Instead of making the webUI CSS even more complicated (or should I say instead of pretending I'll ever be as good with it as the rest of you!) I've chosen to experiment with running the local display via a separate website on port 8080. Then all I need do is edit /home/pi/.xinitrc to open my local display on localhost:8080.

I chose to do this because I was dealing with dead-simple displays with none of the cool features of the webUI. YMMV.

Tim chose to override the normal nginx configuration pattern where websites are defined in files in /etc/nginx/sites-available/ (and then enabled and disabled using symlinks in /etc/nginx/sites-enabled/). Instead he defines the website directly in /etc/nginx.conf. Whether one chooses to add a new server stanza in this file or chooses to revert to the normal pattern, some editing is required, but there's nothing exotic here. The nginx docs and lots of web sites are good sources of info.

This may well be a trick which @fdealexa uses too.

Regards,
Kent
Reply
#10
ok, nice,
Thanks Kent, I will look into it.
Reply


Forum Jump: