Contact modal for mobile fixes

This commit is contained in:
Edin Dazdarevic
2017-04-14 17:01:27 +02:00
parent 7c40035f6f
commit cfa14ed590
5 changed files with 108 additions and 37 deletions

View File

@@ -94,18 +94,27 @@
body = req.body;
contactRequests = db.collection('contact_requests');
if (body.email) {
_context.next = 8;
break;
}
if (!body.email) {
res.status(422);
res.end('Email is required');
return _context.abrupt('return');
case 8:
if (body.name) {
_context.next = 12;
break;
}
if (!body.name) {
res.status(422);
res.end('Name is required');
}
return _context.abrupt('return');
_context.next = 8;
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) {

4
web/dist/index.html vendored
View File

@@ -3,7 +3,9 @@
<head>
<title>KIVI - Najbolji način da pronađeš svoj dom</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">

87
web/dist/main.css vendored
View File

@@ -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;
}
@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 {
font-size: 0.9em;
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 */

View File

@@ -123,14 +123,14 @@ export default class ContactModal extends React.Component {
/>
</div>
<div className="contact-form-alert noselect">
<label>
<input
type="checkbox"
onChange={this.onAlertToggle.bind(this)}
checked={doAlert}
/>
<span onClick={this.onAlertToggle.bind(this)}>
Obavjesti me ukoliko se slična nekretnine pojavi
</span>
Javi mi kada se objavi sličan oglas
</label>
</div>
<div className="contact-form-footer">
<button disabled={sending}>Pošalji poruku</button>

View File

@@ -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,