Building a hybrid Meteor Cordova app: share experiences?

korus90 · October 25, 2015, 11:48am

@XTA any chance of some example code on Github or anything? I’d understand not sharing the app, but maybe a page with some transitions and stuff?

I’m just getting my teeth into Meteor with Framework7 and although I’m getting there slowly, there’s a lack of documentation on the Framework7 packages and how to get it working well with Meteor.

Also, thanks for the code above, it helped massively!

tomfreudenberg · October 25, 2015, 12:43pm

Hi Dennis ( @XTA ), do you have any further statement why to initialize that on every template? We just do it currently once on client load and can’t see any inconsistencies.

Thanks for a short note
Tom

XTA · October 25, 2015, 12:57pm

@korus90 Here the example how I did it:

@tomfreudenberg But do all plugins and views work fine when you only call it once? I just had some problems with plugins like Smart Select that didn’t work after loading the new site without initialization. BTW: We’ve used Iron Router for routing instead of the F7 router.

tomfreudenberg · October 25, 2015, 1:12pm

@XTA (Dennis) currently we had no troubles therefor but we just made some first test developments so I will take that in mind and report here once we need it too.

Btw: We are using FlowRouter and have disabled F7 ajax and router.

tomfreudenberg · October 25, 2015, 1:14pm

Thanks for making and sharing this example code!

korus90 · October 25, 2015, 1:31pm

Did the center navbar item go to the center for you? It’s just going to the right of the left navbar item for me!

Thanks a lot for sharing too! Much appreciated

tomfreudenberg · October 25, 2015, 1:34pm

Offtopic (F7): @XTA, do you know how to use the “Nav Bar” or “Side Panel” as used by materializecss?

See screenshot → Content-View should not be moved to the right as is by now but overlapped and darkened when opening the menu

Haven’t found something in documentation right now.

Thanks for a hint
Tom

XTA · October 25, 2015, 1:46pm

@tomfreudenberg You need to add panel-cover as class to the panel HTML element. It’s listed in the docs under “Side Panels”.

http://www.idangero.us/framework7/docs/side-panels.html#.VizcrsuIXqA

@korus90 Yeah, the center element is really near to the left, on some parts of our app we’ve used own css classes to override this behavior.

tomfreudenberg · October 25, 2015, 2:03pm

@XTA you make my day … hahaha … I tried this a few times but missed to drop the panel-reveal class we had copied from some demo code. Sometimes can’t see the wood for the trees.

waldgeist · October 25, 2015, 3:27pm

Thanks for sharing the code!

daveeel · November 1, 2015, 2:33pm

Basing on @XTA 's example, trying to understand how F7 + Meteor works, we added quite a bit stuff this weekend. Anyone interested may take a look at this fork: https://github.com/daveeel/meteor-framework7 . Added some reactivities with pull to add, Google Maps pins etc…

Note it’s a quick hack for learning, so code is not clean and mixed with .js .ls .html & .jade, but should have included common use cases.

A few issues though:

We can’t get smart-select to use it’s default open to new page behaviour. Suspecting it’s Iron Router conflicting with F7’s own ?
The photoBrowser zooming doesn’t work properly. It’s kind of css issue needs to be fixed.

Basically F7 UI is second to none as far as I’m aware. Meteoric Ionic dev seems stopped. Actually even the official Ionic features can’t compete with F7.

Currently the code use custom transitions from the Transitioner package. Kinda manual to set things up, but works okay.

If anyone has sample project that works with Flow Router, that would be great!

Comments and advices for better pattern or practices are welcome

tomfreudenberg · November 1, 2015, 2:37pm

I will push my Repo during the day

daveeel · November 1, 2015, 2:40pm

That’s great, can’t wait

XTA · November 1, 2015, 3:23pm

@daveeel Yeah we had exact the same issues. Smart Select only works with popup mode, and zooming on PhotoBrowser works only with a double tap (no multi touch zooming).

tomfreudenberg · November 1, 2015, 5:16pm

@XTA , @daveeel

Here you are, I made the changes to your demos, now running FlowRouter

The only part missing are the Transition effects. I added a compatible Transitioner but didn’t get it running yet (do not have enough time by now). Maybe someone like to fix it.

P.S.: Should I send you a PR ?

XTA · November 1, 2015, 5:51pm

I’ll later add dynamic popups (with own content) and back button functionality to close popups / photo browsers.

// Edit: @tomfreudenberg Think we should use @daveeel’s repo for sending PRs, so mine will stay “for the beginners”. I’ll later add a link to daveeel’s repo so people can see the extended version.

mbrookes · November 1, 2015, 9:01pm

Framework 7 is a beautiful thing. The fact that’s it’s the work of one man makes it all the more amazing!

Now if only it worked with React.

XTA · November 1, 2015, 9:30pm

Okay, just added dynamic popup / Cordova back button

daveeel · November 2, 2015, 4:16am

Thanks for the PR. Just merged. Shall take a look at the new Transitioner to make it work.

waldgeist · November 2, 2015, 7:22am

Nice. But unfortunately this sample code is making heavy use of Jade and Livescript, which makes it hard to read for people like me using standard HTML and CSS/SCSS. :-/