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-hide="result_query.length">

        <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-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  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  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  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  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">

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

                        <i ng-hide="result.typology!= 'unknown' "

                           style="padding: 10px"

                           class="fa fa-question-circle fa-2x blue-text circle responsive-img"></i>

                        <i ng-show="result.typology=='dataset'" style="padding: 10px"

                           class="fa fa-database fa-2x blue-text circle responsive-img"></i>

                        <i style="padding: 10px" ng-show="result.typology=='publication'"

                           class="fa fa-book fa-2x blue-text circle responsive-img"></i>

                        <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">

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

                    <auth style="font-size: small; color: #1565C0"

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

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

                        {{author}}

                    </auth>

                    <dd ng-repeat="date in result.date"> <d ng-show="date.length"> {{date}}</d></dd>

                    <dd ng-repeat="publisher in result.publisher"><d style="font-size: small; color:darkgreen" ng-show="publisher.length">Publisher: {{ publisher }}</d> </dd>

                </div>

                <p>

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

                    <auth style="font-size: small" class="orange-text"> <b>{{ result.relatedDatasets}}</b> Related Datasets

                    </auth>

                </div>

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

                    <auth style="font-size: small" class="orange-text"><b> {{result.relatedPublications }}</b> Related Publications

                    </auth>

                </div>

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

                    <auth style="font-size: small" class="orange-text"> <b>{{result.relatedUnknown}}</b> Other Relations

                    </auth>

                </div>

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

                    <auth style="font-size: small" class="orange-text"><a

                            href="{{ result.resolved_url }}" class="orange-text"> <i

                            class="fa fa-link"></i> Original Object </a></auth>

                </div>

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

                    [

                    <auth style="font-size: small" class="orange-text"

                          ng-repeat="prov in result.datasources">

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

                        <a href='#/datasource/name/{{ prov.datasourceId }}' style="color: orange">{{prov.datasourceName}}</a>

                    </auth>

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

                </div>

            </div>

        </div>

    </div>

</section>