PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-22 13:07:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

#1: Improved the layout of the search results.

Browse source
This commit is contained in:
Peter Deltchev 2016-01-16 23:11:06 -08:00
parent 93b447f05c
commit 864112b1f2
4 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
public/templates/directives/search.html
View file

@ -7,19 +7,24 @@
pfm-popup="search-results" pfm-popup="search-results"
/> />
<div class="search-results pfm-popup" id="search-results"> <section class="search-results pfm-popup" id="search-results">
<h3 class="-section-header">Matching tracks</h3> <div class="-column1">
<pfm-tracks-list tracks="tracks"></pfm-tracks-list> <h3 class="-section-header">Matching tracks</h3>
<pfm-tracks-list tracks="tracks"></pfm-tracks-list>
<h3 class="-section-header">Matching albums</h3> </div>
<pfm-albums-list albums="albums"></pfm-albums-list>
<h3 class="-section-header">Matching playlists</h3> <div class="-column2">
<pfm-playlists-list playlists="playlists"></pfm-playlists-list> <h3 class="-section-header">Matching users</h3>
<ol>
<li bindonce ng-repeat="user in users track by user.id" bo-text="user.display_name"></li>
</ol>
<h3 class="-section-header">Matching users</h3> <h3 class="-section-header">Matching albums</h3>
<ol> <pfm-albums-list albums="albums"></pfm-albums-list>
<li bindonce ng-repeat="user in users track by user.id" bo-text="user.display_name"></li>
</ol> <h3 class="-section-header">Matching playlists</h3>
</div> <pfm-playlists-list playlists="playlists"></pfm-playlists-list>
</div>
</section>
</div> </div>

9
resources/assets/scripts/app/directives/popup.coffee
View file

@ -55,10 +55,13 @@ angular.module('ponyfm').directive 'pfmPopup', () ->
calculatePosition = -> calculatePosition = ->
$popup.parents().each () -> $popup.parents().each () ->
$this = $ this $this = $ this
$positionParent = $this if $positionParent == null && ($this.css('position') == 'relative' || $this.is 'body')
if $positionParent == null && ($this.css('position') == 'relative' || $this.is 'body')
$positionParent = $this
return false
position = $element.offset() position = $element.offset()
parentPosition = $positionParent.offset() parentPosition = $positionParent.offset() + $positionParent.height()
windowWidth = $(window).width() - 15 windowWidth = $(window).width() - 15
left = position.left left = position.left
@ -89,7 +92,7 @@ angular.module('ponyfm').directive 'pfmPopup', () ->
$popup.css $popup.css
left: position.left left: position.left
top: position.top top: position.top
height: position.height maxHeight: position.height
$(document.body).bind 'click', documentClickHandler $(document.body).bind 'click', documentClickHandler
$(window).bind 'resize', windowResizeHandler $(window).bind 'resize', windowResizeHandler

2
resources/assets/scripts/app/directives/search.coffee
View file

@ -59,5 +59,5 @@ angular.module('ponyfm').directive 'pfmSearch', () ->
for user in results.users for user in results.users
$scope.users.push(user) $scope.users.push(user)
, 500) , 200)
] ]

26
resources/assets/styles/search.less vendored
View file

@ -20,25 +20,41 @@
@import 'mixins'; @import 'mixins';
@import 'variables'; @import 'variables';
.search {
position: relative;
}
.search-input { input.search-input {
font-size: 13px;
padding: 15px 10px;
margin-bottom: 0;
} }
.search-results { .search-results {
position: absolute; width: 600px;
width: 500px;
padding: 10px; padding: 10px;
background: #fff; background: #fff;
.-column1, .-column2 {
width: 48%;
float: left;
}
.-column1 {
padding-right: 2%;
}
.-column2 {
padding-left: 2%;
}
ol li { ol li {
list-style: disc; list-style: disc;
} }
li a { li a {
padding: 0; padding: 0;
padding-right: 0;
overflow: hidden; overflow: hidden;
color: @pfm-light-grey; color: @pfm-light-grey;
} }