graphdb-workbench/dist/pages/guides.html

The web application for GraphDB APIs

<link href="css/guides.css?v=3.1.0-RC3" rel="stylesheet">
<h1>
    {{title}}
    <page-info-tooltip></page-info-tooltip>
</h1>

<div ng-show="displayedGuides.length > 0" class="clearfix" data-test="guides-per-page-bar">
    <div class="btn-group pull-right namespaces-per-page-menu" uib-dropdown>
        <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" uib-dropdown-toggle ng-disabled="disabled">
            <span>{{pageSize}}</span>
        </button>
        <ul class="dropdown-menu small">
            <li ng-repeat="size in pageSizeOptions" ng-if="size < guides.length">
                <span class="dropdown-item page-size-option" ng-click="changePageSize(size)">{{size}}</span>
            </li>
            <li>
                <span class="dropdown-item page-size-option" ng-click="changePageSize(guides.length)">{{'all.label' | translate}}</span>
            </li>
        </ul>
    </div>
    <span class="pull-right mr-1">{{'view.guides.guides.per.page.label' | translate}}</span>
</div>
<div ng-show="displayedGuides.length > 0" data-test="guides-paginator">
    <div paginations class="ot-guides-pagination pull-right ot-owlim-ctrl"></div>
    <span class="showing-info-namespaces pull-right">{{'showing.label' | translate}} {{(pageSize * (page - 1)) + 1}} - {{pageSize * page >= displayedGuides.length ? displayedGuides.length + (pageSize * (page - 1)) : pageSize * page}} {{'pagination.of.label' | translate}} {{guides.length}}</span>
</div>

<table ng-show="displayedGuides.length > 0" id="guides-table" class="table table-striped table-hover"
       data-test="guides-list"
       aria-describedby="Guides table">
    <thead>
    <tr>
        <th id="name" style="width: 80%">{{'view.guides.table.column.name' | translate}}</th>
        <th id="level" style="width: 10%">{{'view.guides.table.column.level' | translate}}</th>
        <th id="actionsColumn" style="width: 10%">{{'view.guides.table.column.action' | translate}}</th>
    </tr>
    </thead>
    <tr ng-repeat="guide in displayedGuides | orderBy: ['guideLevel', 'order']" loader-post-repeat-directive>
        <td>
            <div class="lead" uib-popover="{{guide.translatedGuideDescription}}" popover-placement="top" popover-trigger="mouseenter">
                <div>{{guide.translatedGuideName}}</div>
                <div class=" text-overflow text-overflow-by-vw text-muted small" ng-if="guide.translatedGuideDescription">{{guide.translatedGuideDescription}}</div>
            </div>
        </td>
        <td>
            {{ guide.guideLevelLabel | translate }}
        </td>
        <td>
            <button class="btn btn-link" ng-click="startGuide(guide)"
                    gdb-tooltip="{{'view.guides.action.start' | translate}}"><span class="icon-play"></span></button>
        </td>
    </tr>
    <tbody>
    </tbody>
</table>
<div ng-show="guides.length > 0" class="ot-owlim-ctrl clearfix namespaces-pagination">
    <div paginations class="ot-guides-pagination pull-right"></div>
</div>