fergalmoran/dss.web
1
0
Fork 0
mirror of https://github.com/fergalmoran/dss.web.git synced 2026-02-15 12:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed search results view

Browse Source
This commit is contained in:
Fergal Moran
2015-12-12 19:13:52 +00:00
parent 537c572f9f
commit bac3384eaf
7 changed files with 499 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/app/components/navbar/navbar.controller.js
View File

@@ -32,4 +32,5 @@ angular.module('dssWebApp')
$scope.doDebug = function () {
$http.get(SERVER_CONFIG.apiUrl + '/__debug/');
};
});

202
client/app/components/navbar/navbar.html
View File

@@ -1,92 +1,126 @@
<div class="container-fluid">
<a ui-sref="root" id="brand">Deep|South|Sounds</a>
<ul class="main-nav">
<li class="ms-hover" ng-if="$root.currentUser">
<a ui-sref="root.upload" ui-sref-active="active">
<i class="fa fa-cloud-upload"></i>
<span>Upload</span>
</a>
</li>
</ul>
<nav class="navbar navbar-default" role="navigation" id="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="root" id="brand">Deep|South|Sounds</a>
</div>
<div class="user" ng-if="$root.currentUser">
<ul class="icon-nav">
<li class="dropdown" id="notifications">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="notifications-button">
<i class="fa fa-envelope"></i>
<span class="label label-lightred">{{notificationCount}}</span>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="collapse-menu">
<ul class="nav navbar-nav">
<li ui-sref-active="active" ng-if="$root.currentUser">
<a ui-sref="root.upload">
<i class="fa fa-cloud-upload"></i>
<span>Upload</span>
</a>
<ul class="dropdown-menu pull-right message-ul">
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" ng-model="selected" placeholder="Search..."
typeahead="result for results in getSearchResults($viewValue)"
typeahead-template-url="app/views/templates/searchResult.html"
typeahead-loading="loadingSearchResults"
class="form-control"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<!--
<li id="navbar-notification-dropdown" class="dropdown" ng-if="$root.currentUser">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" id="notifications-button">
<i class="fa fa-envelope"></i>
<span class="label label-lightred notification-label">{{notificationCount}}</span>
</a>
<ul class="dropdown-menu message-ul">
<dss-notifications/>
</ul>
</li>
-->
<li id="LI_1" id="navbar-notification-dropdown" class="dropdown" ng-if="$root.currentUser">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" id="notifications-button">
<i class="fa fa-envelope"></i>
<span class="label label-lightred notification-label">{{notificationCount}}</span>
</a>
<ul id="UL_5" class="dropdown-menu message-ul">
<li id="LI_6">
<span id="SPAN_7">You have 9 messages</span>
</li>
<li id="LI_8">
<a href="index.html#" id="A_9"> <span id="SPAN_10"><img src="assets/img/avatar.jpg" alt="Avatar" id="IMG_11" /></span> <span id="SPAN_12"> <span id="SPAN_13">Łukasz Holeczek</span> <span id="SPAN_14">6 min</span></span> <span id="SPAN_15">Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore</span></a>
</li>
<li id="LI_16">
<a href="index.html#" id="A_17"> <span id="SPAN_18"><img src="assets/img/avatar2.jpg" alt="Avatar" id="IMG_19" /></span> <span id="SPAN_20"> <span id="SPAN_21">Megan Abott</span> <span id="SPAN_22">56 min</span></span> <span id="SPAN_23">Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore</span></a>
</li>
<li id="LI_24">
<a href="index.html#" id="A_25"> <span id="SPAN_26"><img src="assets/img/avatar3.jpg" alt="Avatar" id="IMG_27" /></span> <span id="SPAN_28"> <span id="SPAN_29">Kate Ross</span> <span id="SPAN_30">3 hours</span></span> <span id="SPAN_31">Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore</span></a>
</li>
<li id="LI_32">
<a href="index.html#" id="A_33"> <span id="SPAN_34"><img src="assets/img/avatar4.jpg" alt="Avatar" id="IMG_35" /></span> <span id="SPAN_36"> <span id="SPAN_37">Julie Blank</span> <span id="SPAN_38">yesterday</span></span> <span id="SPAN_39">Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore</span></a>
</li>
<li id="LI_40">
<a href="index.html#" id="A_41"> <span id="SPAN_42"><img src="assets/img/avatar5.jpg" alt="Avatar" id="IMG_43" /></span> <span id="SPAN_44"> <span id="SPAN_45">Jane Sanders</span> <span id="SPAN_46">Jul 25, 2012</span></span> <span id="SPAN_47">Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore</span></a>
</li>
<li id="LI_48">
<a id="A_49">View all messages</a>
</li>
</ul>
</li>
<li id="navbar-profile-dropdown" class="dropdown" ng-if="$root.currentUser">
<a href="#" class="dropdown-toggle navbar-profile-dropdown" data-toggle="dropdown">{{ $root.currentUser.display_name }}
<b class="caret"></b>
<img class="navbar-profile-image img-circle" ng-src="{{$root.currentUser.profile_image_small}}" alt="">
</a>
<ul class="dropdown-menu">
<li>
<a href="components-messages.html" class="more-messages">Go to Message center
<i class="fa fa-arrow-right"></i>
</a>
<a ui-sref="root.me">View profile</a>
</li>
<li>
<a ui-sref="root.me.edit">Account settings</a>
</li>
<li>
<a href="#" ng-click="logout()">Sign out</a>
</li>
</ul>
</li>
<li class="ms-hover" ng-if="!$root.currentUser">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Login/Signup
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<div class="social-buttons">
<ul class="list-nostyle">
<li>
<a ng-click="doLogin('facebook')" class="btn btn-fb"><i
class="fa fa-facebook"></i> Facebook</a>
</li>
<li>
<a ng-click="doLogin('twitter')" class="btn btn-tw"><i
class="fa fa-twitter"></i> Twitter</a>
</li>
<li>
<a ng-click="doLogin('google')" class="btn btn-google"><i class="fa fa-google"></i>
Google</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ $root.currentUser.display_name }}
<img class="navbar-profile-image img-circle" ng-src="{{$root.currentUser.profile_image_small}}" alt="">
</a>
<ul class="dropdown-menu pull-right">
<li>
<a ui-sref="root.me">View profile</a>
</li>
<li>
<a ui-sref="root.me.edit">Account settings</a>
</li>
<li>
<a href="#" ng-click="logout()">Sign out</a>
</li>
</ul>
</div>
</div>
<ul class="main-nav pull-right">
<li class="ms-hover" ng-if="!$root.currentUser">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Login/Signup
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<div class="social-buttons">
<ul class="list-nostyle">
<li>
<a ng-click="doLogin('facebook')" class="btn btn-fb"><i
class="fa fa-facebook"></i> Facebook</a>
</li>
<li>
<a ng-click="doLogin('twitter')" class="btn btn-tw"><i
class="fa fa-twitter"></i> Twitter</a>
</li>
<li>
<a ng-click="doLogin('google')" class="btn btn-google"><i class="fa fa-google"></i>
Google</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<div class="user" ng-if="false">
<ul class="icon-nav">
<li>
<form action="search-results.html" method="GET" class="search-form">
<div class="search-pane">
<input type="text" ng-model="selected" placeholder="Search..."
typeahead="result for results in getSearchResults($viewValue)"
typeahead-template-url="app/views/templates/searchResult.html"
typeahead-loading="loadingSearchResults"
class="form-control"/>
<button type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
</nav>

