Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

MUMUP-2196: Redesign search results #358

Merged
merged 2 commits into from
Dec 8, 2015
Merged

MUMUP-2196: Redesign search results #358

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2900549
MUMUP-2196: Redesign search results
Dec 3, 2015
219f506
remove categories, add in loading state
Dec 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions angularjs-portal-home/src/main/webapp/css/my-app.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
@import "widget.less";
@import "uw-portlet.less";
@import "marketplace.less";
@import "search-results.less";
}

25 changes: 25 additions & 0 deletions angularjs-portal-home/src/main/webapp/css/search-results.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.search-results {
.result {
padding:20px 0px 0px 20px;
h4 {
color:@color1;
font-weight:400;
margin-bottom:0px;
}
p {
margin:0px;
}
a.add {
margin-right:15px;
&:hover {
cursor:pointer;
}
}
.added {
margin-right:15px;
}
.rating {
margin-left:20px;
}
}
}
2 changes: 1 addition & 1 deletion angularjs-portal-home/src/main/webapp/my-app/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ define([
$routeProvider.
when('/apps', marketplaceRoutes.main).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More of a question for @keirserrie , what do we want to do with the old browse page?

when('/apps/details/:fname', marketplaceRoutes.details).
when('/apps/search/:initFilter', marketplaceRoutes.main).
when('/apps/search/:initFilter', marketplaceRoutes.search).
when('/compact', listRoute).
when('/expanded', widgetRoute).
when('/notifications', notificationsRoute).
Expand Down
76 changes: 76 additions & 0 deletions angularjs-portal-home/src/main/webapp/my-app/marketplace/partials/search-results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<div class="row portlet-frame col-xs-12 col-md-12 no-padding search-results" ng-controller="MarketplaceController as marketplaceCtrl">
<div class="inner-nav-container">
<ul class="inner-nav">
<li class="active">
<a>All Results ({{ results.length }})</a>
</li>
<!-- <li>
<a>MyUW (# results)</a>
</li>
<li>
<a>Directory (# results)</a>
</li>
<li>
<a>Wisc.edu (# results)</a>
</li> -->
</ul>
</div>


<!-- <loading-gif data-object='portlets'></loading-gif> -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The initial load will still be the 7 seconds in prod (or whatever it is). Do we want this loading state?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Definitely. Even if the expected load time were shorter, should code defensively for cases where e.g. the client-side front end is cached but the latest JSON is loading down over a slooooow connection.

<div ng-repeat="portlet in results = ( portlets | filter:searchTermFilter | showApplicable:showAll | showCategory:categoryToShow | orderBy:sortParameter | limitTo:searchResultLimit)" class="result">
<h4><a href="{{::portlet.maxUrl}}" target="{{::portlet.target}}">{{ portlet.name }}</a></h4>
<p>{{ portlet.description }}</p>
<p>
<a ng-click="marketplaceCtrl.addToHome($index , portlet)"
ng-if="portlet.canAdd && !portlet.hasInLayout" class="add">
<i class="fa fa-plus"></i> Add to home
</a>
<span ng-if="portlet.canAdd && portlet.hasInLayout" class="added">
<i class="fa fa-check"></i> Added to home
</span>
<a href="apps/details/{{::portlet.fname}}">Details</a>
<span><rating ng-model="portlet.rating" readonly="true" class="rating"></rating></span>
</p>

</div>
<div class="marketplace-load-more">
<button class="btn btn-primary btn-lg"
ng-click="searchResultLimit = searchResultLimit + 20;"
hide-while-loading
ng-show="(portlets | filter:searchTermFilter | showApplicable:showAll | showCategory:categoryToShow).length > searchResultLimit"
>Load More</button>
</div>

<div
ng-show="portlets.length > 0 && (portlets | filter:searchTermFilter | showApplicable:showAll | showCategory:categoryToShow).length == 0"
class="no-results">
<p>No matching MyUW content.</p>
<p>Maybe try:</p>
<ul>
<li ng-show="(portlets | filter:searchTermFilter | showApplicable:showAll).length > 0">
<a href="#" ng-click="selectFilter('az','')">Show matching content beyond the &quot;{{categoryToShow}}&quot; category</a>.</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the references to categoryToShow could be washed away.

<li
ng-show="(portlets | filter:searchTermFilter | showCategory:categoryToShow).length > 0">
<a href="#" ng-click="toggleShowAll()">Show matching MyUW content even though it is not launchable</a>.</li>
<li ng-if="directorySearchUrl">
<a ng-href="{{directorySearchUrl}}{{searchText}}"
target="_blank">Search the directory</a> (of people and offices) instead.</li>
<li ng-if="webSearchUrl">
<a ng-href="{{webSearchUrl}}{{searchText}}"
target="_blank">Search <span ng-if="webSearchDomain">the {{webSearchDomain}} domain on</span> the Web</a> instead.</li>
<li ng-if="kbSearchUrl">
<a ng-href="{{kbSearchUrl}}{{searchText}}"
target="_blank">Search the KnowledgeBase</a> instead.</li>
<li ng-if="eventsSearchUrl">
<a ng-href="{{eventsSearchUrl}}{{searchText}}"
target="_blank">Search for events</a> instead.</li>
<li ng-if="helpdeskUrl">
<a ng-href="{{helpdeskUrl}}"
target="_blank">Ask the Help Desk</a> for help.</li>
<li ng-if="feedbackUrl">
<a ng-href="{{feedbackUrl}}">Give feedback</a> about search.</li>
</ul>
</div>

</div>
3 changes: 3 additions & 0 deletions angularjs-portal-home/src/main/webapp/my-app/marketplace/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ define(['require'], function(require){
main: {
templateUrl: require.toUrl('./partials/marketplace.html')
},
search: {
templateUrl: require.toUrl('./partials/search-results.html')
},
details: {
templateUrl: require.toUrl('./partials/marketplace-details.html')
}
Expand Down