Hack-To-Enable
/
outreaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix Filters CSS and add a clear filters button

This commit is contained in:
Ceda EI 2021-04-10 08:22:37 +05:30
parent 089ef5f9cc
commit f9bbb2c07d
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -8,7 +8,7 @@
.filters { .filters {
width: 10%; width: 10%;
position: fixed; position: absolute;
align-self: flex-start; align-self: flex-start;
top: 200px; top: 200px;
right: 10%; right: 10%;

15
src/pages/Home.js
View File

@ -17,7 +17,7 @@ import {
Typography Typography
} from "@material-ui/core"; } from "@material-ui/core";
import { red } from "@material-ui/core/colors"; import { red } from "@material-ui/core/colors";
import { AccountCircle, Favorite, Link as LinkIcon } from "@material-ui/icons"; import { AccountCircle, Favorite, Link as LinkIcon, Delete } from "@material-ui/icons";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import NavBar from "./shared/NavBar"; import NavBar from "./shared/NavBar";
@ -97,9 +97,6 @@ function App() {
} }
function toggleCategory(category) { function toggleCategory(category) {
console.log(category);
console.log(categories);
console.log(categories.includes(category));
if (categories.includes(category)) if (categories.includes(category))
setCategories(categories.filter(i => i !== category)); setCategories(categories.filter(i => i !== category));
else else
@ -115,6 +112,7 @@ function App() {
} }
return false; return false;
}); });
return (<> return (<>
<NavBar> <NavBar>
<div> <div>
@ -154,8 +152,13 @@ function App() {
{visibleFeeds.map(feed => <FeedCard key={feed.id} feed={feed} />)} {visibleFeeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
</div> </div>
<div className="filters"> <div className="filters">
<Typography variant="h5" component="p">Filters</Typography> <div style={{display: "flex", justifyContent: "space-between"}}>
{feedCategories.map(category => ( <Typography variant="h5" component="p">Filters</Typography>
<IconButton style={{color: red.A200}} onClick={() => setCategories([])}>
<Delete />
</IconButton>
</div>
{feedCategories.sort().map(category => (
<FormControlLabel <FormControlLabel
key={category} key={category}
control={ control={