Skip to content

Commit 388a8b5

Browse files
kamransaleemkamransaleem
committed
-search results in a 4 by 4 grid
#331
1 parent 4bc1346 commit 388a8b5

2 files changed

Lines changed: 82 additions & 61 deletions

File tree

‎waltz-ng/client/navbar/components/nav-search-results.html‎

Lines changed: 80 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,90 @@
11
<div class="wns-results">
2-
<h3 style="border-bottom: 1px solid #ccc">
3-
Search Results: {{$ctrl.query}}
4-
<small class="pull-right">
5-
<a class="clickable" ng-click="$ctrl.dismiss()">
6-
<waltz-icon name="close"></waltz-icon>
7-
</a>
8-
</small>
9-
</h3>
10-
11-
<h4><waltz-icon name="desktop"></waltz-icon> Applications</h4>
12-
<ul class="list-unstyled">
13-
<li ng-repeat="app in $ctrl.results.apps">
14-
<a ui-sref="main.app.view ({id: app.id})">
15-
{{app.name}}
16-
<small>
17-
( {{ app.assetCode }} <span ng-if="app.parentAssetCode"> / {{ app.parentAssetCode }} </span> )
2+
<div class="row">
3+
<div class="col-md-12">
4+
<h3 style="border-bottom: 1px solid #ccc">
5+
Search Results: <span ng-bind="$ctrl.query"></span>
6+
<small class="pull-right">
7+
<a class="clickable" ng-click="$ctrl.dismiss()">
8+
<waltz-icon name="close"></waltz-icon>
9+
</a>
1810
</small>
19-
</a>
20-
</li>
21-
<li ng-show="$ctrl.results.apps.length == 0" class="text-muted">No results...</li>
11+
</h3>
12+
</div>
13+
</div>
2214

23-
</ul>
15+
<div class="row">
2416

25-
<hr/>
17+
<div class="col-md-6">
18+
<h4><waltz-icon name="desktop"></waltz-icon> Applications</h4>
19+
<ul class="list-unstyled">
20+
<li ng-repeat="app in $ctrl.results.apps">
21+
<a ui-sref="main.app.view ({id: app.id})">
22+
<span ng-bind="app.name"></span>
23+
<small>
24+
( <span ng-bind="app.assetCode"></span> )
25+
</small>
26+
</a>
27+
</li>
28+
<li ng-show="$ctrl.results.apps.length == 0"
29+
class="text-muted">
30+
No results...
31+
</li>
32+
</ul>
33+
</div>
2634

27-
<h4><waltz-icon name="users"></waltz-icon> People</h4>
28-
<ul class="list-unstyled">
29-
<li ng-repeat="person in $ctrl.results.people">
30-
<a ui-sref="main.person.view ({empId: person.employeeId})">
31-
{{ person.displayName }}
32-
</a>
33-
<small>{{ person.title }}</small>
34-
</li>
35-
<li ng-show="$ctrl.results.people.length == 0" class="text-muted">No results...</li>
36-
</ul>
35+
<div class="col-md-6">
36+
<h4><waltz-icon name="users"></waltz-icon> People</h4>
37+
<ul class="list-unstyled">
38+
<li ng-repeat="person in $ctrl.results.people">
39+
<a ui-sref="main.person.view ({empId: person.employeeId})">
40+
<span ng-bind="person.displayName"></span>
41+
</a>
42+
<small><span ng-bind="person.title"></span></small>
43+
</li>
44+
<li ng-show="$ctrl.results.people.length == 0" class="text-muted">No results...</li>
45+
</ul>
46+
</div>
47+
</div>
3748

3849
<hr/>
3950

40-
<h4><waltz-icon name="puzzle-piece"></waltz-icon> Capabilities</h4>
41-
<ul class="list-unstyled">
42-
<li ng-repeat="capability in $ctrl.results.capabilities">
43-
<a ui-sref="main.capability.view ({id: capability.id})">
44-
{{ capability.name }}
45-
</a>
46-
<small>
47-
{{ capability.description | limitTo:60 }}
48-
<span ng-if="capability.description.length > 60">...</span>
49-
</small>
50-
</li>
51-
<li ng-show="$ctrl.results.capabilities.length == 0" class="text-muted">No results...</li>
52-
</ul>
53-
<hr/>
54-
55-
<h4><waltz-icon name="sitemap"></waltz-icon> Organisational Units</h4>
56-
<ul class="list-unstyled">
57-
<li ng-repeat="orgUnit in $ctrl.results.orgUnits">
58-
<a ui-sref="main.org-unit.view ({id: orgUnit.id})">
59-
{{ orgUnit.name }}
60-
</a>
61-
<small>
62-
{{ orgUnit.description | limitTo:60 }}
63-
<span ng-if="orgUnit.description.length > 60">...</span>
64-
</small>
65-
</li>
66-
<li ng-show="$ctrl.results.orgUnit.length == 0" class="text-muted">No results...</li>
67-
</ul>
68-
51+
<div class="row">
52+
<div class="col-md-6">
53+
<h4><waltz-icon name="puzzle-piece"></waltz-icon> Capabilities</h4>
54+
<ul class="list-unstyled">
55+
<li ng-repeat="capability in $ctrl.results.capabilities">
56+
<a ui-sref="main.capability.view ({id: capability.id})">
57+
<span ng-bind="capability.name"></span>
58+
</a>
59+
<small>
60+
<span ng-bind="capability.description | limitTo:60"></span>
61+
<span ng-if="capability.description.length > 60">...</span>
62+
</small>
63+
</li>
64+
<li ng-show="$ctrl.results.capabilities.length == 0"
65+
class="text-muted">
66+
No results...
67+
</li>
68+
</ul>
69+
</div>
70+
<div class="col-md-6">
71+
<h4><waltz-icon name="sitemap"></waltz-icon> Organisational Units</h4>
72+
<ul class="list-unstyled">
73+
<li ng-repeat="orgUnit in $ctrl.results.orgUnits">
74+
<a ui-sref="main.org-unit.view ({id: orgUnit.id})">
75+
<span ng-bind="orgUnit.name"></span>
76+
</a>
77+
<small>
78+
<span ng-bind="orgUnit.description | limitTo:60"></span>
79+
<span ng-if="orgUnit.description.length > 60">...</span>
80+
</small>
81+
</li>
82+
<li ng-show="$ctrl.results.orgUnits.length == 0"
83+
class="text-muted">
84+
No results...
85+
</li>
86+
</ul>
87+
</div>
6988

89+
</div>
7090
</div>

‎waltz-ng/client/navbar/components/nav-search-results.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
right: 100px;
44
position: absolute;
55
background-color: white;
6-
width:50%;
6+
width:75%;
77
border: 1px solid #ccc;
88
box-shadow: 0px 4px 5px gray, -5px 4px 7px gray, 5px 4px 7px gray;
99

1010
.wns-results {
1111
margin: 10px;
1212
padding-right: 10px;
1313
overflow-y: auto;
14+
overflow-x: hidden;
1415
height: 70vh
1516
}
1617
}

0 commit comments

Comments
 (0)