diff --git a/app/views/partials/detail.book.pug b/app/views/partials/detail.book.pug index 719a8a9..71edfc2 100644 --- a/app/views/partials/detail.book.pug +++ b/app/views/partials/detail.book.pug @@ -141,6 +141,6 @@ div#book-details h3 Make an Offer textarea(ng-model="offer.message") div.bottom-buttons - button(ng-click="makeOffer()") Send email button.cancel(ng-click="offer.active = false") Cancel + button(ng-click="makeOffer()") Send email diff --git a/app/views/partials/detail.user.pug b/app/views/partials/detail.user.pug index bde3eee..cad22fe 100644 --- a/app/views/partials/detail.user.pug +++ b/app/views/partials/detail.user.pug @@ -244,8 +244,8 @@ div.modal-wrapper( h2 Make an Offer textarea(ng-model="offer.message") div.bottom-buttons - button(ng-click="makeOffer()") Send email button.cancel(ng-click="offer.active = false") Cancel + button(ng-click="makeOffer()") Send email div.modal-wrapper( ng-class="{'visible':avatar.active}", diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug index baa79be..e03d0c9 100644 --- a/app/views/partials/main.pug +++ b/app/views/partials/main.pug @@ -11,7 +11,7 @@ div#search(ng-class="\ div#search-form //- span#search-labels - //- label(class="pre-search" for="search") Find or list a book: + //- label(class="pre-search" for="search") Find books and people: //- label(class="post-search" for="search") Results for: input#search-box(type="text", ng-model="searchInput", @@ -24,39 +24,38 @@ div#search(ng-class="\ div#search-results(ui-view="search") - div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimized': hideRecentListings}") - //- div.tabs - //- h3 Recent Listings - table.listings - thead - tr - th.book(colspan="2") Book - //- th.seller(colspan="2") Seller - th.seller Seller - th.condition Cond. - th.price Price - th.contact Offer - tbody - tr(ng-repeat="listing in recentListings", - ng-class="{'disabled': listing.userID == currentUser.userID}", - ng-include="'partials/main.recent_listings'") - tfoot - tr - td(colspan="6") - button(ng-if="recentListings.length < totalListings" ng-click="getMoreRecentListings()") - span.symbol + - | Load more - span(ng-if="recentListings.length >= totalListings") That's all she wrote! +div#detail-wrapper(ui-view="detail", ng-class="detailIsMaximized ? 'maximized':'minimized'") - div.modal-wrapper( - ng-class="{'visible':offer.active}", - ng-htb-self-mousedown="offer.active = false" - ) - div.modal.offer - h2 Make an Offer - textarea(ng-model="offer.message") - div.bottom-buttons - button(ng-click="makeOffer()") Send email - button.cancel(ng-click="offer.active = false") Cancel +div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimized': hideRecentListings}") + h3 Recent Listings + table.listings + thead + tr + th.book(colspan="2") Book + //- th.seller(colspan="2") Seller + th.seller Seller + th.condition Cond. + th.price Price + th.contact Offer + tbody + tr(ng-repeat="listing in recentListings", + ng-class="{'disabled': listing.userID == currentUser.userID}", + ng-include="'partials/main.recent_listings'") + tfoot + tr + td(colspan="6") + button(ng-if="recentListings.length < totalListings" ng-click="getMoreRecentListings()") + span.symbol + + | Load more + span(ng-if="recentListings.length >= totalListings") That's all she wrote! -div#detail-wrapper(ui-view="detail", ng-class="detailIsMaximized ? 'maximized':'minimized'") +div.modal-wrapper( + ng-class="{'visible':offer.active}", + ng-htb-self-mousedown="offer.active = false" + ) + div.modal.offer + h2 Make an Offer + textarea(ng-model="offer.message") + div.bottom-buttons + button.cancel(ng-click="offer.active = false") Cancel + button(ng-click="makeOffer()") Send email \ No newline at end of file diff --git a/app/views/partials/search.pug b/app/views/partials/search.pug index 64b120e..e8996f0 100644 --- a/app/views/partials/search.pug +++ b/app/views/partials/search.pug @@ -27,6 +27,12 @@ ul(ng-if="$parent.displayedSearch == 'books'") tr td ISBN: td {{ book.ISBN }} + div.listing-stats + p Student Listings: + span.stat(ng-class="{'good': !!book.listings.length}") + | {{ book.listings.length }} + p Amazon: + span.stat.good ✔ ul(ng-if="$parent.displayedSearch == 'users'") li(ng-repeat="user in userResults") diff --git a/public/scripts/main.js b/public/scripts/main.js index 4d52ac7..6c1bcd6 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -411,58 +411,28 @@ hitsTheBooks.controller('recentListingsController', function($scope, $rootScope, $interval, $state, Api, AUTH_EVENTS) { var pagingData = { - initNumListings : 5, // how many listings we want load with UpdateRecent... - querySize : 5 // how many more to add on getMoreRecent.... + initNumListings : 3, // how many listings we want load with UpdateRecent... + querySize : 3 // how many more to add on getMoreRecent.... } $scope.recentListings = []; $scope.totalListings = 0; // how many listings the backend has - $scope.offersDict = {}; - $scope.offer = { + $scope.$parent.offer = { active: false, listing: null, message: null } - $scope.$watch('offers', function() { - // When offers change, update offers dict - $scope.offersDict = {}; - for (var i = 0; i < $scope.offers.length; i++) { - $scope.offersDict[$scope.offers[i].listingID] = true; - }; - }); - $scope.$on(AUTH_EVENTS.loginSuccess, - function() { - refreshOffers(); - } - ); - var refreshOffers = function() { - Api.getOffers().then( function(offers) { - $scope.offers = offers; - }, function(err) { - console.log(err); - }); - } $scope.makeOfferInit = function(listing) { - $scope.offer.listing = listing; - $scope.offer.message = - "Hi "+$scope.offer.listing.user.name.fullName+",\n\n" - + "I'm interested in [buying/renting] your copy of \""+$scope.offer.listing.book.name+".\" " + $scope.$parent.offer.listing = listing; + $scope.$parent.offer.message = + "Hi "+$scope.$parent.offer.listing.user.name.fullName+",\n\n" + + "I'm interested in [buying/renting] your copy of \""+$scope.$parent.offer.listing.book.name+".\" " + "Please let me know when we could meet.\n\n" + "Thanks" + ($rootScope.currentUser ? (",\n"+$rootScope.currentUser.name.fullName) : "!") - $scope.offer.active = true; + $scope.$parent.offer.active = true; } - $scope.makeOffer = function() { - Api.makeOffer($scope.offer.listing.listingID, $scope.offer.message) - .then( function (data) { - refreshOffers(); - $scope.offer.active = false; - }, function (err) { - console.log(err); - }) - } - var updateRecentListings = function() { Api.getRecentListings({ @@ -480,7 +450,7 @@ hitsTheBooks.controller('recentListingsController', $scope.getMoreRecentListings = function() { if ($scope.recentListings.length < $scope.totalListings) { Api.getRecentListings({ - limit: $scope.querySize, + limit: pagingData.querySize, skip: $scope.recentListings.length }).then(function(res){ $scope.recentListings = $scope.recentListings.concat(res.listings) @@ -511,12 +481,55 @@ hitsTheBooks.controller('recentListingsController', } }); -hitsTheBooks.controller('mainController', function($scope, $rootScope, $stateParams, $state, $document, offers) { +hitsTheBooks.controller('mainController', function($scope, $rootScope, $stateParams, $state, $document, offers, Api, AUTH_EVENTS) { $scope.offers = offers; if ($stateParams.flash) { $scope.flashMessage($stateParams.flash); } + + $scope.$on(AUTH_EVENTS.loginSuccess, + function() { + refreshOffers(); + } + ); + + var refreshOffers = function() { + Api.getOffers().then( function(offers) { + $scope.offers = offers; + }, function(err) { + console.log(err); + }); + } + $scope.offersDict = {}; + var updateOffersDict = function(){ + // When offers change, update offers dict + $scope.offersDict = {}; + for (var i = 0; i < $scope.offers.length; i++) { + $scope.offersDict[$scope.offers[i].listingID] = true; + }; + } + $scope.$watch('offers', updateOffersDict); + updateOffersDict(); + + $scope.makeOffer = function() { + Api.makeOffer($scope.offer.listing.listingID, $scope.offer.message) + .then( function (data) { + refreshOffers(); + $scope.offer.active = false; + }, function (err) { + console.log(err); + }) + } + + var refreshOffers = function() { + Api.getOffers().then( function(offers) { + $scope.offers = offers; + }, function(err) { + console.log(err); + }); + } + $scope.displayedSearch = 'books'; var streamSearchDelay = 250; //ms var initSearch = false; diff --git a/public/styles/index.css b/public/styles/index.css index e41994a..1ee0e21 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -580,6 +580,15 @@ main { flex-grow: 1; padding-right: 20px; padding-bottom: 20px; } + main #search #search-results ul li div.info div.listing-stats { + display: flex; } + main #search #search-results ul li div.info div.listing-stats p { + flex-grow: 1; + font-family: 'Droid Sans'; + font-size: 10pt; + text-align: center; } + main #search #search-results ul li div.info div.listing-stats p .stat { + margin-right: 0; } main #search #search-results ul li a.book, main #search #search-results ul li a.user { text-decoration: none; color: black; @@ -702,42 +711,57 @@ main { box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3); } #recent-listings { + width: 480px; + box-sizing: border-box; + margin: 4px auto 0 auto; padding: 10px; - background-color: white; + background-color: rgba(255, 255, 255, 0.8); + color: #555; + opacity: .96; transition: opacity .2s, height .2s, padding .2s; overflow: hidden; } #recent-listings h3 { font-weight: normal; font-variant: small-caps; font-size: 23px; - border-bottom: 1px solid black; - text-align: center; } - #recent-listings table.listings th.condition { - width: inherit; } - #recent-listings table.listings th.price { - width: 6em; } - #recent-listings table.listings th.seller { - width: 4em; } - #recent-listings table.listings td.image { - width: 45px; } - #recent-listings table.listings tbody { - font-size: 10pt; } - #recent-listings table.listings tbody img { - margin: 0 5px; } - #recent-listings table.listings tbody td { - height: 70px; } - #recent-listings table.listings tbody table.price-table td { - height: auto; } - #recent-listings table.listings tfoot td { - padding: 0; } - #recent-listings table.listings tfoot span { - padding: 5px; - display: inline-block; - font-family: 'Droid Serif', serif; - color: gray; } - #recent-listings table.listings tfoot button { - height: 30px; - width: 100%; } + text-align: center; + float: left; + margin-bottom: 0; + border-bottom: solid 2px #555; + padding: 0 6px 12px 6px; + padding-top: 0; + margin-top: 6px; } + #recent-listings table.listings { + border-top: solid 2px #555; + background-color: #f7f7f7; } + #recent-listings table.listings th { + background-color: #fcfbf7; } + #recent-listings table.listings th.condition { + width: inherit; } + #recent-listings table.listings th.price { + width: 6em; } + #recent-listings table.listings th.seller { + width: 4em; } + #recent-listings table.listings td.image { + width: 45px; } + #recent-listings table.listings tbody { + font-size: 10pt; } + #recent-listings table.listings tbody img { + margin: 0 5px; } + #recent-listings table.listings tbody td { + height: 70px; } + #recent-listings table.listings tbody table.price-table td { + height: auto; } + #recent-listings table.listings tfoot td { + padding: 0; } + #recent-listings table.listings tfoot span { + padding: 5px; + display: inline-block; + font-family: 'Droid Serif', serif; + color: gray; } + #recent-listings table.listings tfoot button { + height: 30px; + width: 100%; } #recent-listings.minimized { opacity: 0; @@ -765,7 +789,8 @@ main { color: gray; line-height: 1.2em; font-size: 11pt; - border: solid 1px; } + border: solid 1px; + text-align: center; } .stat.good { color: #45753c; } diff --git a/public/styles/index.scss b/public/styles/index.scss index 0ca1bd8..9bcc1bf 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -188,6 +188,19 @@ main{ flex-grow: 1; padding-right: 20px; padding-bottom: 20px; + div.listing-stats{ + display: flex; + p { + flex-grow: 1; + // flex-basis: 0; + font-family: 'Droid Sans'; + font-size: 10pt; + text-align: center; + .stat{ + margin-right: 0; + } + } + } } a.book, a.user{ text-decoration: none; @@ -368,24 +381,36 @@ main{ } #recent-listings{ - // width: 480px; - // box-sizing: border-box; - // margin: 0 auto; + width: 480px; + box-sizing: border-box; + margin: 4px auto 0 auto; padding: 10px; - background-color: rgba(255,255,255,1); + background-color: rgba(255,255,255,.8); // margin-bottom: 40px; // margin-top: -11px; // padding-top: 15px; + color: #555; + opacity: .96; h3{ font-weight: normal; font-variant: small-caps; font-size: 23px; - border-bottom: 1px solid black; text-align: center; + float: left; + margin-bottom: 0; + border-bottom: solid 2px #555; + padding: 0 6px 12px 6px; + padding-top: 0; + margin-top: 6px; } table.listings { + border-top: solid 2px #555; + background-color: #f7f7f7; + th{ + background-color: #fcfbf7; + } th.condition{ width: inherit; } @@ -459,6 +484,7 @@ main{ line-height: 1.2em; font-size: 11pt; border: solid 1px; + text-align: center; } .stat.good{ color: #45753c