From cfa14ed5905a069bfd91987df424111309335b4f Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Fri, 14 Apr 2017 17:01:27 +0200 Subject: [PATCH] Contact modal for mobile fixes --- backend/build/server.js | 37 ++++++++----- web/dist/index.html | 4 +- web/dist/main.css | 89 ++++++++++++++++++++++++------ web/src/components/ContactModal.js | 6 +- web/src/lib/api.js | 9 ++- 5 files changed, 108 insertions(+), 37 deletions(-) diff --git a/backend/build/server.js b/backend/build/server.js index 144ca6e..e0a6746 100644 --- a/backend/build/server.js +++ b/backend/build/server.js @@ -94,18 +94,27 @@ body = req.body; contactRequests = db.collection('contact_requests'); - - if (!body.email) { - res.status(422); - res.end('Email is required'); + if (body.email) { + _context.next = 8; + break; } - if (!body.name) { - res.status(422); - res.end('Name is required'); + res.status(422); + res.end('Email is required'); + return _context.abrupt('return'); + + case 8: + if (body.name) { + _context.next = 12; + break; } - _context.next = 8; + res.status(422); + res.end('Name is required'); + return _context.abrupt('return'); + + case 12: + _context.next = 14; return contactRequests.insertOne({ name: body.name, email: body.email, @@ -115,28 +124,28 @@ alert: body.alert }); - case 8: + case 14: result = _context.sent; res.status(200); res.end(); - _context.next = 17; + _context.next = 23; break; - case 13: - _context.prev = 13; + case 19: + _context.prev = 19; _context.t0 = _context['catch'](0); console.log('error:', _context.t0); next(_context.t0); - case 17: + case 23: case 'end': return _context.stop(); } } - }, _callee, undefined, [[0, 13]]); + }, _callee, undefined, [[0, 19]]); })); return function (_x, _x2, _x3) { diff --git a/web/dist/index.html b/web/dist/index.html index 5666bf3..9daa41d 100644 --- a/web/dist/index.html +++ b/web/dist/index.html @@ -3,7 +3,9 @@ KIVI - Najbolji način da pronađeš svoj dom - + + + diff --git a/web/dist/main.css b/web/dist/main.css index 150b290..3a2660a 100644 --- a/web/dist/main.css +++ b/web/dist/main.css @@ -73,7 +73,11 @@ html { } .right-content { - overflow-y: auto; + /*overflow-y: auto;*/ + + overflow-y: scroll; /* has to be scroll, not auto */ + + -webkit-overflow-scrolling: touch; height: 100%; padding: 10px 10px 0; } @@ -527,7 +531,7 @@ html { } .where-to:focus { - /*width: 85%;*/ + width: 85%; } .view-types { @@ -583,7 +587,11 @@ html { .map-list-view { width: 100%; border: 1px solid red; - overflow-y: auto; + /*overflow-y: auto;*/ + overflow-y: scroll; /* has to be scroll, not auto */ + + -webkit-overflow-scrolling: touch; + height: 100%; padding-top: 60px; } @@ -591,6 +599,7 @@ html { .right-content .listings { display: none; } + } /* @@ -671,12 +680,13 @@ html { } .ld-image-container { - height: 375px; + max-height: 335px; width: 500px; text-align: center; position: relative; user-select: none; cursor: pointer; + -webkit-tap-highlight-color: rgba(0,0,0,0); } .ld-image-container .prev-button { @@ -685,6 +695,7 @@ html { left: 0px; height: 100%; width: 50%; + user-select: none; } .ld-image-container .next-button { @@ -693,6 +704,7 @@ html { right: 0px; height: 100%; width: 50%; + user-select: none; } .ld-image-container .prev-button div, @@ -709,7 +721,7 @@ html { .ld-image-container img { /*width: 100%;*/ /*height: 100%;*/ - max-height: 375px; + max-height: 335px; max-width: 500px; } @@ -865,6 +877,18 @@ h5 { + +@media (min-width : 768px) { + .modal > div { + width: 460px; + position: relative; + margin: 5% auto; + padding: 5px 20px 13px 20px; + border-radius: 10px; + background: #fff; + } +} + .modal { position: fixed; font-family: Arial, Helvetica, sans-serif; @@ -881,15 +905,6 @@ h5 { pointer-events: auto; } -.modal > div { - width: 460px; - position: relative; - margin: 5% auto; - padding: 5px 20px 13px 20px; - border-radius: 10px; - background: #fff; -} - .modal h3 { color: #575a60; font-size: 18px; @@ -955,11 +970,53 @@ h5 { cursor: pointer; } -.contact-form-alert { - font-size: 0.9em; +@media (max-width: 768px) { + .modal h3 { + text-align: center; + } + + .modal > div { + position: relative; + margin: 0; + padding: 5px 20px 13px 20px; + border-radius: 0; + background: #fff; + height: 100%; + width: 100%; + } + + .contact-form input, + .contact-form textarea { + width: 100%; + } + + .contact-form-email-phone input:first-child { + width: 100%; + margin: 0px; + } + + .contact-form-email-phone input:last-child { + margin: 0; + width: 100%; + } + + .contact-form-email-phone input:last-child { + width: 100%; + margin-top: 15px; + margin-left: 0px; + } + + .contact-form-alert input { + width: 20px + } + + .contact-form-alert { + text-align: center; + } } .noselect { + -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ diff --git a/web/src/components/ContactModal.js b/web/src/components/ContactModal.js index 54e9fbc..6bffbdd 100644 --- a/web/src/components/ContactModal.js +++ b/web/src/components/ContactModal.js @@ -123,14 +123,14 @@ export default class ContactModal extends React.Component { />
+
diff --git a/web/src/lib/api.js b/web/src/lib/api.js index fb734d8..0f1a68f 100644 --- a/web/src/lib/api.js +++ b/web/src/lib/api.js @@ -1,8 +1,11 @@ import fetch from 'isomorphic-fetch' +//const BASE_URL = 'localhost'; +const BASE_URL = '192.168.0.13'; + export const saveContactRequest = (listingId, params) => { - let url = `http://localhost:3001/api/contact/${listingId}` + let url = `http://${BASE_URL}:3001/api/contact/${listingId}` return fetch(url, { method: 'POST', @@ -15,7 +18,7 @@ export const saveContactRequest = (listingId, params) => { } export const loadListing = id => { - let url = `http://localhost:3001/api/search/listings/${id}` + let url = `http://${BASE_URL}:3001/api/search/listings/${id}` return fetch( url, @@ -47,7 +50,7 @@ export const loadProperties = ( // TODO: handle errors //return fetch(process.env.API_URL + '/api/search', { - let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}&pins=${pins}&sort=${sort}` + let url = `http://${BASE_URL}:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}&pins=${pins}&sort=${sort}` return fetch( url,