Android fragment like UI


#1

I’v been struggling a lot with that, without finding a proper solution. I’m actually looking for a UI that works like an Android fragment, with a master list on the left side and the main content on the right when the screen is large enough, or by navigating to it in case of smaller screens. I know about the side-menu, but I’m already using it for some options. And the behavior is a bit different.
Any idea on how this can be done? I have not found any boilerplate or sample code achieving this design, which seems pretty common nowadays.


#2

So, one way you could accomplish this is using my showWhen directive.

I’ll try to get a better example going today.


#3

So, maybe not the best way to do it (there are a couple ways) due to maintainability, but here is an example…

Code:
http://play.ionic.io/app/e726024ea5a4

Demo:
http://play.ionic.io/m/e726024ea5a4


#4

This looks great Andrew, thanks a lot. I’ll implement that and blog about it if we feel it should be shared.


#5

@Andrew, you might be interested by this. Show/Hide are actually hidding the DOM, which has a performance penalty as you don’t want to have both layouts systematically processed. A ng-if will be more appropriate, as the hidden DOM elements are actually removed.
For this purpose, I created my own directive, that you might want to integrate to your showWhen:

function media(m) {
	if(m=="large") return "(min-width:768px)"
	return m;
}
function ifmedia(ngIfDirective,$window,show) {
	var ngIf = ngIfDirective[0];
	return {
		transclude: ngIf.transclude,
		priority: ngIf.priority,
		terminal: ngIf.terminal,
		restrict: ngIf.restrict,
		link: function($scope, $element, $attr) {
			$attr.ngIf = function() {
				var mq = media($attr[show?'ifMedia':'ifNotMedia']);
				var matches = $window.matchMedia(mq).matches;
				var visible = (show && matches) || (!show && !matches);
				return visible;
			};
			ngIf.link.apply(ngIf, arguments);
		}
	};
}
mod.directive('ifMedia', ['ngIfDirective', '$window', function(ngIfDirective,$window) {
	return ifmedia(ngIfDirective,$window,true);
}]);
mod.directive('ifNotMedia', ['ngIfDirective', '$window', function(ngIfDirective,$window) {
	return ifmedia(ngIfDirective,$window,false);
}]);