Is it possible to have CSS for normal screens and a custom CSS for 7in screen?

[sdetweil]

@Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

disabled: width > small_size ? false:true,

because width =0
0 > 800 is false, so disabled=true
when loading the node_modules, so it doesn’t get loaded

try
var width=801
the node_helper might get loaded, but won’t execute cause they are waiting for module to send parms

the value will be corrected on browser side

[Radnor]

@sdetweil said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

@Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

disabled: width > small_size ? false:true,

because width =0

Dont think so. I started it up with DEV option. Loaded the config.js file in debugger hovered over the width and it showed 1280. Then hovered over the small_size and it showed 800. Then thought false and true might need double quotes because the rest in config has t/f in double quotes.

Thank you for sticking with me and getting this working I really appreciate your time. it is SO close.

[Radnor]

I put in config width =801 and reran it. Same “Loading …”
And commented out try - catch block.

[sdetweil]

@Radnor single or double quotes don’t matter, as long as both ends of the string have the same

I just set my code to

var width	= 1920  // make it so on big screen they get enabled
try {
  	width=outerWidth
}
catch(error){

}
var large_screen=1920  // expected size on computer

and the test for calendar at

			module: "calendar",
			disabled:    width< large_screen?true:false, // if the current screen is smaller than computer, disabled
                                                                     // you can flip too,  ?false:true
			header: "US Holidays",
			position: "top_left",

[sdetweil]

@Radnor I had to fix the size for node_helper loading…

I have them enabled if big screen, disabled if small screen

[sdetweil]

@sdetweil better

var width	= 801
try {
  	width=outerWidth
}
catch(error){

}
var small_screen=800

and module disabled

		{
			module: "calendar",
			disabled: width>small_screen ?false: true,

[Radnor]

OK, I think the disabled has something to do with the newsfeed.

I have several config files. config_WORKING has modules alert, notify, clock, wx, wx forecast, calendar, and newsfeed.

I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

In the newsfeed module the disable test is messing it up.

I rename either WORKING or CLOCK to just config.js to test.

[sdetweil]

@Radnor said

I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

I see 4 things in the list

on phone, no forecast, which is not an error?

i set my newsfeed to

		{
			module: "newsfeed",
			disabled: width>small_screen?false:true,

see on desktop, not on phone, as expected

[Radnor]

There’s 3 (wx forecast) is forecast. Not weather AND forecast.

No error because in forecast was disabled because of small screen.
I copied your 2 lines (newsfeed & disabled) and get error when starting it. Complains about my config file…

Any way of letting it load up and do a display:none in the CSS file for small screen?

[sdetweil]

@Radnor notice my variable names (small_screen) are not the same as yours… (small_size)

[Radnor]

Initially, I did NOT see the different variable name.

Cannot get the Ternary op to work at all. I copy/paste (and change var name) your code without luck.
A straight “disabled: true” works.

[sdetweil]

@Radnor its a (if) ? when_true : when_false

show me your code now

[Radnor]

var small_size = 800;
var width = 0;
try {
width=outerWidth
}
catch(error){
}

var config = …

	{
		module: "newsfeed",

disabled: width < small_size ? true:false,
position: “bottom_bar”,
config: {

I had it WITH and WITHOUT the comma after false. I had parens around the logical test too.

[Radnor]

Event tried:

if (small_size>width) {
disabled: true,
}

this generates error in config with lots of red text on loading up

[sdetweil]

@Radnor gotta have the comma after, cause there is more to this module definition… (, comma means more info following this line)

so, u want news feed ON for laptop (disabled:false), OFF for small display (disabled:true)

so, newsfeed has two parts… the node_helper, and the browser part (modulename.js)

so, we WANT the node_helper to load (disabled:false), but don’t know anything about the screen size yet, so it must be ALWAYS disable:false

var small_size = 800;
var width = 801;   // notice 1 larger than expected size of small screen
try {
    width=outerWidth        // get the actual screen width (only works in browser usage)
}
catch(error){                       // this catches the fatal error in node_helper loading
}

config info

{
		module: "newsfeed",
                disabled: width > small_size ?        // on startup, this will be true, so we want disabled:false
                                                      // when the browser on laptop pulls in modulename, this will be true
                                                      //              so disabled: false                  
                                                      false:                    
                                                      // when the small device is used, this will be false (800 is NOT greater than 800)
                                                      // so we want disabled: true 
                                                      true
                                                ,     // more stuff coming on next line
                position: “bottom_bar”,
                config: {             

                }

[Radnor]

Thank you.

I’ve had it with and without the ending comma. Your changes, I’ve put in config.js only (node helper???) I did not put it in the modulename.js

[sdetweil]

@Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

I did not put it in the modulename.js

you do NOT put it into anything other than config.js,

the system (MM) will load config.js

once for loading node_helpers
once for each browser that connects to MM (including one that is included when npm start is done)

[Radnor]

Thats good. Did not mess that up…

I did a copy and paste of your code into my config file.

On the laptop I want the newsfeed. It just says “Loading …” (BEFORE changing width to 801)
On my phone, I do not want the newsfeed and it is NOT there. So that works great.

THANK YOU!!!

Changed width to 801 seems to be working now!
The short code works not too (without all the comments)

Thank you again! Be safe!

[sdetweil]

@Radnor said in Is it possible to have CSS for normal screens and a custom CSS for 7in screen?:

” (BEFORE changing width to 801)

right, the node_helper was not loaded, so the UI will just sit and wait for data that will never come
if you opened the dev window, console tabe, you would see an error from the module trying to send a message to the node_helper, which is not loaded…oops…