Merge pull request #53 from Shruti025/calendar

Calendar Responsiveness
aman34503 · Feb 23, 2022 · 57fb409 · 57fb409
2 parents 7207b61 + 8a3b715
commit 57fb409
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 38 deletions.
diff --git a/src/Banner.css b/src/Banner.css
@@ -42,6 +42,12 @@
     margin-right: -10px;
   }
 
+  .banner__searchButton1{
+    top: 0%;
+    background-color: #ff7779;
+    color: white;
+  }
+
   .banner__searchButton:hover {
     background-color: white;
     color: #ff7779;

diff --git a/src/Banner.js b/src/Banner.js
@@ -22,11 +22,12 @@ function Banner() {
                 <h5>
                     Plan a different kind of getaway to uncover the hidden gems near you.
                 </h5>
+
                 <Button onClick={() => history.push('/search')} variant='outlined'>Explore Nearby</Button>
                 {showSearch && <Search />}
-                <Button onClick={() => setShowSearch(!showSearch)} className='banner__searchButton' variant='outlined'>
-                    {showSearch ? "Hide" : "Search Dates"}
-                </Button>
+                {showSearch ? <Button onClick={() => setShowSearch(!showSearch)} className='banner__searchButton1' variant='outlined'>Hide</Button>
+                :<Button onClick={() => setShowSearch(!showSearch)} className='banner__searchButton' variant='outlined'>Search Dates</Button>
+                }
             </div>
         </div>
     )

diff --git a/src/Search.css b/src/Search.css
@@ -1,47 +1,102 @@
 .search {
     position: absolute;
-    top: 35px;
-    left: 25%;
-    width: 100vw;
+    top: 104px;
+    left: 90%;
+    transform: translate(-90%);
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+}
+.Dates{
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.people-count{
+    margin-top: 10px;
+    border: 1px solid black;
+    border-radius: 5px;
+    overflow: hidden;
+    width: 50%;
+    align-self: center;
 }
 
-.search > h2 {
+/*.people-count > h2 {
+    color: black;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 559px;
     padding: 10px;
     background-color: white;
     position: absolute;
     left: 0;
-    top: 380px;
+}*/
+
+.number > span {
+    color: black;
+    font-size: 1.1rem;
 }
 
-.search > input {
-    width: 539px;
-    padding: 20px;
-    position: absolute;
-    left: 0;
-    height: 30px;
-    top: 420px;
+.peopleIcon{
+    color: black;
+}
+
+.number{
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+}
+
+.submit{
+    background: black;
+}
+
+.submit > input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
     border: none;
-  }
-
-.search > input:focus {
-    outline-width: 0;
 }
 
-.search > button {
-    position: absolute;
-    left: 0;
-    top: 480px;
+
+.submit > button {
     text-transform: inherit !important;
     background-color: #ff7779;
     color: white;
-    width: 579px;
-  }
+    width: 40%;
+    margin-right: 10px;
+}
 
-.search > button:hover {
+.submit > button:hover {
     background-color: white;
    color: #ff7779;
+}
+
+@media screen and (max-width: 700px){
+    .Range{
+        visibility: hidden;
+    }
+}
+
+@media screen and (max-width: 650px){
+    .search{
+        left: 100%;
+        transform: translate(-100%);
+    }
+    .people-count{
+        align-self: flex-end;
+    }
+}
+
+@media screen and (max-width: 500px){
+    .search{
+        transform: translate(-80%);
+    }
+}
+
+@media screen and (max-width: 400px){
+    .search{
+        transform: translate(-65%);
+    }
 }
diff --git a/src/Search.js b/src/Search.js
@@ -2,7 +2,8 @@ import React, {useState} from 'react';
 import './Search.css';
 import "react-date-range/dist/styles.css"; // main style file
 import "react-date-range/dist/theme/default.css"; // theme css file
-import { DateRangePicker } from "react-date-range";
+import { DateRange } from "react-date-range";
+import { DefinedRange } from 'react-date-range';
 import { Button } from "@material-ui/core";
 import PeopleIcon from "@material-ui/icons/People";
 import { useHistory } from "react-router-dom";
@@ -26,12 +27,23 @@ function Search() {
 
     return (
         <div className='search'>
-            <DateRangePicker ranges={[selectionRange]} onChange={handleSelect} />
-            <h2>
-                Number of guests <PeopleIcon />
-            </h2>
-            <input min={0} defaultValue={2} type="number" />
-            <Button onClick={() => history.push('/search')}>Search Airbnb</Button>
+            <div className='Dates'>
+            <DateRange ranges={[selectionRange]} onChange={handleSelect} className = 'Calendar' />
+            <DefinedRange ranges={[selectionRange]} onChange={handleSelect} className = 'Range'/>
+            </div>
+
+            <div className='people-count'>
+                <div className='number'>
+                    <span>Number of guests</span>
+                    <PeopleIcon className='peopleIcon'/>
+                </div>
+
+                <div className='submit'>
+                    <input min={0} defaultValue={2} type="number" />
+                    <Button onClick={() => history.push('/search')}>Search Airbnb</Button>
+                </div>
+            </div>
+
         </div>
     )
 }

diff --git a/src/SearchResult.css b/src/SearchResult.css
@@ -105,14 +105,11 @@
         font-size: 14px;
     }
 }
-
 @media screen and (max-width: 700px){
     .searchResult {
         grid-template-columns: 40% 60%;
     }
-
 }
-
 @media screen and (max-width: 450px){
     .searchResult {
         height: 28vh;
@@ -128,7 +125,6 @@
         height: 28vh
     }
 }
-
 @media screen and (max-height: 700px){
     .searchResult {
         height: 30vh;