Commit bc3968a2 authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

css changes for wide filter

parent fefa5d2c
......@@ -23,6 +23,16 @@
height: 9rem;
z-index: 20;
}
.Filter__Big_Buttons{
display: flex;
flex-flow: row;
height: 10vmin;
width: 50vmin;
justify-Content: space-around;
align-Items: center;
background-color: brown;
}
Button{
margin: 5px;
z-index: 20;
......
......@@ -7,8 +7,8 @@ export const Filter: FunctionComponent<IProps> = () => {
const [hidden, setHidden] = useState(true);
const filterOptions = <>
<Button variant="secondary">Name alphabetically</Button>
<Button variant="secondary">Number of official languages</Button>
<Button variant="secondary">Name</Button>
<Button variant="secondary">Official languages</Button>
<Button variant="secondary">Option 3</Button>
</>;
......@@ -17,7 +17,9 @@ export const Filter: FunctionComponent<IProps> = () => {
<div className={"Filter__Big_Container"}>
<Settings/>
<div>Filter Options</div>
<div className={"Filter__Big_Buttons"}>
{filterOptions}
</div>
</div>
{hidden ?
<div onClick={() => setHidden(false)} className={"Filter__Container__closed"}><Settings/>Filter options<ExpandFilled/></div> :
......
......@@ -17,7 +17,7 @@
flex-direction: left;
margin-right: 20px;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
.form-control, .searchbar{
margin-top: 1vmin;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment