pip-webui/pip-webui-pictures/samples/collage_sample/collage.html

HTML5 UI for LOB applications

<h2 class="text-title tm0 bm24">Collage {{ 'SAMPLE' | translate }}</h2>

<h3 class="text-subhead2">{{ 'COLLAGE_WITH_LOCAL_PICTURES' | translate }}</h3>

<div class="app-collage">
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'ONE_PICTURE' | translate }}</p>
        <pip-collage class="collage " pip-srcs="srcs_1" pip-multiple="false"></pip-collage>
    </div>

    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
        <strong>HTML: </strong>

            &lt;<strong>pip-collage</strong> class="collage "
                         <strong>pip-srcs="srcs_1"</strong>
                         <strong>pip-multiple="false"</strong>&gt;
            &lt;/<strong>pip-collage</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.srcs_1</strong> = ['images/square.jpg'];
</pre>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'TWO_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-srcs="srcs_2" pip-multiple="false"></pip-collage>
    </div>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'THREE_PICTURES' | translate }}</p>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_3" pip-multiple="false" pip-unique-code="1"
                     pip-open="true"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_3" pip-multiple="false"
                     pip-unique-code="2"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_3" pip-multiple="false"
                     pip-unique-code="3"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_3" pip-multiple="false"
                     pip-unique-code="4"></pip-collage>
        <div class="clearfix"></div>
    </div>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'FOUR_PICTURES' | translate }}</p>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_4" pip-multiple="false" pip-unique-code="1"
                     pip-open="true"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_4" pip-multiple="false"
                     pip-unique-code="2"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_4" pip-multiple="false"
                     pip-unique-code="3"></pip-collage>
        <pip-collage class="collage pull-left  bm16" pip-srcs="srcs_4" pip-multiple="false"
                     pip-unique-code="4"></pip-collage>
        <div class="clearfix"></div>
    </div>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'FIVE_PICTURES' | translate }}</p>
        <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">
        <p class="text-body2 tm16 bm16">{{ 'SIX_PICTURES' | translate }}</p>
        <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">
        <p class="text-body2 tm16 bm16">{{ 'SEVEN_PICTURES' | translate }}</p>
        <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">
        <p class="text-body2 tm16 bm16">{{ 'EIGHT_PICTURES' | translate }}</p>
        <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">
        <p class="text-body2 tm16 bm16">{{ 'NINE_PICTURES_SINGLE_SEGMENT' | translate }}</p>
        <pip-collage class="collage pull-left bm16" pip-srcs="srcs_9" pip-multiple="false"></pip-collage>
        <div class="clearfix"></div>
    </div>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'TEN_PICTURES_MULTIPLY_SEGMENT' | translate }}</p>
        <pip-collage class="collage pull-left bm16" pip-srcs="srcs_10" pip-multiple="true"></pip-collage>
        <div class="clearfix"></div>
    </div>
</div>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>

<pre class="text-body1 color-window-bg p16">
        <strong>HTML: </strong>

            &lt;<strong>pip-collage</strong> class="collage "
                         <strong>pip-srcs="srcs_10"</strong>
                         <strong>pip-multiple="true"</strong>&gt;
            &lt;/<strong>pip-collage</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.srcs_10</strong> = [
                'images/square.jpg', 'images/vertical.jpg', 'images/horizontal.jpg', 'images/nonexisting.jpg',
                'images/square.jpg', 'images/vertical.jpg', 'images/horizontal.jpg', 'images/nonexisting.jpg',
                'images/square.jpg', 'images/vertical.jpg'
            ];
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h3 class="text-subhead2">{{ 'COLLAGE_WITH_PICTURES_FROM_SERVER' | translate }}</h3>

<div class="app-collage">
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'ONE_PICTURE' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_1" pip-multiple="false"></pip-collage>
    </div>

    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
        <strong>HTML: </strong>

            &lt;<strong>pip-collage</strong> class="collage "
                         <strong>pip-picture-ids="pids_1"</strong>
                         <strong>pip-multiple="false"</strong>&gt;
            &lt;/<strong>pip-collage</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.pids_1</strong> = ['56790b4960958daa664fd8c2'];
</pre>

    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'TWO_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_2" pip-multiple="false"></pip-collage>
    </div>
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'THREE_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_3" pip-multiple="false"></pip-collage>
    </div>
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'FOUR_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_4" pip-multiple="false"></pip-collage>
    </div>
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'SEVEN_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_7" pip-multiple="false"></pip-collage>
    </div>
    <div class="bm16">
        <p class="text-body2 tm16 bm16">{{ 'EIGHTEEN_PICTURES' | translate }}</p>
        <pip-collage class="collage " pip-picture-ids="pids_18" pip-multiple="true"></pip-collage>
    </div>

    <h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>

    <pre class="text-body1 color-window-bg p16">
        <strong>HTML: </strong>

            &lt;<strong>pip-collage</strong> class="collage "
                         <strong>pip-picture-ids="pids_18"</strong>
                         <strong>pip-multiple="true"</strong>&gt;
            &lt;/<strong>pip-collage</strong>&gt;

        <strong>JS: </strong>

            <strong>$scope.pids_18</strong> = [
                '56790b4960958daa664fd8c2',
                '56790b4960958daa664fd8c1',
                '56790b4960958daa664fd8c4',
                '56790b4960958daa664fd8c3',
                '56790b4960958daa664fd8c5',
                '56790b4960958daa664fd8c6',
                '56790b4c60958daa664fd8c7',
                '56790b4c60958daa664fd8c8',
                '56790b4e60958daa664fd8c9',
                '56790b4f60958daa664fd8ca',
                '56790b4f60958daa664fd8cb',
                '56790b4f60958daa664fd8cc',
                '56790b5060958daa664fd8cd',
                '56790b5160958daa664fd8ce',
                '56790b5160958daa664fd8cf',
                '56790b5260958daa664fd8d0',
                '567911f060958daa664fd8ff',
                '567911f060958daa664fd8fe'
            ];
</pre>
</div>