374
client/app/components/navbar/navbar.less
View File

@@ -37,6 +37,374 @@ div.social-buttons a {
background-color: #e42f10 !important;
}
.navbar-search-styled{
height: 34px!important;
}
.navbar-header {
}
nav > div.collapse.navbar-collapse > ul > li > a {
color: #fff;
}
.navbar-profile-dropdown {
padding-top: 10px !important;
padding-bottom: 0px !important;
margin-top: 4px;
}
.notification-label {
position: absolute !important;
top: 5px !important;;
right: 3px !important;;
font-size: 11px !important;;
font-weight: 400 !important;;
padding: 0 3px !important;;
line-height: 14px !important;;
}
#notifications-button {
margin-top: 8px;
padding: 11px 10px 9px;
display: block;
line-height: 20px;
color: #fff;
position: relative;
}
i#notifications-button {
font-size: 32px;
}
#LI_1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 40px;
position: relative;
width: 46px;
perspective-origin: 23px 20px;
transform-origin: 23px 20px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
}
/*#LI_1*/
#A_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 30px;
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
width: 40px;
perspective-origin: 20px 15px;
transform-origin: 20px 15px;
background: rgb(64, 69, 74) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 2px 2px 2px 2px;
font: normal normal normal normal 12px / 20px Lato, sans-serif;
list-style: none outside none;
margin: 5px 3px;
outline: rgb(255, 255, 255) none 0px;
padding: 5px 0px;
}
/*#A_2*/
#I_3 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 12px;
text-align: center;
white-space: nowrap;
width: 12.0156px;
perspective-origin: 6px 6px;
transform-origin: 6px 6px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 12px / 12px FontAwesome;
list-style: none outside none;
margin: 2px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}
/*#I_3*/
#I_3:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
content: '""';
cursor: pointer;
text-align: center;
white-space: nowrap;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 12px / 12px FontAwesome;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
}
/*#I_3:before*/
#SPAN_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
height: 20px;
position: absolute;
right: 3px;
text-align: center;
top: -3px;
white-space: nowrap;
width: 4.64062px;
perspective-origin: 2.3125px 10px;
transform-origin: 2.3125px 10px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 8px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
}
/*#SPAN_4*/
#UL_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: none;
float: left;
height: auto;
left: 0px;
max-width: 300px;
min-width: 166px;
position: absolute;
text-align: left;
top: 90%;
width: auto;
z-index: 1000;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(219, 222, 224);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
margin: 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 0px;
}
/*#UL_5*/
#LI_6, #LI_8, #LI_16, #LI_24, #LI_32, #LI_40 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: auto;
min-width: 260px;
width: auto;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border-top: 0px none rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 1px solid rgb(233, 235, 236);
border-left: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
}
/*#LI_6, #LI_8, #LI_16, #LI_24, #LI_32, #LI_40*/
#SPAN_7 {
box-sizing: border-box;
color: rgb(52, 56, 60);
display: block;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
background: rgb(233, 235, 236) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
padding: 5px 10px;
}
/*#SPAN_7*/
#A_9, #A_17, #A_25, #A_33, #A_41 {
background-position: 0px 0px;
box-sizing: border-box;
clear: both;
color: rgb(52, 56, 60);
cursor: pointer;
display: block;
text-align: left;
text-decoration: none;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
padding: 5px 10px;
}
/*#A_9, #A_17, #A_25, #A_33, #A_41*/
#SPAN_10, #SPAN_18, #SPAN_26, #SPAN_34, #SPAN_42 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_10, #SPAN_18, #SPAN_26, #SPAN_34, #SPAN_42*/
#IMG_11, #IMG_19, #IMG_27, #IMG_35, #IMG_43 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
display: block;
float: left;
height: 40px;
text-align: left;
vertical-align: middle;
width: 40px;
border: 0px none rgb(52, 56, 60);
border-radius: 2px 2px 2px 2px;
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
margin: 5px 10px 0px 0px;
outline: rgb(52, 56, 60) none 0px;
}
/*#IMG_11, #IMG_19, #IMG_27, #IMG_35, #IMG_43*/
#SPAN_12, #SPAN_20, #SPAN_28, #SPAN_36, #SPAN_44 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
display: block;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_12, #SPAN_20, #SPAN_28, #SPAN_36, #SPAN_44*/
#SPAN_13, #SPAN_21, #SPAN_29, #SPAN_37, #SPAN_45 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: normal normal bold normal 12px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_13, #SPAN_21, #SPAN_29, #SPAN_37, #SPAN_45*/
#SPAN_14, #SPAN_22, #SPAN_30, #SPAN_38, #SPAN_46 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
display: block;
position: absolute;
right: 5px;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: italic normal bold normal 11px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_14, #SPAN_22, #SPAN_30, #SPAN_38, #SPAN_46*/
#SPAN_15, #SPAN_23, #SPAN_39 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 11px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_15, #SPAN_23, #SPAN_39*/
#SPAN_31, #SPAN_47 {
box-sizing: border-box;
color: rgb(52, 56, 60);
cursor: pointer;
text-align: left;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 11px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
}
/*#SPAN_31, #SPAN_47*/
#LI_48 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: auto;
min-width: 260px;
width: auto;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
}
/*#LI_48*/
#A_49 {
box-sizing: border-box;
clear: both;
color: rgb(52, 56, 60);
cursor: pointer;
display: block;
text-align: center;
text-decoration: none;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
background: rgb(233, 235, 236) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(52, 56, 60);
font: normal normal normal normal 14px / 20px Lato, sans-serif;
list-style: none outside none;
outline: rgb(52, 56, 60) none 0px;
padding: 5px 10px;
}
/*#A_49*/

