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

[sdetweil]

@sdetweil hang on… I see the bug on loading at node_helper time…

change it like this to capture the undefined error at startup

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

var config={ etc

[Radnor]

in the config.js it does not like outerWidth. shows errors as loading up. It DOES get the correct value though…

I have at the top of my config file:

var small_size = 800;
var ss = outerWidth;

In debug mode I can see both vars getting their respective values.

[sdetweil]

@Radnor see my comments above workaround for not defined at node_module load time

[sdetweil]

@Radnor css and config.js are different things… no way to change the filenames of the css files…

[Radnor]

Getting really close!

My config file is:

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

SNIP

		{
			module: "newsfeed",
			position: "bottom_bar",
disabled: width > small_size ? false:true,
			config: {
SNIP

On phone does not show. On laptop stuck at “Loading…”

[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: {             

                }