alfajango / foundation-mobile Goto Github PK

Similar to Ratchet's popovers.

Foundation has sort-of-modal (not really modal but show up on top of everything) drop-downs, like this one on the split buttons:

It'd be nice on mobile to have the option of making those drop-downs take up the full screen. From the screenshot, you can see Foundation already makes them full-width on mobile, so we'd just need to add the ability to make them full height, which would need to be done via JavaScript.

For instance, the drop-down in the screenshot (from the Foundation docs) has an id of drop4, so I can make it full height with this line:

var $window = $(window),
    $dropdown = $('#drop4');
$dropdown.height($window.height() - ($dropdown.offset().top - $window.scrollTop()) - 10)

Something like this could be called on $('.f-dropdown').click.

This detects the current height of the window, the position of the top of the drop-down, relative to the current window scrollTop, and sizes it so that the bottom is 10 pixels from the bottom of the window:

Currently if we do a drop-down with a mobile-list, it looks like this:

It'd be nice to get rid of the surrounding padding and extra border, so that you just get a dropdown that is the list. I'm not sure if this should be done by putting a ul.mobile-list inside the dropdown element, or if we could make it so that the dropdown is the .mobile-list element, since a dropdown can be a ul.

For example, the code that produced the above looks like this:

<a href="#" data-dropdown="drop2" class="button dropdown">Dropdown Button</a>

<ul id="drop2" data-dropdown-content class="f-dropdown full-size mobile-list">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

Notice that the ul is both the .f-dropdown and the .mobile-list element.

Similar to Ratchet's modal windows.

Similar to jQuery Mobile's fixed footer.

Implement CSS/JS for one or more responsive table approaches shown here. I'm partial to the "No More Tables" approach.

I'd like to do a global loading indicator for apps. The idea is you'd have one loading indicator for your whole app, maybe in the title bar, or if you really wanted, centered on the screen. It'd be similar to how native apps usually do.

The reason I want this is because I think it's great UX to always be able to immediately show the user that their click or action was recognized and the app is doing something.

We could even have some default binding attached to the page unload event, such that any time the user clicks a link, the loading indicator would let them know the next page is being fetched.