alfajango / foundation-mobile Goto Github PK
View Code? Open in Web Editor NEWMobile UI for Foundation-based apps
Home Page: http://os.alfajango.com/foundation-mobile/
License: MIT License
Mobile UI for Foundation-based apps
Home Page: http://os.alfajango.com/foundation-mobile/
License: MIT License
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.