pip-webui/pip-webui-pictures/cordova/www/collage.html

HTML5 UI for LOB applications

<div ng-if="$party">
	<md-card layout="column" flex>


				<h2 class="m16">Collage with local picture</h2>



		<md-card-content >

			<div class="app-collage">
				<div class="bm16">
					<h2>1 Picture</h2>
					<pip-collage class="collage bg-red" pip-srcs="srcs_1" pip-multiple="false"></pip-collage>
				</div>

				<div class="bm16">
					<h2>2 Pictures</h2>
					<pip-collage class="collage bg-red" pip-srcs="srcs_2" pip-multiple="false"></pip-collage>
				</div>

				<div class="bm16">
					<h2>3 Pictures</h2>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_3" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_3" pip-multiple="false" pip-unique-code="2"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_3" pip-multiple="false" pip-unique-code="3"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_3" pip-multiple="false" pip-unique-code="4"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>4 Pictures</h2>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_4" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_4" pip-multiple="false" pip-unique-code="2"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_4" pip-multiple="false" pip-unique-code="3"></pip-collage>
					<pip-collage class="collage pull-left bg-red bm16" pip-srcs="srcs_4" pip-multiple="false" pip-unique-code="4"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>5 Pictures</h2>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="2"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="3"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="4"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>6 Pictures</h2>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="2"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="3"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="4"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>7 Pictures</h2>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="2"></pip-collage>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="3"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>8 Pictures</h2>
					<pip-collage class="collage pull-left  bm16" pip-srcs="srcs_8" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>9 Pictures - Single Segment</h2>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_9" pip-multiple="false"></pip-collage>
					<div class="clearfix"></div>
				</div>

				<div class="bm16">
					<h2>10 Pictures - Multiple Segments</h2>
					<pip-collage class="collage pull-left bm16" pip-srcs="srcs_10" pip-multiple="true"></pip-collage>
					<div class="clearfix"></div>
				</div>
			</div>
		</md-card-content>

		<md-card-actions >
		</md-card-actions>
	</md-card>

	<md-card layout="column" flex>


				<h2 class="m16">Collage with pictures from server</h2>



		<md-card-content >

			<div class="app-collage">
				<div class="bm16">
					<h2>1 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_1" pip-multiple="false"></pip-collage>
				</div>
				<div class="bm16">
					<h2>2 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_2" pip-multiple="false"></pip-collage>
				</div>
				<div class="bm16">
					<h2>3 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_3" pip-multiple="false"></pip-collage>
				</div>
				<div class="bm16">
					<h2>4 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_4" pip-multiple="false"></pip-collage>
				</div>
				<div class="bm16">
					<h2>7 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_7" pip-multiple="false"></pip-collage>
				</div>
				<div class="bm16">
					<h2>18 Picture</h2>
					<pip-collage class="collage bg-red" pip-picture-ids="pids_18" pip-multiple="true"></pip-collage>
				</div>
			</div>
		</md-card-content>

		<md-card-actions >
		</md-card-actions>
	</md-card>
</div>