jaunesarmiento / fries Goto Github PK

Is there a plan to deliver sass-files?
Would be very nice, so one could easy add new color shemes and so forth..

When using the code given in the "Getting Started" doc, the tabs, the spinner and most of the click events are not working. I uploaded my static HTML/CSS to a server and tried it on my mobile device (touch) and everything works.

I have a page that I am opening via stack.js which has some tabs in it. I added a back button for the page which would execute window.history.go(-1); to go back to index.html.

The problem is that, the user would have to click so many times on the back button to make it go back within a stack.js page which has tabs, after navigating through them. This is because the back button would be going back through the previously viewed tabs on the page before going back to index.html

I could have directly linked back to index.html but I have dynamically loaded data there which I don't want to lose.

Haven't come up with a fix for this yet, looking for a simple workaround first.

Don't forget your meta tags --> the link here links to https://github.com/jaunesarmiento/fries/blob/wip-1.0.0/examples/template.html and returns a 404

it makes that details are not send to push listener when the browser does not have CustomEvent.

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

Merging issues #27 and #21.

The current icon set still lacks a few official Android icons such as the refresh and power/logout icons.

Related to issues #12 and #32.

The issue is that Fries components uses touch events so it really won't work on the browser and non-touch devices. Touch events were used because click events are fired after about 300ms from the moment you tapped a button.

A solution I can think of is to rework the components to mimic Google's Fast Button implementation.

Or use a touch library like hammer.js. Although I'd rather rework the library than introduce a dependency to an external library.

A workaround to this is to do what @aymanfarhat suggested in his comment, is to enable the emulated touch events on Google Chrome. For a more detailed instructions on how to do this, click here.

Navigating from index to contacts and clicking back button (browser back button) does return but the url is still in contacts.

That would be cool

Hello, we are working on a prototype app with phonegap + Fries, I came across the need for allowing the user to swipe(left/right) between Fries tabs so I built a custom library just for that and integrated it with tabs.js by decoupling some of your code in order to reuse the transition code between tabs.

I was thinking that you might be interested in integrating such a feature for the next Fries release, if yes I can do a pull request as soon as I have time to eliminate a couple of Zepto dependencies and it would be fully compatible.

The project source is not yet open sourced so if you'd like to check sample code + phonegap demo you can contact me at ayman.farhat1 [at] gmail.com

Thanks!

It's similar to this issue: https://code.google.com/p/chromium/issues/detail?id=142341

The more I work with Fries the more realize how important this can be for future releases. Given how stack.js works in Fries, which is basically replacing DOM elements from one page to another in order to achieve navigation, it is impossible to attach events to DOM elements and keep them working beyond page navigation via stack.js

This is why all core Fries modules end up attaching events to the window and later in the callbacks checking where the target of the event occurred. If there doesn't exist an alternative pattern for stack.js to follow in order to maintain attachment of elements to events I suggest the following.

2 modules:

1. A selector module for allowing users to easily select DOM elements(jQuery style) without having to resort to 3rd party libraries like zepto and which can be heavily by the core Fries modules too.
2. An events module which allows users to attach events to individual DOM elements instead of the window. It would work in such a way that it would still be listening to events against only the window yet keeping track of registered events listeners against elements in a dictionary data structure. Thus its work would be encapsulating the process of catching a window event, checking the event target and associating the event target with a registered DOM element/event pair and calls its respective registered callback function.

I think this can hugely impact the friendliness of Fries especially for new comers, and modularity ad things will grow. If you're going to put this on the road man I am definitely in for this contribution :)

Due to .spinner having visibility: hidden, the Spinners and Action Overflows don't display the supposed drop-down items.

Will push a fix for this later today.

I need a static icon for right top corner and click on it makes it revolving icon. Or something like pull to refresh.

Icon I am talking about: http://findicons.com/search/android-refresh
Pull to refresh: http://revolugame.com/pull-to-refresh-with-phonegap/

Can you suggest me what should be used? Any plans for something like this in near future?

PS: I am new to phonegap and using fries for my first application.

