D-Net

<style>

    .loader {

        border: 16px solid #f3f3f3; /* Light grey */

        border-top: 16px solid #3498db; /* Blue */

        border-radius: 50%;

        width: 120px;

        height: 120px;

        animation: spin 2s linear infinite;

        margin: auto;

    }

    @keyframes spin {

        0% {

            transform: rotate(0deg);

        }

        100% {

            transform: rotate(360deg);

        }

    }

</style>

<section class="container-fluid">

    <div class="row">

        <div class="col-lg-8">

            <form ng-submit="makeQuery()">

                <b>Query:</b>

                <input style="width: 80%" ng-model="query" ng-enter="doSomething()"> <a

                    href="#/query/q={{ query }}"><span class="glyphicon glyphicon-search"></span> Search</a>

            </form>

        </div>

        <div class="col-lg-2 right-align">

            <b class="header black-text ">Total Items:</b>

            <f class="header blue-text flow-text"> {{ total }}</f>

        </div>

        <div class="col-lg-2 right-align">

            <b class="header black-text ">Total pages:</b>

            <f class="header blue-text flow-text"> {{ totalPages }}</f>

        </div>

    </div>

    <div class="row" ng-show="searching">

        <div class="col-lg-12 center-align">

            <div class="loader"></div>

        </div>

        <!--

                <div class="col l12 offset-l4 center-align">

                    <h5 class="red-text">No match found</h5>

                </div> -->

    </div>

    <div class="row centered" ng-hide="result_query.length">

        <div class="text-center">

                    <h5 class="red-text">No match found</h5>

                </div>

    </div>

    <div class="row centered" ng-show="result_query.length">

        <div class="text-center">

            <ul class="pagination centered">

                <li ng-show="page ==1" class="disabled"><a href="">&lt;</a></li>

                <li ng-hide="page ==1"><a href="#/query/{{ filterPath() }}page={{ page - 1 }}/q={{ query }}">&lt;</a>

                </li>

                <li ng-class="activePage(n)" ng-repeat="n in pageRange">

                    <a href="#/query/{{ filterPath() }}page={{ n }}/q={{ query }}">{{ n }}</a>

                </li>

                <li ng-hide="page == lastPage"><a href="#/query/{{ filterPath() }}page={{ page + 1 }}/q={{ query }}">&gt;</a>

                </li>

                <li ng-show="page ==lastPage" class="disabled"><a href="">&gt;</a></li>

            </ul>

        </div>

    </div>

    <div class="row container-fluid" ng-show="result_query.length">

        <div class="col-md-3" id="leftCol">

            <div class="row">

                <div class="panel panel-primary">

                    <div class="panel-heading"><b>Typology</b></div>

                    <div class="panel-body">

                        <ul class="list-group">

                            <li class="list-group-item" ng-repeat="value in facet.typology ">

                                <span class="badge">{{ value.count }}</span>

                                <a class="browseLink" href='#/query/{{ calculateFilter("typology", value.key) }}/q={{ query }}'>{{ value.key }}</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="panel panel-primary">

                    <div class="panel-heading"><b>Link Provider</b></div>

                    <div class="panel-body">

                        <ul class="list-group">

                            <li class="list-group-item" ng-repeat="value in facet.datasource ">

                                <span class="badge">{{ value.count }}</span>

                                <a  class="browseLink" href='#/query/{{ calculateFilter("datasource", value.key) }}/q={{ query }}'>{{ value.key }}</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="panel panel-primary">

                    <div class="panel-heading"><b>Link Publisher</b></div>

                    <div class="panel-body">

                        <ul class="list-group">

                            <li class="list-group-item" ng-repeat="value in facet.publishers ">

                                <span class="badge">{{ value.count }}</span>

                                <a class="browseLink" href='#/query/{{ calculateFilter("publisher", value.key) }}/q={{ query }}'>{{ value.key }}</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="panel panel-primary">

                    <div class="panel-heading"><b>Pid Type</b></div>

                    <div class="panel-body">

                        <ul class="list-group">

                            <li class="list-group-item" ng-repeat="value in facet.pid ">

                                <span class="badge">{{ value.count }}</span>

                                <a class="browseLink" href='#/query/{{ calculateFilter("pidtype", value.key) }}/q={{ query }}'>{{ value.key }}</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-9 col-xs-12">

            <div class="row" ng-repeat="result in result_query">

                <div class="col-lg-12" style="margin-top: 10px">

                    <span class="label label-info" style="font-size: 100%">{{ result.typology }}</span>

                    <span ng-repeat="date in showDate(result.date)" class="label label-warning"

                          style="font-size: 100%"> {{ date }}</span>

                </div>

                <div class="col-lg-12" style="margin-top: 10px">

                    <a href="#/detail/{{ result.id }}">

                        <b ng-show="result.title">{{ result.title[0] }}</b>

                        <b ng-hide="result.title">Metadata non resolved for pid : {{ result.localIdentifier[0].id }}</b>

                    </a>

                </div>

                <div class="col-lg-12">

                    <div>

                        <auth style="font-size: small;  color: darkred"

                              ng-repeat="author in result.author">

                            <f ng-hide="$index==0">,</f>

                            <i>{{ author }}</i>

                        </auth>

                    </div>

                    <span class="more" style="color: #9ba4ad">

                        {{ result.abstract }}

                    </span>

                </div>

                <div class="col-lg-12">

                    <d style="font-size: small"></d>

                    Sources:

                    <span ng-repeat="datatasource in result.datasources">

                        <a ng-show="datatasource.datasourceName.length"> {{ datatasource.datasourceName }}</a>

                    </span>

                    <dd ng-repeat="publisher in result.publisher">

                        <d style="font-size: small; color:darkgreen" ng-show="publisher.length">

                            Publisher: {{ publisher }}</d>

                    </dd>

                </div>

                <div class="col-lg-12 text-right">

                            <auth style="font-size: small; margin-left: 10px" class="orange-text">

                                Link to Datasets: <b>{{ result.relatedDatasets }}</b>

                            </auth>

                            <auth style="font-size: small; margin-left: 10px" class="orange-text">Link to Literature: <b> {{ result.relatedPublications }}</b>

                            </auth>

                            <auth style="font-size: small; margin-left: 10px" class="orange-text">

                                Link to other Objects:

                                <b>{{ result.relatedUnknown }}</b>

                            </auth>

                     <hr>

                </div>

            </div>

        </div>

    </div>

</section>