6
client/app/directives/notifications/notifications.html
View File

@@ -1,8 +1,8 @@
<li ng-repeat="notification in notifications">
<a ui-sref="root.users.mix({user: mix.user.slug, mix: notification.target})"
<a class="notification-wrapper" ui-sref="root.users.mix({user: mix.user.slug, mix: notification.target})"
ng-class="notification.accepted_date ? '' : 'notification-new'">
<img ng-src="{{notification.from_user.profile_image_small}}" alt="">
<div class="details">
<img class="notification-details-profile-image" ng-src="{{notification.from_user.profile_image_small}}" alt="">
<div class="details notification-details">
<div class="name">
{{notification.from_user.first_name}}
</div>

4
client/app/views/templates/searchResult.html
View File

@@ -1,8 +1,8 @@
<a ui-sref="root.user.mix({user: mix.user.slug, mix: mix.slug})">
<a ui-sref="root.user.mix({user: match.model.user, mix: match.model.slug})">
<div class="widget">
<div class="widget-simple">
<div href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
<img class="search-result-image" ng-src="{{match.model.image}}" class="widget-icon sidebar-user-avatar pull-right"/>
<img ng-src="{{match.model.image}}" class="search-result-image widget-icon sidebar-user-avatar pull-right"/>
</div>
<h4 class="widget-content text-right animation-hatch">
<small>{{match.model.title}}</small>