Awesome work and here is a feature request.

Please add the navigation drawer as Google intended it to be. Thanks in advance aand continue the good work!

http://www.androiduipatterns.com/2013/05/the-new-navigation-drawer-pattern.html

There should be a way to show Android Popup menus on long click of a list-item.

Hello I have a new suggestion regarding testing new Fries features more efficiently by a larger audience.

Set up another repository(like hello fries) for testing new features being pushed to wip branch and with a phonegap project which would be compatible with the phonegap build file structure too(that is without all the phonegap boilerplate that comes in a local environment project and just the www dir) from there phonegap build can pull from the master branch and provide builds for multiple platforms available for download for everyone(can be linked to from the website).

Directories and files above the www directory are actually useless to include as anyone comfortable with the Android SDK (or any other one) can then set it up locally for development, and just keep pulling/pushing in www which would be the actually repo.

Anyone can then report bugs by just downloading and installing the latest build and later reporting the bugs on this repo.

Please implement the Android Seek Bars and Sliders.
http://developer.android.com/design/building-blocks/seek-bars.html

Possibly because of a line-height issue.

To know when a page is loaded in dom and ready to inject data from server.
Suggested param: pageId . It is read from the attr id of the tag with class ".page"

Or renaming the push custom event - is it used in any way?

I am not able to find out any default class for logout. Please let me know if I missed something. If there is nothing like that, will be great to have one :)

After using Stack.js data-transition="push", spinners in the action bar can't be executed. I get an "Uncaught TypeError: Cannot read property 'classlist' of undefined spinner.js:43" when I attempt to press on the toggle-spinner.

The demo links fires ghost clicks possibly because of fingerblast.js. There should be a check whether the example is viewed on a mobile browser and only run new FingerBlast() on desktop.

Hello, when I am running a Fries interface that uses action-bar.js within the browser, I keep getting: Uncaught ReferenceError: debug is not defined the debug variable is undefined within the browser, I guess that variable usually exists within the global scope of a phonegap application?

I think it would be nice to fix that issue for better debugging Fries apps in the browser.

Thanks and keep up the good work!

I m build one long form using fries.This form is work well on android 4.0.3 but failed to load on Lower version of android like 2.3.6

Is fries only support android version above 4.0?

What are the changes required to this run on lower version?

Recently I was trying to make a framework like yours. Maybe the code is too rough to look at.

I was thinking about the code structure, and at last I decided to use sea.js(which is an alternative to require.js) and angular.js to make my code more modular and organized. And I choosed hammer.js to handle touch events.

I did not find a modular or namespace strategy in your repo. Will you do that?

As you can see, the button on the top left has a white padding that is no longer properly aligned once I clicked on it. It doesn't happen every time and seems very random. It does not happen when testing on desktop browsers. Only on phone device.

App was built using PhoneGap 2.9.0. Testing on galaxy s4.

I am using Fries 1.0.1.

Any idea?

Hey

There's this repo that replicates Android Toasts using HTML5 and Javascript ( no jQuery/zepto) dependency.
I think it fits well with Fries.

https://github.com/jadjoubran/Android-Toast

I rechecked the code and apparently stack.js only fires the push event when a page is pushed into the history stack. But when you have an up button that points back to index.html and you have an action overflow there, checkActionOverflows will not be called.

This may also be the case for forms.js and tabs.js. As these also listen for the push event to do their corresponding job.

Will fix this on the next push.

In the documentation, for the section tabs, the HTML code should be

<li id="item3" class="tab-item">
  <div class="inset">
    <p>Item 3</p>
**</div>**
</li>

Hello I am looking into using/extending stack.js page to be used as a detail view for an app. For example I have a page called profile.html which is opened from my index via stack.js.

What I'd like to do is open profile.html with a parameter such as profile.html?id=1 and when profile.html loads execute a callback to query a remote database and populate some DOM elements in profile.html

Is there a certain pattern which can be followed for now in order to achieve such a thing? I think this feature can be a great use for future releases.

