uqac-websem-project/frontend/WebSem/app/views/articlesCategory.html

<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy('articleCategory.articleCategory')">

    <div flex>
        <md-toolbar class="md-table-toolbar md-default">
            <div class="md-toolbar-tools">
                <md-icon class="material-icons">search</md-icon>
                <form autocomplete="off">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>{{ 'common.filter' | translate }}</label>
                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 750}" ng-change="load()">
                    </md-input-container>

                </form>
                <md-button ng-show="!isModal" class="md-icon-button" ng-click="resetFilter()" title="{{ 'common.close' | translate }}">
                    <md-icon class="material-icons">close</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="load()" title="{{ 'common.refresh' | translate }}">
                    <md-icon class="material-icons">refresh</md-icon>
                </md-button>
            </div>
        </md-toolbar>
    </div>

    <div layout="row">
        <span flex="15"></span>
        <md-grid-list class="image-grid" md-cols="6" md-row-height="200px" md-row-height-gt-sm="300px"
                      md-row-height-gt-md="450px" md-gutter="4px" flex="60">
            <md-grid-tile ng-repeat="item in items.data" class="red grid-picture" md-colspan="{{$index < 2 ? 3 : 2}}"
                          ng-class="{red: itemType == 'persons', purple: itemType == 'countries', blue: itemType == 'locations'}"
                          md-rowspan="1" ui-sref="articles_view({id: item.id, item: item})">
                <img class="article-picture" ng-src="{{item.pictureUrl}}">
                <md-grid-tile-footer><h3>{{ item.title }}</h3></md-grid-tile-footer>
            </md-grid-tile>
        </md-grid-list>
    </div>


    <md-table-pagination md-label="{{appUtils.mdTableLabels()}}" class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 20]"
                         md-page="query.page" md-total="{{items.count}}" md-on-paginate="load" md-page-select></md-table-pagination>

    <div ng-repeat="error in busy.errors('articleCategory.articleCategory')" class="isa_error">
        <i class="fa fa-times-circle"></i>
        {{ error.data.message }}
    </div>
</div>