Aladdin Labs

Objective: sandbox for testing specifics technics and validate it's still functioning

by Stephane de Luca

HTML

<script src="https://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-touch.js"></script>
<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='hScroll'"/>
    <div ng-init="popovers = [	
		{	name: 'Popover1',	
            displayName: 'Pick a lab',
			tabs: [
				{	name: 'hScroll',		
                    displayName: 'Horizontal scroll',
					description: [
                        'The scroller scrolls',
                        'The container height cuts the scroller despite the use of border-box model if non calc on height is performed'
                    ]
				},
                {	name: 'h and vScroll',		
                    displayName: 'Vertical scroll issue',
					description: [
                        'a The tabContent contains a fixed height plus overflowing text',
                        'b The tabContent contains a fixed height plus overflowing text',
                        'c The tabContent contains a fixed height plus overflowing text',
                        'd The tabContent contains a fixed height plus overflowing text',
                        'e The tabContent contains a fixed height plus overflowing text'
                    ]
		        },
		        {	name: 'vScroll',
                    displayName: 'Vertical scroll issue',
					description: [
                        'a The tabContent does overflow the container',
                        'b The tabContent does overflow the container',
                        'c The tabContent does overflow the container',
                        'd The tabContent does overflow the container',
                        'e The tabContent does overflow the container',
                        'f The tabContent does overflow the container',
                        'g The tabContent does overflow the...

CSS

* {
	// prevent callout when holding tap on links (the native dialog that comes up)
	-webkit-touch-callout: none;

	// prevent webkit from resizing text to fit
	-webkit-text-size-adjust: none;

	// make transparent link selection, adjust last value opacity 0 to 1.0
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	// prevent copy paste, to allow, change 'none' to 'text'
	-webkit-user-select: none; 

	//font-family: HelveticaNeue;
	font-family: "AvenirNextCondensed-Regular" sans-serif;
	//box-sizing: border-box; 

    -webkit-box-sizing: border-box;   
}


.popover {
    border: solid 3px lightgray;
    width:  400px;
    height: 500px;
    padding: 20px;
    margin:  20px;
}    
.popover .tab {
    display: inline-block; 
    background-color: gray;
    border: solid 1px gray;
    border-top-right-radius: 10px;
    border-left: none;
    border-bottom: none;
    width:auto;
    padding: 8px;
    font-size: 14pt;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    color: black;
}

.popover .tab.selected {
    background-color: lightgray;
    color: white;
    font-weight: bold;
}

.popover .tabContent {
    display: none;
    height: calc(100% - 80px);
    background-color: rgb(200, 200, 255);
}

.popover .tabContent.selected {
    display: block;
}

.withPadding {
    padding: 8px;
}

/* -------
    Scroller stuff below
   --------
*/

/* vertical scroller */

.vScrollable {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Horizontal scrolling */

.hScrollable {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
    height: auto;
}
.scroller {
    background-color: lightgray;
    margin: 0;
    padding: 4px;
}

.scroller>div {
    width:  100px;
    height: 100px;
    display: inline-block;
}

#photo1 {background-color: rgb( 10,100,100);}
#photo2 {background-color: rgb( 40,100,100);}
#photo3 {background-color: rgb( 60,100,100);}
#photo4 {background-color: rgb(...

JavaScript

var app = angular.module('myApp', ['ngSanitize', 'ngTouch']);


app.controller('myCtrl', function ($scope, $location, $http) {

});