Just going through the examples of your page like half of them have layout problems in the latest firefox (21.0).

Also:

var handleTouch = function (e) {
    ...
    e.preventDefault();
    ...
}

Causes right-click not to work on the page which is really frustrating when you are using firebug.

Implementation of the following switches should be included in version 1.0.1:

• Checkboxes
• Radio buttons
• On/off switches

Should be implemented with little to no JavaScript as much as possible.

It must follow the design guidelines as stated here: http://developer.android.com/design/building-blocks/switches.html

Due to the fact that push.js was really optimized for a Ratchet prototype, it doesn't work in a Fries prototype. Also, since push.js transitions are iOS-ish, I'll be scrapping this dependency and adapting it instead.

Please have a look at stack.js in wip-1.0.0 branch for a temporary fix. Just check out the examples in that branch to know how to use it.

We have found out that fries uses a svg from Tobias Bieniek which is converted by icomoon. Now Tobias asks for attribution according to CC. This does of course mean if I use fries for my app, I need to give attribution to Tobias. This was not clear to me if I wouldn't have had a conflict between Font Awesome and Fries.

Also I was first misleaded by the font name "icomoon" which is most likely the name just because it was generated by the icomoon app. I almost missed the original author of the SVG files.

It would be great if fries would make more clear that it is necessary to attribute Tobias if the icons are used.

Currently, I'm just using an <i></i> element with :before and :after pseudo-elements to render the chevron. Maybe this can be replaced by a custom-made chevron and add it to the icomoon set.

I am implementing a tabbed navigation just like in the Fries sample, it is working fine with Phonegap but the tabs are not working on Chrome(Desktop) neither FF when clicking on them, any ideas what could be the problem? What is odd is that in the demo on the site they're working fine, could be a different version?

Note: there are no errors what so ever on the console. Here is my code if you'd like to take a look https://gist.github.com/aymanfarhat/5729462

It causes the scrolling to be slow on my Samsung Galaxy S2, S3 and S4.
When I changed the body declaration in base.css to the following, it worked

body {
    /*  position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;*/
    font: 15px/1.6 "Roboto", sans-serif;
    color: #fff;
    background-color: #000;
}

In a typical Android app, the action bars and tabs resizes to 40px from the default 48px. And I think 56px on tablet (needs confirmation).

Hello I just noticed that the touch handler in stack.js , which is catching all touch events in the app has e.preventDefault() which is preventing default actions for some elements such as hyperlinks with telephones to open the dialer.

I can just remove it and make it work but what I am concerned about is whether removing it might interfere with the stack.js functionality, any thoughts regarding that? Thanks.

When I navigate to another page the javascript from the destination page is not call/execute.

I have an issue when you press a actionable link on your phone, the following pages link will also press if they are in the same location on the following screen.

This is most noticeable if you want to browse the top navigation. It will always click twice. However, it has happened for all of my inner pages and once I moved around the link locations then it stopped happening.

The best way to fix this is to come up with a 1 second (or perhaps 300ms) delay after push.js switches pages.

In order to use full screen use Chrome Beta for android.

Use this code:
http://samslab.tumblr.com/post/17209822119/html5-full-screen-mode

The class "selectable" is not included anywhere in the documentation. It is an essential element of lists i think (so are links in lists, which aren't shown either). Should both be added in my opinion.

Hey, I really like your work with fries. it is awsome.

I have a little problem though, when I transfer my code with PhoneGap to my android phone the layout breaks sometimes.

see the picture below. You can se the tabs breaks.

//Joel

The <textarea> form element should match the current <input> element's style and should support multiline typing.

Animations are somewhat choppy on mobile chrome (gs3/gnex4). Maybe use https://github.com/maccman/gfx for smoother animation

I'm sorry if this issue is already out, I couldn't find a topic about it.

The problem is quite simple, the back button makes you leave the application even if you are in a "second" screen (like contacts.html in demo content). Is it "normal" considering the use of stack.js ?

My config : Phonegap 2.7.0 on Android 4.1.2