04-30-2018 19:25 - edited 04-30-2018 19:26
04-30-2018 19:25 - edited 04-30-2018 19:26
Hi all,
I'm working on adapting my watch face to the Versa, however, due to the slimmer width and taller height I'd like to adjust some font sizes and adjust the layout a bit for the Versa.
I've found I can get the device type by using the device api (https://dev.fitbit.com/build/reference/device-api/device/) so I can identify whether I'm on an Ionic or a Versa.
I can also get a handle to my svg element and change font size easily using javascript, like this:
const cals = document.getElementById("calories"); // SVG text element
cals.style.fontSize = 34;
However, I can't figure out how to adjust my x,y coordinates via javascript in my SVG text element. I thought the easiest way would be to load device-specific CSS instead of manipulating the elements via JS. Is this possible to do? Otherwise, how would I change the x,y attributes of my SVG text element via JS?
Thanks!
Answered! Go to the Best Answer.
04-30-2018 23:31 - edited 04-30-2018 23:32
04-30-2018 23:31 - edited 04-30-2018 23:32
The easiest way is to let the build process determine the correct CSS file for each platform.
Create these files:
styles-common.css styles.css styles~300x300.css
Change your widgets.gui file to include the common.css file:
<link rel="stylesheet" href="styles-common.css" /> <link rel="stylesheet" href="styles.css" />
When you build your project, the styles.css file will contain the contents of styles~300x300.css on Versa, but other platforms would just get the default styles.css. Both platforms will get styles-common, so all of the CSS which is the same for both platforms should go there.
Enjoy!
04-30-2018 23:31 - edited 04-30-2018 23:32
04-30-2018 23:31 - edited 04-30-2018 23:32
The easiest way is to let the build process determine the correct CSS file for each platform.
Create these files:
styles-common.css styles.css styles~300x300.css
Change your widgets.gui file to include the common.css file:
<link rel="stylesheet" href="styles-common.css" /> <link rel="stylesheet" href="styles.css" />
When you build your project, the styles.css file will contain the contents of styles~300x300.css on Versa, but other platforms would just get the default styles.css. Both platforms will get styles-common, so all of the CSS which is the same for both platforms should go there.
Enjoy!
05-01-2018 08:24
05-01-2018 08:24
Missed that article in the docs, thanks! Worked perfectly.
09-04-2018 01:44
09-04-2018 01:44
If I don't use the build process, it's another way to use multiple css files?