From c7b03c713a3a23d0a980f0368b55c28368df0093 Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 13:06:09 -0500 Subject: [PATCH 1/7] add counts --- app/views/partials/main.pug | 4 ++-- app/views/partials/search.pug | 5 +++++ public/styles/index.css | 3 ++- public/styles/index.scss | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug index baa79be..ff97e95 100644 --- a/app/views/partials/main.pug +++ b/app/views/partials/main.pug @@ -25,8 +25,8 @@ 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 + div.tabs + h3 Recent Listings table.listings thead tr diff --git a/app/views/partials/search.pug b/app/views/partials/search.pug index 64b120e..bb72908 100644 --- a/app/views/partials/search.pug +++ b/app/views/partials/search.pug @@ -27,6 +27,11 @@ ul(ng-if="$parent.displayedSearch == 'books'") tr td ISBN: td {{ book.ISBN }} + p Student Listings: + span.stat(ng-class="{'good': !!book.listings.length}") + | {{ book.listings.length }} + | Amazon: + span.stat.good ✔ ul(ng-if="$parent.displayedSearch == 'users'") li(ng-repeat="user in userResults") diff --git a/public/styles/index.css b/public/styles/index.css index 606eded..775fd03 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -759,7 +759,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..d51dbc1 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -459,6 +459,7 @@ main{ line-height: 1.2em; font-size: 11pt; border: solid 1px; + text-align: center; } .stat.good{ color: #45753c From d30cf0fc92d0b71c0c7545db8681f5d3e0904ddc Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 13:27:43 -0500 Subject: [PATCH 2/7] style --- app/views/partials/main.pug | 67 ++++++++++++++++++----------------- public/styles/index.css | 69 +++++++++++++++++++++---------------- public/styles/index.scss | 17 ++++++--- 3 files changed, 85 insertions(+), 68 deletions(-) diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug index ff97e95..2cea33a 100644 --- a/app/views/partials/main.pug +++ b/app/views/partials/main.pug @@ -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(ng-click="makeOffer()") Send email + button.cancel(ng-click="offer.active = false") Cancel diff --git a/public/styles/index.css b/public/styles/index.css index 775fd03..1b381cd 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -696,42 +696,53 @@ 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; 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 black; + padding: 0 6px 12px 6px; + padding-top: 0; + margin-top: 17px; } + #recent-listings table.listings { + background-color: #f7f7f7; } + #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; diff --git a/public/styles/index.scss b/public/styles/index.scss index d51dbc1..97bd8de 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -368,24 +368,31 @@ 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; 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 black; + padding: 0 6px 12px 6px; + padding-top: 0; + margin-top: 17px; } table.listings { + background-color: #f7f7f7; th.condition{ width: inherit; } From 248b0133fdce713045eb693828e0255e8762aad5 Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 13:43:20 -0500 Subject: [PATCH 3/7] fix paging --- public/scripts/main.js | 8 ++++---- public/styles/index.css | 5 ++++- public/styles/index.scss | 6 +++++- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index 4d52ac7..116cdf6 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -411,8 +411,8 @@ 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 = []; @@ -480,7 +480,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) @@ -495,7 +495,7 @@ hitsTheBooks.controller('recentListingsController', //for recent listings $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ - var $rl = $("#recent-listings") + var $rl = $("#recent-!listings") //if it's a main transition and it's to main if(toState.name.indexOf("main") > -1 && toState.name == "main") { $scope.hideRecentListings = false; diff --git a/public/styles/index.css b/public/styles/index.css index 1b381cd..7bd8676 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -711,12 +711,15 @@ main { text-align: center; float: left; margin-bottom: 0; - border-bottom: solid 2px black; + border-bottom: solid 2px #555; padding: 0 6px 12px 6px; padding-top: 0; margin-top: 17px; } #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 { diff --git a/public/styles/index.scss b/public/styles/index.scss index 97bd8de..462fe80 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -385,14 +385,18 @@ main{ text-align: center; float: left; margin-bottom: 0; - border-bottom: solid 2px black; + border-bottom: solid 2px #555; padding: 0 6px 12px 6px; padding-top: 0; margin-top: 17px; } table.listings { + border-top: solid 2px #555; background-color: #f7f7f7; + th{ + background-color: #fcfbf7; + } th.condition{ width: inherit; } From 5cf196e6b84ace0b0dfed59b93ec636ec0f04104 Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 14:30:03 -0500 Subject: [PATCH 4/7] I think this is good --- app/views/partials/main.pug | 2 +- public/scripts/main.js | 2 +- public/styles/index.css | 9 ++++++++- public/styles/index.scss | 3 ++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug index 2cea33a..c73cd3b 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", diff --git a/public/scripts/main.js b/public/scripts/main.js index 116cdf6..701658f 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -495,7 +495,7 @@ hitsTheBooks.controller('recentListingsController', //for recent listings $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ - var $rl = $("#recent-!listings") + var $rl = $("#recent-listings") //if it's a main transition and it's to main if(toState.name.indexOf("main") > -1 && toState.name == "main") { $scope.hideRecentListings = false; diff --git a/public/styles/index.css b/public/styles/index.css index 7bd8676..284f5c4 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -209,11 +209,17 @@ input, select { outline: none; } select { + -webkit-appearance: none; + -webkit-border-radius: 0px; + padding-bottom: 2px; border-bottom: solid 2px black; font-size: 14px; font-family: 'Droid Sans', Sans; border-radius: 0; } +select:hover { + cursor: pointer; } + input[type="checkbox"] { visibility: hidden; position: relative; @@ -702,6 +708,7 @@ main { padding: 10px; background-color: rgba(255, 255, 255, 0.8); color: #555; + opacity: .96; transition: opacity .2s, height .2s, padding .2s; overflow: hidden; } #recent-listings h3 { @@ -714,7 +721,7 @@ main { border-bottom: solid 2px #555; padding: 0 6px 12px 6px; padding-top: 0; - margin-top: 17px; } + margin-top: 6px; } #recent-listings table.listings { border-top: solid 2px #555; background-color: #f7f7f7; } diff --git a/public/styles/index.scss b/public/styles/index.scss index 462fe80..ed96528 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -377,6 +377,7 @@ main{ // margin-top: -11px; // padding-top: 15px; color: #555; + opacity: .96; h3{ font-weight: normal; @@ -388,7 +389,7 @@ main{ border-bottom: solid 2px #555; padding: 0 6px 12px 6px; padding-top: 0; - margin-top: 17px; + margin-top: 6px; } table.listings { From 9ddbe4d1047487f59ccd2956502ef1f1c8be353f Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 14:37:07 -0500 Subject: [PATCH 5/7] little fixes --- app/views/partials/search.pug | 11 ++++++----- public/styles/index.css | 9 +++++++++ public/styles/index.scss | 13 +++++++++++++ 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/app/views/partials/search.pug b/app/views/partials/search.pug index bb72908..e8996f0 100644 --- a/app/views/partials/search.pug +++ b/app/views/partials/search.pug @@ -27,11 +27,12 @@ ul(ng-if="$parent.displayedSearch == 'books'") tr td ISBN: td {{ book.ISBN }} - p Student Listings: - span.stat(ng-class="{'good': !!book.listings.length}") - | {{ book.listings.length }} - | Amazon: - span.stat.good ✔ + 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/styles/index.css b/public/styles/index.css index 284f5c4..f741f35 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; diff --git a/public/styles/index.scss b/public/styles/index.scss index ed96528..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; From f4b5658a4f59b0cf88f5c283166b7aee113b79a1 Mon Sep 17 00:00:00 2001 From: David Pickart Date: Mon, 29 Aug 2016 15:03:06 -0500 Subject: [PATCH 6/7] Rearrange offer buttons --- app/views/partials/detail.book.pug | 2 +- app/views/partials/detail.user.pug | 2 +- app/views/partials/main.pug | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 c73cd3b..88a8f33 100644 --- a/app/views/partials/main.pug +++ b/app/views/partials/main.pug @@ -57,5 +57,5 @@ div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimi 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 From 5acd36c07f4d1b3fb4dc79ac6258f83964733152 Mon Sep 17 00:00:00 2001 From: JSlote Date: Mon, 29 Aug 2016 16:41:45 -0500 Subject: [PATCH 7/7] terribly ugly fix --- app/views/partials/main.pug | 20 ++++----- public/scripts/main.js | 87 +++++++++++++++++++++---------------- 2 files changed, 60 insertions(+), 47 deletions(-) diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug index 88a8f33..e03d0c9 100644 --- a/app/views/partials/main.pug +++ b/app/views/partials/main.pug @@ -49,13 +49,13 @@ div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimi | Load more span(ng-if="recentListings.length >= totalListings") That's all she wrote! - 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 +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/public/scripts/main.js b/public/scripts/main.js index 701658f..6c1bcd6 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -417,52 +417,22 @@ hitsTheBooks.controller('recentListingsController', $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({ @@ -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;