diff --git a/app/views/partials/detail.user.listings.edit.pug b/app/views/partials/detail.user.listings.edit.pug new file mode 100644 index 0000000..2695699 --- /dev/null +++ b/app/views/partials/detail.user.listings.edit.pug @@ -0,0 +1,42 @@ +td.label(colspan="2") Edit my listing for "{{ newListing.bookName | limitTo: 20 }}{{newListing.bookName.length > 20 ? '…' : ''}}": +td.condition + select( + ng-model="newListing.condition", + ng-options="opt.name for opt in conditionOptions track by opt.code" + ) + a.dashed.tooltip(title="{{conditionDescriptions[newListing.condition.code]}}") Definition +td + p + input( + type="checkbox", + id="sellbox", + ng-model="newListing.selling", + ng-disabled="newListing.selling && !newListing.renting" + ) + span.label Sell for + input#sellingPriceInput.price( + type="text", + ng-model="newListing.sellingPrice", + ng-change="validateSellingPrice()" + placeholder="$12", + ng-disabled="!newListing.selling" + ) + p + input( + type="checkbox", + id="rentbox", + ng-model="newListing.renting", + ng-disabled="!newListing.selling && newListing.renting" + ) + span.label Rent for + input#rentingPriceInput.price( + type="text", + ng-model="newListing.rentingPrice", + ng-change="validateRentingPrice()", + placeholder="$12", + ng-disabled="!newListing.renting" + ) +td.confirm + button.confirm(type="submit") + span.symbol ✓ + | Update! diff --git a/app/views/partials/detail.user.listings.pug b/app/views/partials/detail.user.listings.pug index 7f29d63..02822d2 100644 --- a/app/views/partials/detail.user.listings.pug +++ b/app/views/partials/detail.user.listings.pug @@ -47,4 +47,4 @@ td.make-an-offer(ng-class="(currentUser && offersDict[listing.listingID]) ? 'com p Did it sell? button.confirm(type="button", ng-click="removeListing(listing, true)") Yes button.no(type="button", ng-click="removeListing(listing, false)") No - button.cancel(type="button", ng-click="closeRemovingListing()") Cancel \ No newline at end of file + button.cancel(type="button", ng-click="closeRemovingListing()") Cancel diff --git a/app/views/partials/detail.user.pug b/app/views/partials/detail.user.pug index cad22fe..1e69375 100644 --- a/app/views/partials/detail.user.pug +++ b/app/views/partials/detail.user.pug @@ -26,7 +26,7 @@ div.user-about ng-disabled="disabledComponents.newUserInfo", ng-model="newUserInfo.familyName") p.stats - span Class year: + span Class year: select#grad-year( ng-model="newUserInfo.gradYear" ng-options="x for x in gradYears" ) h4 Bio textarea( @@ -123,7 +123,6 @@ div.user-settings(ng-if="user.userID == currentUser.userID && editingUser") p#account-links a.logout(href, ng-click="logout()") Log Out - | a.delete(href, ng-click="deleteAccount()") Delete My Account... div.watchlist-wrapper(ng-if="user.userID == currentUser.userID") @@ -153,7 +152,7 @@ div.watchlist-wrapper(ng-if="user.userID == currentUser.userID") div.listings div.tabs - button(ng-click="whichListings = 'both'", ng-class="{'active': whichListings=='both'}") + button(ng-click="whichListings = 'both'", ng-class="{'active': whichListings=='both'}") | All Listings button(ng-click="whichListings = 'selling'", ng-class="{'active': whichListings=='selling'}") | Selling @@ -168,73 +167,36 @@ div.listings th.price.sortable(ng-click="handleReorder('price')", ng-class="{'active':listingOrder=='price','reversed':reverseSort}") Price th.contact {{ user.userID == currentUser.userID ? 'Edit' : 'Offer'}} tbody(ng-if="whichListings=='both'") - tr(ng-repeat="listing in user.listings | orderBy:listingOrder:reverseSort", - ng-include="'partials/detail.user.listings'") - + tr(ng-include="'partials/detail.user.listings'" ng-repeat-start="listing in user.listings | orderBy:listingOrder:reverseSort") + tr.make-listing(ng-if='newListing.listingID == listing.listingID && listingPaneOpen && currentUser' ng-include="'partials/detail.user.listings.edit'") + tr.add-listing(ng-if="newListing.listingID == listing.listingID && listingPaneOpen && currentUser", ng-repeat-end): td(colspan="5") + button.cancel(type="button", ng-click="closeListingPane()") + span.symbol × + | Cancel tbody(ng-if="whichListings=='selling'") - tr(ng-repeat="listing in user.listings | filter:{sellingPrice:'!!'} | orderBy:listingOrder:reverseSort", + tr(ng-repeat-start="listing in user.listings | filter:{sellingPrice:'!!'} | orderBy:listingOrder:reverseSort", ng-include="'partials/detail.user.listings'") - + tr.make-listing(ng-if='newListing.listingID == listing.listingID && listingPaneOpen && currentUser' ng-include="'partials/detail.user.listings.edit'") + tr.add-listing(ng-if="newListing.listingID == listing.listingID && listingPaneOpen && currentUser", ng-repeat-end): td(colspan="5") + button.cancel(type="button", ng-click="closeListingPane()") + span.symbol × + | Cancel tbody(ng-if="whichListings=='renting'") - tr(ng-repeat="listing in user.listings | filter:{rentingPrice:'!!'} | orderBy:listingOrder:reverseSort", + tr(ng-repeat-start="listing in user.listings | filter:{rentingPrice:'!!'} | orderBy:listingOrder:reverseSort", ng-include="'partials/detail.user.listings'") - tfoot(ng-if="user.userID == currentUser.userID") - tr.make-listing(ng-class="{'inactive':!listingPaneOpen}") - td.label(colspan="2") Edit my listing for "{{ newListing.bookName | limitTo: 20 }}{{newListing.bookName.length > 20 ? '…' : ''}}": - td.condition - select( - ng-model="newListing.condition", - ng-options="opt.name for opt in conditionOptions track by opt.code" - ) - a.dashed.tooltip(title="{{conditionDescriptions[newListing.condition.code]}}") Definition - td - p - input( - type="checkbox", - id="sellbox", - ng-model="newListing.selling", - ng-disabled="newListing.selling && !newListing.renting" - ) - span.label Sell for - input#sellingPriceInput.price( - type="text", - ng-model="newListing.sellingPrice", - ng-change="validateSellingPrice()" - placeholder="$12", - ng-disabled="!newListing.selling" - ) - p - input( - type="checkbox", - id="rentbox", - ng-model="newListing.renting", - ng-disabled="!newListing.selling && newListing.renting" - ) - span.label Rent for - input#rentingPriceInput.price( - type="text", - ng-model="newListing.rentingPrice", - ng-change="validateRentingPrice()", - placeholder="$12", - ng-disabled="!newListing.renting" - ) - td.confirm - button.confirm(type="submit") - span.symbol ✓ - | Update! + tr.make-listing(ng-if='newListing.listingID == listing.listingID && listingPaneOpen && currentUser' ng-include="'partials/detail.user.listings.edit'") + tr.add-listing(ng-if="newListing.listingID == listing.listingID && listingPaneOpen && currentUser", ng-repeat-end): td(colspan="5") + button.cancel(type="button", ng-click="closeListingPane()") + span.symbol × + | Cancel + tfoot tr.add-listing: td(colspan="5") div(ng-if="!currentUser") a(href, ng-click="openAccount()") Sign in | to add a listing - button.cancel(type="button", ng-if="listingPaneOpen && currentUser", ng-click="closeListingPane()") - span.symbol × - | Cancel - div(ng-if="!listingPaneOpen && currentUser") + div(ng-if="currentUser") a(ui-sref="main") Search for a book | to add a listing - button.edit(type="button", ng-if="!listingPaneOpen && currentUser && currUserListing", ng-click="openListingPane()") - span.symbol ✎ - | Edit Listing div.modal-wrapper( ng-class="{'visible':offer.active}", @@ -277,4 +239,4 @@ div.modal-wrapper( div.progress div(style="width:{{avatar.progress}}%") {{avatar.progress? (avatar.progress < 100 ? avatar.progress + '%' : 'Saving...'): '' }} button.cancel(ng-click="closeAvatarModal()") - span.symbol Cancel \ No newline at end of file + span.symbol Cancel diff --git a/public/scripts/main.js b/public/scripts/main.js index edf0720..1b03d15 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -1338,8 +1338,7 @@ hitsTheBooks.controller('userPageController', function($scope, $state, $timeout, }, function (err) { console.log(err); }); -} - + } }); // Top-level shit diff --git a/public/styles/index.css b/public/styles/index.css index 1ee0e21..03ced3b 100644 --- a/public/styles/index.css +++ b/public/styles/index.css @@ -1029,8 +1029,19 @@ table.listings { width: 50%; display: inline-block; } table.listings tbody td { - height: 80px; padding: 0; } + table.listings tbody tr.add-listing td { + text-align: center; + padding: 0; } + table.listings tbody tr.add-listing td button { + font-style: italic; + font-family: 'Droid Serif', Serif; + width: 100%; + height: 2.5em; } + table.listings tbody tr.add-listing td button span.symbol { + font-size: 16px; + display: inline-block; + vertical-align: middle; } table.listings tbody table.price-table { width: 100%; height: 79px; @@ -1044,6 +1055,22 @@ table.listings { border-bottom: none; } table.listings tbody table.price-table tr:first-child { border-bottom: 1px solid #eee; } + table.listings tbody tr.make-listing.inactive { + display: none; } + table.listings tbody tr.make-listing { + background-color: #fffcf5; } + table.listings tbody tr.make-listing p { + text-align: center; } + table.listings tbody tr.make-listing span.label { + width: 4.5em; + display: inline-block; } + table.listings tbody tr.make-listing input.price { + width: 2em; } + table.listings tbody tr.make-listing td.condition a { + display: inline-block; + margin-top: 15px; } + table.listings tfoot tr.make-listing.inactive { + display: none; } table.listings tfoot tr.make-listing { background-color: #fffcf5; } table.listings tfoot tr.make-listing p { @@ -1056,8 +1083,6 @@ table.listings { table.listings tfoot tr.make-listing td.condition a { display: inline-block; margin-top: 15px; } - table.listings tfoot tr.make-listing.inactive { - display: none; } table.listings tfoot tr.add-listing td { text-align: center; border-bottom: none; diff --git a/public/styles/partials/_details.scss b/public/styles/partials/_details.scss index 205cc68..fc72e02 100644 --- a/public/styles/partials/_details.scss +++ b/public/styles/partials/_details.scss @@ -266,7 +266,7 @@ table.listings{ font-size: 16px; } } - + td.make-an-offer.complete-wrapper{ background-color: #f7f7f7; @@ -321,9 +321,26 @@ table.listings{ } tbody{ td{ - height: $listing-row-height; padding:0; } + tr.add-listing{ + td{ + text-align: center; + padding: 0; + $footer-el-height: 2.5em; + button { + font-style: italic; + font-family: 'Droid Serif', Serif; + width: 100%; + height: $footer-el-height; + span.symbol{ + font-size: 16px; + display: inline-block; + vertical-align: middle; + } + } + } + } table.price-table{ width: 100%; height:79px; @@ -357,9 +374,9 @@ table.listings{ // height: 1.5em; // } } - } - tfoot{ - // background-color: white; + tr.make-listing.inactive{ + display:none; + } tr.make-listing{ background-color: $row-highlight-color; p{ @@ -378,9 +395,29 @@ table.listings{ margin-top: 15px; } } + } + tfoot{ tr.make-listing.inactive{ display:none; } + tr.make-listing{ + background-color: $row-highlight-color; + p{ + text-align: center; + } + span.label{ + width: 4.5em; + display: inline-block; + } + input.price{ + width:2em; + } + + td.condition a { + display: inline-block; + margin-top: 15px; + } + } tr.add-listing{ td{ text-align: center; @@ -492,7 +529,7 @@ div#user-image{ div.user-about{ h2, h3, h4, .edit-names{ - font-family: 'Droid Sans', serif; + font-family: 'Droid Sans', serif; } h2{ margin-top: 0; @@ -701,11 +738,11 @@ form.about small{ font-size: 10pt; float: left; a.delete{ - color: #b51f1f; + color: #b51f1f; } a.logout{ color: black; margin-right: 2em; } margin-bottom: 0; -} \ No newline at end of file +}