Umbraco Members Listview - custom layout

grid.html

<div ng-controller="Oerskov.ListView.GridMembersLayoutController as vm">
    
    <ul class="members-grid thumbnails">     
        <li ng-repeat="item in items">
            <div class="member thumbnail" ng-class="{' -selected': item.selected}" ng-click="toggleItem(item)">
                <img src="{{item.thumbnail}}" alt="" draggable="false" />
                <i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>
                <a href ng-click="gotoItem(item)" class="member-name">{{item.name}}</a>
                <small>{{item.email}}</small>
            </div>
        </li>
    </ul>
    
    <umb-empty-state
        ng-if="!items && options.filter.length > 0"
        position="center">
        <localize key="general_searchNoResult"></localize>
    </umb-empty-state>

</div>

grid.listviewlayout.controller.js

(function () {
    "use strict";

    function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper) {

        var vm = this;

        vm.nodeId = $scope.contentId;

        $scope.toggleItem = function (item) {
            if (item.selected) {
                listViewHelper.deselectItem(item, $scope.selection);
            } else {
                listViewHelper.selectItem(item, $scope.selection);
            }
        }

        $scope.gotoItem = function (item) {
            $location.url(item.editPath);
        }

        if($scope.items) {
            $scope.items = $scope.items.map(function (obj) {
    
                var memberPhotoProp = _.find(obj.properties, function (p) { return (p.alias === "umbracoMemberPhoto"); });
                obj.thumbnail = "https://www.gravatar.com/avatar/?d=mm&s=100&f=y";
                
                if(memberPhotoProp) {
                    var mediaId = parseInt(memberPhotoProp.value);
    
                    if (mediaId) {
                        mediaResource.getById(mediaId).then(function (media) {
                            //console.log(media);
                            //console.log(mediaHelper.resolveFile(media));
                            obj.thumbnail = mediaHelper.resolveFile(media) + "?width=100&height=100&mode=crop&animationprocessmode=first";
                        });
                    }
                }
    
                return obj;
                //return angular.extend(obj, propertyObj);
            });
        }
    }

    angular.module("umbraco").controller("Oerskov.ListView.GridMembersLayoutController", ListViewGridLayoutController);
})();

package.manifest

{
    "css": [
        "~/App_Plugins/ListviewLayouts/grid-members/style.css"
    ],
    "javascript": [
        "~/App_Plugins/ListviewLayouts/grid-members/grid.listviewlayout.controller.js"
    ]
}

style.css

.members-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.members-grid > li {
    float: none;
    flex: 0 0 25%;
}

.members-grid > li > div.thumbnail {
    margin: 10px;
    cursor: pointer;
    min-width: 200px;
    position: relative;
    margin-bottom: 0;
}

.members-grid > li > div.thumbnail.-selected {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.35);
}

.members-grid > li > div.thumbnail img {
    background-color: #c4c4c4;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.members-grid .member .member-name,
.members-grid .member small {
    display: block;
    text-align: center;
}

.members-grid .member-name {
    font-size: 1rem;
}

.members-grid .member small {
    color: #777;
}

.members-grid .member-name:hover {
    text-decoration: underline;
}

@media screen and (min-width: 1200px) {
    .members-grid > li {
        flex: 0 0 20%;
    }
}