From 60c863d00ac1eec26a59b4002b98d39c9c1c4325 Mon Sep 17 00:00:00 2001 From: Erin Trainor Date: Thu, 17 Jan 2019 01:04:19 -0800 Subject: [PATCH 1/5] minor tweaks --- server.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/server.js b/server.js index 12c396e..b3415e2 100644 --- a/server.js +++ b/server.js @@ -51,14 +51,14 @@ function aboutTeam(request, response){ // .then((result)=>{ // likedDogs.push(new DBDog(result.rows[0])); // }).then(() => { -// console.log(`rendering wooflist`, likedDogs); -// response.render('pages/wooflist/listShow.ejs',{likedDogs}); -// }) .catch((err)=>{console.log(err)}); -// }).catch((err)=>{console.log(err)}); -// }) +// console.log(`rendering wooflist`, likedDogs); +// response.render('pages/wooflist/listShow.ejs',{likedDogs}); +// }) .catch((err)=>{console.log(err)}); +// }).catch((err)=>{console.log(err)}); // }) // } + function woofList(request, response){ let likedDogs = []; let id = request.body.userId; From 369b22c29925c5f283a20da897696d0a9d2a7f7f Mon Sep 17 00:00:00 2001 From: Erin Trainor Date: Thu, 17 Jan 2019 04:49:36 -0800 Subject: [PATCH 2/5] tweaks --- public/js/jTinder-Library/main.js | 4 +- public/style/base.css | 48 +++++++++++ public/style/menu.css | 131 ++++++++++++++++++++++++++++++ public/style/swipe.css | 2 + views/layout/nav-index.ejs | 13 +++ views/pages/index.ejs | 2 +- views/pages/index2.ejs | 2 +- 7 files changed, 198 insertions(+), 4 deletions(-) create mode 100644 views/layout/nav-index.ejs diff --git a/public/js/jTinder-Library/main.js b/public/js/jTinder-Library/main.js index eef5986..64a41ce 100644 --- a/public/js/jTinder-Library/main.js +++ b/public/js/jTinder-Library/main.js @@ -13,7 +13,7 @@ $(function () { // set the status text console.log(item[0].classList[1]); onSwipe(item); - $('#status').html('Dislike image ' + (item.index() + 1)); + // $('#status').html('Dislike image ' + (item.index() + 1)); let userID = JSON.parse(localStorage.getItem('userId')); $.post('/dogviewed', { userId: `${userID}`, dogId: `${item[0].classList[1]}` }); }, @@ -22,7 +22,7 @@ $(function () { // set the status text onSwipe(item); console.log(item[0].classList[1]); - $('#status').html('Like image ' + (item.index() + 1)); + // $('#status').html('Like image ' + (item.index() + 1)); let userID = JSON.parse(localStorage.getItem('userId')); $.post('/likedog', { userId: `${userID}`, dogId: `${item[0].classList[1]}` }); }, diff --git a/public/style/base.css b/public/style/base.css index 22cf644..6ab156d 100644 --- a/public/style/base.css +++ b/public/style/base.css @@ -103,6 +103,54 @@ h2 { display: none; } +.dogShow-detailForm-div { + background: #cd661d; + color: whitesmoke; + height: 508px; + margin-top: 472px; + margin-bottom: 40px; + position: absolute; + padding-right: 0px; + padding-left: 31.359px; + width: 97%; +} + +.dogShow-detailForm { + margin-left: -7px; + margin-top: 24px; +} + +.form-title { + color: whitesmoke; + margin-bottom: 16px; + font-size: 20px; + width: 91%; +} + +.dogShow-detailForm input { + width: 91%; + margin-top: 5px; + margin-bottom: 5px; +} + +/* label { + width: 100%px; + margin-top: 5px; + margin-bottom: 5px; +} */ + +.form-input { + width: 317px; + border: none; +} + + + +.form-description, textarea { + width: 600px; + overflow:hidden scroll; +} + /* IPAD */ @media (min-width:767px){ #index { diff --git a/public/style/menu.css b/public/style/menu.css index 2bd8ddc..e94d9d1 100644 --- a/public/style/menu.css +++ b/public/style/menu.css @@ -98,6 +98,70 @@ a { transform: none; } +#menuToggle-index { + display: block; + position: relative; + top: 25px; + margin-left: 25px; + z-index: 99; + -webkit-user-select: none; + user-select: none; + margin-top: -5px; +} +#menuToggle-index input { + display: block; + width: 40px; + height: 32px; + position: absolute; + top: -7px; + left: -5px; + cursor: pointer; + opacity: 0; /* hide this */ + z-index: 100; /* and place it over the hamburger */ + -webkit-touch-callout: none; +} +/*Just a quick hamburger*/ +#menuToggle-index span { + display: block; + width: 33px; + height: 4px; + margin-bottom: 5px; + position: relative; + background: rgb(51, 110, 165); + border-radius: 3px; + z-index: 99; + transform-origin: 4px 0px; + transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + opacity 0.55s ease; +} +#menuToggle-index span:first-child { + transform-origin: 0% 0%; +} +#menuToggle-index span:nth-last-child(2) { + transform-origin: 0% 100%; +} +/* Transform all the slices of hamburger into a crossmark.*/ +#menuToggle-index input:checked ~ span { + opacity: 1; + transform: rotate(45deg) translate(-2px, -1px); + background: whitesmoke; +} +/*But let's hide the middle one.*/ +#menuToggle-index input:checked ~ span:nth-last-child(3) { + opacity: 0; + transform: rotate(0deg) scale(0.2, 0.2); +} +/* Ohyeah and the last one should go the other direction*/ +#menuToggle-index input:checked ~ span:nth-last-child(2) { + transform: rotate(-45deg) translate(0, -1px); +} + +/* And let's slide it in from the left*/ +#menuToggle-index input:checked ~ ul { + transform: none; +} + /* ======================== End of Hamburger ========================= */ @media (min-width:767px){ #search-button{ @@ -200,4 +264,71 @@ a { #menuToggle input:checked ~ ul { transform: none; } + + #menuToggle-index { + display: block; + position: relative; + top: 25px; + margin-left: 25px; + z-index: 99; + -webkit-user-select: none; + user-select: none; + margin-top: -5px; + } + + #menuToggle-index input { + display: block; + width: 40px; + height: 32px; + position: absolute; + top: -7px; + left: -5px; + cursor: pointer; + opacity: 0; /* hide this */ + z-index: 100; /* and place it over the hamburger */ + -webkit-touch-callout: none; + } + /*Just a quick hamburger*/ + #menuToggle-index span { + display: block; + width: 56px; + height: 6px; + margin-bottom: 9px; + position: relative; + background: rgb(51, 110, 165); + border-radius: 3px; + z-index: 99; + transform-origin: 4px 0px; + transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + opacity 0.55s ease; + + } + #menuToggle-index span:first-child { + transform-origin: 0% 0%; + } + #menuToggle-index span:nth-last-child(2) { + transform-origin: 0% 100%; + } + /* Transform all the slices of hamburger into a crossmark.*/ + #menuToggle-index input:checked ~ span { + opacity: 1; + transform: rotate(45deg) translate(-2px, -1px); + background: whitesmoke; + } + /*But let's hide the middle one.*/ + #menuToggle-index input:checked ~ span:nth-last-child(3) { + opacity: 0; + transform: rotate(0deg) scale(0.2, 0.2); + } + /* Ohyeah and the last one should go the other direction*/ + #menuToggle-index input:checked ~ span:nth-last-child(2) { + transform: rotate(-45deg) translate(0, -1px); + } + /*Make this absolute positioned at the top left of the screen*/ + + /* And let's slide it in from the left*/ + #menuToggle-index input:checked ~ ul { + transform: none; + } } \ No newline at end of file diff --git a/public/style/swipe.css b/public/style/swipe.css index f8b6d31..da5df54 100644 --- a/public/style/swipe.css +++ b/public/style/swipe.css @@ -440,5 +440,7 @@ body { margin-top: 30px; font-weight: bold; } + + } \ No newline at end of file diff --git a/views/layout/nav-index.ejs b/views/layout/nav-index.ejs new file mode 100644 index 0000000..7177c48 --- /dev/null +++ b/views/layout/nav-index.ejs @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/views/pages/index.ejs b/views/pages/index.ejs index 66a5790..c105a59 100644 --- a/views/pages/index.ejs +++ b/views/pages/index.ejs @@ -7,7 +7,7 @@
- <%-include ../layout/nav%> + <%-include ../layout/nav-index%>
diff --git a/views/pages/index2.ejs b/views/pages/index2.ejs index 86b6b7c..0297e7a 100644 --- a/views/pages/index2.ejs +++ b/views/pages/index2.ejs @@ -7,7 +7,7 @@
- <%-include ../layout/nav%> + <%-include ../layout/nav-index%>
From 84757744c68e3083bbafaeff8508e70553db7536 Mon Sep 17 00:00:00 2001 From: Erin Trainor Date: Thu, 17 Jan 2019 05:02:22 -0800 Subject: [PATCH 3/5] tweaks --- public/style/base.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/style/base.css b/public/style/base.css index 6ab156d..9efff2b 100644 --- a/public/style/base.css +++ b/public/style/base.css @@ -128,6 +128,7 @@ h2 { } .dogShow-detailForm input { + border-radius: 0; width: 91%; margin-top: 5px; margin-bottom: 5px; @@ -147,8 +148,11 @@ h2 { .form-description, textarea { - width: 600px; - overflow:hidden scroll; + border-radius: 0; + width: 299px; + overflow:hidden; + overflow-y: scroll; /* has to be scroll, not auto */ + -webkit-overflow-scrolling: touch } /* IPAD */ From a5913c93d70a184582229a796a197800e159cc4b Mon Sep 17 00:00:00 2001 From: Erin Trainor Date: Thu, 17 Jan 2019 17:39:08 -0800 Subject: [PATCH 4/5] tweaks --- public/style/base.css | 90 +++++++++++++++++++++++++++++++++++++++++- public/style/swipe.css | 4 +- server.js | 6 ++- 3 files changed, 96 insertions(+), 4 deletions(-) diff --git a/public/style/base.css b/public/style/base.css index 9efff2b..c591ab6 100644 --- a/public/style/base.css +++ b/public/style/base.css @@ -155,6 +155,94 @@ h2 { -webkit-overflow-scrolling: touch } +.options { + height: 28px; + margin-left: 10px; + margin: 0; + flex-direction: row; + margin-top: 10px; +} + +.fa-layers { + margin: 10px 15px 15px 15px; + width: 28px; +} + +.fa-baby { + padding-left: 5px; + padding-right: 5px; +} + +#key-container { + width: 100%; + background:#cd661d; + padding-right: 10px; + margin-top: 50px; + position: fixed; +} + +#option-key { + color: whitesmoke; + display: flex; + flex-direction: row; + padding-top: 10px; + padding-bottom: 10px; + justify-content: space-around; + list-style: none; + background:#cd661d; + width: 100%; +} + +.key-item { + font-size: 18px; + text-decoration: none; + padding:10px; + align-items: baseline; + justify-content:center; +} + +#richard { + margin-bottom: 10px; +} + +.available { + z-index: 90; + position: absolute; + height: 75px; + margin-left: 319px; + margin-top: 5px; + float: right; +} + +.wooflist-image-div { + width: 40%; + height: 200px; + overflow: hidden; + flex-direction: column; + border: 4px solid #cd661d; + margin-left: 10px; + position: relative; +} + +.woof-list-img { + height: 100%; + margin-bottom: 10px; + position: relative; +} + +.woof-list-dog { + box-sizing: border-box; + border: 4px solid rgb(51, 110, 165); + width: 90%; + margin: auto; + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; + height: 230px; + +} + /* IPAD */ @media (min-width:767px){ #index { @@ -328,7 +416,7 @@ h2 { margin-left: 10px; margin: 0; flex-direction: row; - margin-top: 10px; + margin-top: 21px; } .fa-layers { diff --git a/public/style/swipe.css b/public/style/swipe.css index da5df54..96524ca 100644 --- a/public/style/swipe.css +++ b/public/style/swipe.css @@ -14,6 +14,7 @@ body { height: 300px; padding: 9%; margin-top: 9%; + margin-right: 5px; } #tinderslide { @@ -233,6 +234,7 @@ body { height: 600px; padding: 7%; margin-top: 2%; + margin-right: 0; } #tinderslide { @@ -441,6 +443,6 @@ body { font-weight: bold; } - + } \ No newline at end of file diff --git a/server.js b/server.js index b3415e2..a2afc1a 100644 --- a/server.js +++ b/server.js @@ -66,13 +66,15 @@ function woofList(request, response){ client.query(SQL,[id]) .then(data=>{ let likes = JSON.parse(data.rows[0].likes) - let string = '(' + likes.join(', ') + ')' + // let string = '(' + likes.join(', ') + ')' + let string = '\'' + likes.join('\' AND \'') + '\'' // for(let i in likes) { // string += '$' + i + ','; // } // let nstring = string.substring(0, string.length - 1); console.log(string); - let SQL2 = `SELECT * FROM dogs WHERE dog_id IN (${string})`; + // let SQL2 = `SELECT * FROM dogs WHERE dog_id IN ${string}`; + let SQL2 = `SELECT * FROM dogs WHERE dog_id = ${string}`; client.query(SQL2, likes) .then(result => { result.rows.forEach(row => { From b117fab74d45980a17ba7bbed017ad13ec0bea20 Mon Sep 17 00:00:00 2001 From: Erin Trainor Date: Thu, 17 Jan 2019 19:42:27 -0800 Subject: [PATCH 5/5] css tweaks --- public/style/base.css | 186 +++++++++++++++++++++++++++++++++++++++++- server.js | 5 +- views/pages/about.ejs | 44 +++++----- 3 files changed, 207 insertions(+), 28 deletions(-) diff --git a/public/style/base.css b/public/style/base.css index c591ab6..b3893b2 100644 --- a/public/style/base.css +++ b/public/style/base.css @@ -91,15 +91,15 @@ h2 { color:red; opacity: 0.7; -webkit-appearance: none; - font-size: 40px; + font-size: 25px; } .fa-cut, .fa-baby, .fa-cat, .fa-syringe, .fa-toilet { - font-size: 40px; + font-size: 25px; color: rgb(25,55,82); } -#something { +.something { display: none; } @@ -165,7 +165,7 @@ h2 { .fa-layers { margin: 10px 15px 15px 15px; - width: 28px; + width: 6px; } .fa-baby { @@ -230,6 +230,22 @@ h2 { position: relative; } +.about-us-image-div { + width: 60%; + height: 130px; + overflow: hidden; + flex-direction: column; + border: 4px solid #cd661d; + margin-left: 4px; + position: relative; +} + +.about-us-img { + height: 100%; + margin-bottom: 10px; + position: relative; +} + .woof-list-dog { box-sizing: border-box; border: 4px solid rgb(51, 110, 165); @@ -243,6 +259,100 @@ h2 { } +.about-us-dog { + box-sizing: border-box; + border: 4px solid rgb(51, 110, 165); + width: 90%; + margin: auto; + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; + height: 154px; +} + +#listShow { + background: url(../images/background-ipad.png) no-repeat center center fixed; + display: block; + margin-top: -155px; + background-size: 100% 100%; + overflow: scroll; + -webkit-overflow-scrolling: touch; +} + +#wooflist-banner { + width: 100%; + margin-top: 5%; + background: rgb(51, 110, 165); + padding: 5px; +} + +#wooflist-banner h2 { + color: whitesmoke; +} + +.about-us-banner h2 { + color: whitesmoke; + padding: 3px; + font-size: 20px; +} + +.about-us-banner { + width: 100%; + margin-top: 9%; + background: rgb(51, 110, 165); + padding: 5px; +} + +.list-section { + align-content: flex-end; + justify-content: space-between; + width: 60%; + display: flex; + flex-direction: column; + margin: 0; + margin-top: -19px; + margin-left: 10px; + margin-right: 10px; +} + +.about-us-list-section { + align-content: flex-end; + justify-content: space-between; + width: 60%; + display: flex; + flex-direction: column; + margin: 0; + margin-top: 29px; + margin-left: 10px; + margin-right: 10px; +} + +.wooflist-p { + align-content: flex-start; + justify-content: space-between; + margin-left: 10px; + width: 100%; + margin: 0; + margin-top: 10px; + color: rgb(25,55,82); +} + +.about-us-p { + align-content: flex-start; + justify-content: space-between; + margin-left: 10px; + width: 100%; + margin: 0; + margin-top: 27px; + color: rgb(25,55,82); +} + +.about-us-p p { + margin-bottom: 5px; + font-size: 15px; +} + /* IPAD */ @media (min-width:767px){ #index { @@ -326,6 +436,7 @@ h2 { #wooflist-banner h2 { color: whitesmoke; } + .wooflist-image-div { width: 40%; height: 200px; @@ -354,6 +465,35 @@ h2 { height: 230px; } + + .about-us-image-div { + width: 40%; + height: 200px; + overflow: hidden; + flex-direction: column; + border: 4px solid #cd661d; + margin-left: 10px; + position: relative; + } + + .about-us-img { + height: 100%; + margin-bottom: 10px; + position: relative; + } + + .about-us-dog { + box-sizing: border-box; + border: 4px solid rgb(51, 110, 165); + width: 90%; + margin: auto; + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; + height: 230px; + + } .list-section { align-content: flex-end; @@ -367,6 +507,18 @@ h2 { margin-right: 10px; } + .about-us-list-section { + align-content: flex-end; + justify-content: space-between; + width: 60%; + display: flex; + flex-direction: column; + margin: 0; + margin-top: -19px; + margin-left: 10px; + margin-right: 10px; + } + .wooflist-p { align-content: flex-start; justify-content: space-between; @@ -376,6 +528,16 @@ h2 { margin-top: 10px; color: rgb(25,55,82); } + + .about-us-p { + align-content: flex-start; + justify-content: space-between; + margin-left: 10px; + width: 100%; + margin: 0; + margin-top: 10px; + color: rgb(25,55,82); + } .forms-section { display: flex; @@ -635,5 +797,21 @@ h2 { .available { display: none; } + + .something { + display: none; + } + + .about-us-banner h2 { + color: whitesmoke; + padding: 3px; + font-size: 30px; + } + .about-us-banner { + width: 100%; + margin-top: 6%; + background: rgb(51, 110, 165); + padding: 5px; + } } \ No newline at end of file diff --git a/server.js b/server.js index a2afc1a..bb00740 100644 --- a/server.js +++ b/server.js @@ -67,14 +67,15 @@ function woofList(request, response){ .then(data=>{ let likes = JSON.parse(data.rows[0].likes) // let string = '(' + likes.join(', ') + ')' - let string = '\'' + likes.join('\' AND \'') + '\'' + let string = '\'' + likes.join('\' ' + 'OR dog_id=' + '\'') + '\'' // for(let i in likes) { // string += '$' + i + ','; // } // let nstring = string.substring(0, string.length - 1); console.log(string); // let SQL2 = `SELECT * FROM dogs WHERE dog_id IN ${string}`; - let SQL2 = `SELECT * FROM dogs WHERE dog_id = ${string}`; + let SQL2 = `SELECT * FROM dogs WHERE dog_id= ${[likes]}`; + console.log(SQL2); client.query(SQL2, likes) .then(result => { result.rows.forEach(row => { diff --git a/views/pages/about.ejs b/views/pages/about.ejs index ecf3ab8..7383f1d 100644 --- a/views/pages/about.ejs +++ b/views/pages/about.ejs @@ -6,28 +6,28 @@ About Our Team - -
-