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

[sdetweil]

@Radnor to debug, npm start dev
in the developer window, select the sources tab, select config.js on the left
find the 1st line, click on the number on the left column, it will turn blue, now have a program stop
hit f5 to refresh the page, it will stop at that line… you can hover over variables and it will tell u the values.
you can explore the variable on the right, global, scroll down

I assume u are running electron browser (its the default)
this is firefox.

and electron (with the hover)

[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