JAM component installation issues

[liondev4]

Hi Toorshia,

Did you finally build a version working with sencha touch 2.2.0 ?

I have a lot of CSS issues when compiling with compass or sencha cmd

Thks

[liondev4]

It's OK
Got it working well with touch 2.2.0
Just adding a z-index !

[toorshia]

Hi,

I actually didn't have time to take a second look at this.

Can you tell me how you fixed issue?
So I can just c/p it to the github code

I'm so lazy these days

Thanks!

[liondev4]

OK here what I did :

1- In jam.scss, you have to change import and include components :

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//COMPONENTS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// @include sencha-panel;
//@include sencha-buttons;
//@include sencha-toolbar;
//@include sencha-list;
//@include sencha-layout;

2- You have to change Icon mask that is no longer supported by sencha touch 2.2.0. You need to convert your png icons into svg/font icon in the website http://icomoon.io/app for exemple like it is explained in the following post :
http://extdesenv.com.br/theming/addi...h-2-2/?lang=pt

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//ICONS USED
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@include icon-font('Pictos', inline-font-files(
'pictos/pictos-web.woff', woff,
'pictos/pictos-web.ttf', truetype,
'pictos/pictos-web.svg', svg
));
@include icon-font('JamIcon', inline-font-files(
'JamIcon.woff', woff,
'JamIcon.ttf', truetype,
'JamIcon.svg', svg
));

@include icon('download','\e000','JamIcon');
@include icon('cloud_black','\e001','JamIcon');
@include icon('check_black1','\e002','JamIcon');
@include icon('settings9','\e003','JamIcon');
@include icon('help_black','\e004','JamIcon');
@include icon('power_on','\e005','JamIcon');

3- Change also the iconCls of the menu.js file to fit with the tag given to icon fonts model :
iconCls : 'download',

4- Add in the strawberry.scss file, the z-index line at .x-JAM-slidenav-container :
// JAM MENU
.x-JAM-slidenav-container {
box-shadow: -5px 0px 10px 2px rgba(black, .3);
z-index: 2;
}
.x-JAM-slidenav-menu {
background-color: $JAM-grey;
z-index: 1;
.x-list {
background-color: $JAM-grey;
}
}

And that's it !