6
client/assets/site/css/site.css
View File

@@ -1,9 +1,5 @@
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
<<<<<<< HEAD
=======
>>>>>>> develop
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
-moz-border-radius: 0;
-webkit-border-radius: 0;
@@ -1188,7 +1184,7 @@ label, input, button, select, textarea {
float: left;
color: #fff;
font-size: 20px;
margin-top: 9px;
/*margin-top: 9px;*/
padding-right: 69px;
padding-left: 35px;
padding-bottom: 2px;

5
client/index.html
View File

@@ -44,7 +44,7 @@
<!-- endinjector -->
<!-- endbuild -->
</head>
<body class="theme-lightgrey" data-theme="theme-lightgrey" ng-controller="MainCtrl">
<body class="theme-lightgrey" data-theme="theme-lightgrey" ng-controller="MainCtrl">
<div id="navigation" ui-view="navbar">
</div>
<div id="main">
@@ -54,7 +54,8 @@
</div>
</div>
</div>
<div id="footer" ng-show="isPlaying" ui-view="footer" class="app-footer" style="position: fixed; bottom: 0px; top: auto;">
<div id="footer" ng-show="isPlaying" ui-view="footer" class="app-footer"
style="position: fixed; bottom: 0px; top: auto;">
</div>
<div id="spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2" style="display:none"></div>
</body>