Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-24 19:11:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(selector): fix search type selection on mobile

Browse Source
This commit is contained in:
Jip Fr 2021-07-15 20:15:41 +02:00
parent d2982ba391
commit b8ab630f0a
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/TypeSelector.css
View File

@ -5,6 +5,8 @@
position: relative; position: relative;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
max-width: 100%; max-width: 100%;
}
.typeSelector:not(.nowrap) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -52,8 +54,7 @@
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.typeSelector { .typeSelector:not(.nowrap) {
width: 80%;
display: block; display: block;
} }
} }

4
src/components/TypeSelector.js
View File

@ -5,14 +5,14 @@ import './TypeSelector.css'
// setType: (txt: string) => void // setType: (txt: string) => void
// choices: { label: string, value: string }[] // choices: { label: string, value: string }[]
// selected: string // selected: string
export function TypeSelector({ setType, choices, selected }) { export function TypeSelector({ setType, choices, selected, noWrap = false }) {
const selectedIndex = choices.findIndex(v=>v.value===selected); const selectedIndex = choices.findIndex(v=>v.value===selected);
const transformStyles = { const transformStyles = {
opacity: selectedIndex!==-1?1:0, opacity: selectedIndex!==-1?1:0,
transform: `translateX(${selectedIndex!==-1?selectedIndex*7:0}rem)` transform: `translateX(${selectedIndex!==-1?selectedIndex*7:0}rem)`
} }
return ( return (
<div className="typeSelector"> <div className={`typeSelector ${noWrap ? 'nowrap' : ''}`}>
{choices.map(v=>( {choices.map(v=>(
<div key={v.value} className={`choice ${selected===v.value?'selected':''}`} onClick={() => setType(v.value)}> <div key={v.value} className={`choice ${selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
{v.label} {v.label}

1
src/views/Search.js
View File

@ -115,6 +115,7 @@ export function SearchView() {
{ label: "Movie", value: "movie" }, { label: "Movie", value: "movie" },
{ label: "TV Show", value: "show" } { label: "TV Show", value: "show" }
]} ]}
noWrap={true}
selected={type} selected={type}
/> />
<InputBox placeholder={ type === "movie" ? "Hamilton" : "Atypical" } onSubmit={(str) => searchMovie(str, type)} /> <InputBox placeholder={ type === "movie" ? "Hamilton" : "Atypical" } onSubmit={(str) => searchMovie(str, type)} />