Skip to content

Commit

Permalink
more css added
Browse files Browse the repository at this point in the history
  • Loading branch information
@kirtantp
kirtantp committed Dec 15, 2021
1 parent ff3ab92 commit bacca89
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 123 deletions.
77 changes: 39 additions & 38 deletions front-end/src/pages/SearchBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,45 +68,46 @@ const SearchBar = () => {

return (
<form id="category-search" method="GET" onSubmit={handleSubmit}>
<input className="search-bar"
type="search"
name="category"
id="category"
placeholder="Search For a Movie"
value={search}
onChange={handleChange}
/>
<button id="toast" onClick={handleSubmit} >Toast</button>
{/* <Link to={`/movies/${search}`}>Toast</Link> */}
<select className="search-options">
{arrayOfAllFilms.filter((val) => {
if (search === '') {
return val
} else if (val.includes(search)) {
return val
<div className="search-div">
<input className="search-bar"
type="search"
name="category"
id="category"
placeholder="Search For a Movie"
value={search}
onChange={handleChange}
/>
<select className="search-bar">
{arrayOfAllFilms.filter((val) => {
if (search === '') {
return val
} else if (val.includes(search)) {
return val
}
}).map((val, key) => {
return (
<option
key={key}
className="option"
value={val}
onClick={(event) => {
event.preventDefault()
setSearch(event.target.value)
// for (let i = 0; i < info.length; i++) {
// search === info[i].title ? setSearch(info[i]._id) : 'do nothing'
// }
}}

onSubmit={handleSubmit}
>
{val}
</option>
)
})
}
}).map((val, key) => {
return (
<option
key={key}
className="option"
value={val}
onClick={(event) => {
event.preventDefault()
setSearch(event.target.value)
// for (let i = 0; i < info.length; i++) {
// search === info[i].title ? setSearch(info[i]._id) : 'do nothing'
// }
}}

onSubmit={handleSubmit}
>
{val}
</option>
)
})
}
</select>
</select>
</div>
<button id="toast" onClick={handleSubmit} >Toast</button>
</form>
)
}
Expand Down
111 changes: 49 additions & 62 deletions front-end/src/styles/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,91 +24,78 @@
width: 30%;
height: 100%;
text-align: center;
flex-wrap: wrap;
#category-search {
// margin: auto;
margin: auto;
width: 100%;
height: 80%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: center;
// align-content: center;
.search-bar {
.search-div {
width: 80%;
height: 50%;
border: 2px solid $mid-dark-brown;
border-radius: 5px 0 0 5px;
background-color: $dark-butter-yellow;
font-size: 0.7em;
border-radius: 5px 0 0 5px;
background-color: $dark-butter-yellow;
text-align: center;
.search-bar {
height: 40%;
width: 100%;
border: 2px solid $mid-dark-brown;
border-radius: 5px;
background-color: $dark-butter-yellow;
font-size: 0.7em;
text-align: center;
}
}
#toast {
width: 20%;
height: 100%;
font-size: 0.8em;
align-self: center;
color: $mid-dark-brown;
border: 2px solid $mid-dark-brown;
background-color: $light-toast;
border-radius: 0 5px 5px 0;
border-radius: 5px;
text-align: center;
width: 20%;
a {
color: $mid-dark-brown;
text-decoration: none;
}
#toast:hover {
background-color: rgb(225, 150, 99);
}
font-size: 1.2rem;
margin: 1%;
}
.search-options {
width: 80%;
height: 50%;
#toast:hover {
background-color: rgb(225, 150, 99);
border: 2px solid $mid-dark-brown;
border-radius: 5px 0 0 5px;
background-color: $dark-butter-yellow;
font-size: 0.7em;
border-radius: 5px 0 0 5px;
background-color: $dark-butter-yellow;
color: $mid-dark-brown;
}
}
}
.nav-div {
}
.nav-div {
display: flex;
width: 50%;
height: 100%;
flex-wrap: wrap;
margin: auto;
font-size: 30px;
nav {
// margin: right;
display: flex;
width: 50%;
width: 100%;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
height: 100%;
flex-wrap: wrap;
margin: auto;
font-size: 30px;
nav {
// margin: right;
display: flex;
ul {
width: 100%;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
height: 100%;
ul {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
display: flex;
justify-content: center;
list-style-type: none;
li {
list-style-type: none;
li {
list-style-type: none;
height: 100%;
text-align: center;
width: 100%;
.nav-link {
font-size: 0.9rem;
text-decoration: none;
color: $mid-brown;
// input {
// background-color: $butter-yellow;
// }
}
height: 100%;
text-align: center;
width: 100%;
.nav-link {
font-size: 0.9rem;
text-decoration: none;
color: $mid-brown;
// input {
// background-color: $butter-yellow;
// }
}
}
}
Expand Down
23 changes: 0 additions & 23 deletions front-end/src/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,26 +69,3 @@ body {
border: 2px solid $mid-dark-brown;
color: $mid-dark-brown;
}

@media screen and (max-width: 300px) and (max-height: 540px) {
body {
#root {
header {
//
}
main {
//
}
footer {
display: none;
}
}
}

.button {
//
.link {
//
}
}
}

0 comments on commit bacca89

Please sign in to comment.