Improve filter and UI in API-Catalog
Closes
MODIFY
manager/ui/war/plugins/api-manager/css/apiman.css
manager/ui/war/plugins/api-manager/css/apiman.css
@@ -151,6 +151,11 @@ textarea.dropping {
padding: 0px;
}
+.container-fluid .cards {
+ display: flex;
+ flex-wrap: wrap;
+}
+
.apiman-form-control {
height: 28px;
}
@@ -1730,10 +1735,10 @@ html, body {height: 100%;}
}
.apiman-card-table .card {
position: relative;
- width: 260px;
+ width: 23%;
padding: 15px 5px 15px 5px;
- float: left;
- margin-right: 15px;
+ margin-left: 1%;
+ margin-right: 1%;
margin-bottom: 15px;
background-color: white;
border-top: 2px solid transparent;
@@ -1772,6 +1777,7 @@ html, body {height: 100%;}
}
.apiman-card-table .card .name {
font-size: 16px;
+ overflow-wrap: break-word;
}
.apiman-card-table .card .tags {

MODIFY
manager/ui/war/plugins/api-manager/html/catalog/api-catalog.html
manager/ui/war/plugins/api-manager/html/catalog/api-catalog.html
<!-- Table of APIs -->
<div class="row apiman-card-table">
<div class="container-fluid cards">
- <div ng-repeat="api in filteredApis=(apis | filter: criteria | filter: epType | selectedTags: selected.tags | filter:hideInternal:isInternal | orderBy: 'name':reverse)" class="card">
+ <div ng-repeat="api in filteredApis=(apis | filter: criteria | filter: {endpointType: epType} | selectedTags: selected.tags | filter:hideInternal:isInternal | orderBy: 'name':reverse)" class="card">
<a ng-show="api.description" uib-tooltip="{{ api.description }}" tooltip-trigger="mouseenter" tooltip-placement="top" href="#" class="info"><i class="fa fa-info-circle"></i></a>
<a ng-show="api.endpointType" uib-tooltip="Endpoint&nbsp;Type:&nbsp;{{ api.endpointType }}" tooltip-trigger="mouseenter" tooltip-placement="top" href="{{ api.definitionUrl }}" class="endpointType" target="_blank"><i class="fa {{ api.ticon }}"></i></a>
<div class="icon">

Improve filter and UI in API-Catalog

Closes #661