Skip to content

Commit f98e2ee

Browse files
lazycipherlazycipher
committed
Fix for Tablet version
1 parent da6814c commit f98e2ee

File tree

5 files changed

+112
-60
lines changed

5 files changed

+112
-60
lines changed

‎src/user/dashboard/navigation/navigation.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ class Navigation extends Component {
224224
</div>
225225
</Desktop>
226226

227-
<Tablet>
227+
{/* <Tablet>
228228
<div className="navigation">
229229
<div className="main-navigation">
230230
<ListGroup className="list-group">
@@ -241,12 +241,12 @@ class Navigation extends Component {
241241
link="/dashboard"
242242
isMobile="true"
243243
/>
244-
{/* <ListItem
244+
<ListItem
245245
name="Pinned Posts"
246246
className={this.props.posts ? "active" : "inactive"}
247247
link="/pinned-posts"
248248
isMobile="true"
249-
/> */}
249+
/>
250250
<ListItem
251251
name="Organization"
252252
className={this.props.org ? "active" : "inactive"}
@@ -321,7 +321,7 @@ class Navigation extends Component {
321321
</ListGroup>
322322
</div>
323323
</div>
324-
</Tablet>
324+
</Tablet> */}
325325

326326
<Mobile>
327327
<Navbar className="nav-bar" sticky="top" expand="lg">

‎src/user/dashboard/news-feed/news-feed.js‎

Lines changed: 102 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ function NewsFeed(props) {
321321
votes.donut?.user.length;
322322

323323
return (
324-
<Col xs={12} md={6}>
324+
<Col xs={12} lg={6}>
325325
<div className="grid" key={post?._id}>
326326
<Paper elevation={1} className={classes.paper}>
327327
<Card className={classes.root} variant="outlined">
@@ -496,7 +496,7 @@ function NewsFeed(props) {
496496

497497
let eventsContent = events?.map((event) => {
498498
return (
499-
<Col xs={12} md={6}>
499+
<Col xs={12} lg={6}>
500500
<div className="grid" key={event._id}>
501501
<Paper elevation={1} className={classes.paper}>
502502
<Card className={classes.root}>
@@ -567,7 +567,7 @@ function NewsFeed(props) {
567567
<div className="post-article">
568568
<div className="article">
569569
<Row>
570-
<Col xs={12} md={8}>
570+
<Col xs={12} lg={8}>
571571
<Paper
572572
component="form"
573573
className="post-input"
@@ -577,7 +577,7 @@ function NewsFeed(props) {
577577
</Paper>
578578
</Col>
579579
<AddPostModal show={writePost} onHide={closePostModal} />
580-
<Col xs={12} md={4}>
580+
<Col xs={12} lg={4}>
581581
<div className="cta">
582582
<ButtonGroup
583583
variant="outlined"
@@ -685,55 +685,107 @@ function NewsFeed(props) {
685685
{createPost}
686686
</Desktop>
687687
<div className="news__feed__container">
688-
<div className="tabs__container" style={isTop ? navStyles : {}}>
689-
<div className="nav__tab">
690-
<ul
691-
className="nav__list__container"
692-
style={isTop ? { marginBottom: "0px" } : {}}
693-
>
694-
<li
695-
className={
696-
type === "All"
697-
? "nav__single__tab selected"
698-
: "nav__single__tab"
699-
}
700-
onClick={handleClick("All")}
701-
>
702-
All
703-
</li>
704-
<li
705-
className={
706-
type === "Post"
707-
? "nav__single__tab selected"
708-
: "nav__single__tab"
709-
}
710-
onClick={handleClick("Post")}
688+
<Mobile>
689+
<div className="tabs__container">
690+
<div className="nav__tab">
691+
<ul
692+
className="nav__list__container"
711693
>
712-
Posts
713-
</li>
714-
<li
715-
className={
716-
type === "Event"
717-
? "nav__single__tab selected"
718-
: "nav__single__tab"
719-
}
720-
onClick={handleClick("Event")}
721-
>
722-
Events
723-
</li>
724-
<li
725-
className={
726-
type === "Project"
727-
? "nav__single__tab selected"
728-
: "nav__single__tab"
729-
}
730-
onClick={handleClick("Project")}
694+
<li
695+
className={
696+
type === "All"
697+
? "nav__single__tab selected"
698+
: "nav__single__tab"
699+
}
700+
onClick={handleClick("All")}
701+
>
702+
All
703+
</li>
704+
<li
705+
className={
706+
type === "Post"
707+
? "nav__single__tab selected"
708+
: "nav__single__tab"
709+
}
710+
onClick={handleClick("Post")}
711+
>
712+
Posts
713+
</li>
714+
<li
715+
className={
716+
type === "Event"
717+
? "nav__single__tab selected"
718+
: "nav__single__tab"
719+
}
720+
onClick={handleClick("Event")}
721+
>
722+
Events
723+
</li>
724+
<li
725+
className={
726+
type === "Project"
727+
? "nav__single__tab selected"
728+
: "nav__single__tab"
729+
}
730+
onClick={handleClick("Project")}
731+
>
732+
Projects
733+
</li>
734+
</ul>
735+
</div>
736+
</div>
737+
</Mobile>
738+
<Desktop>
739+
<div className="tabs__container" style={isTop ? navStyles : {}}>
740+
<div className="nav__tab">
741+
<ul
742+
className="nav__list__container"
743+
style={isTop ? { marginBottom: "0px" } : {}}
731744
>
732-
Projects
733-
</li>
734-
</ul>
745+
<li
746+
className={
747+
type === "All"
748+
? "nav__single__tab selected"
749+
: "nav__single__tab"
750+
}
751+
onClick={handleClick("All")}
752+
>
753+
All
754+
</li>
755+
<li
756+
className={
757+
type === "Post"
758+
? "nav__single__tab selected"
759+
: "nav__single__tab"
760+
}
761+
onClick={handleClick("Post")}
762+
>
763+
Posts
764+
</li>
765+
<li
766+
className={
767+
type === "Event"
768+
? "nav__single__tab selected"
769+
: "nav__single__tab"
770+
}
771+
onClick={handleClick("Event")}
772+
>
773+
Events
774+
</li>
775+
<li
776+
className={
777+
type === "Project"
778+
? "nav__single__tab selected"
779+
: "nav__single__tab"
780+
}
781+
onClick={handleClick("Project")}
782+
>
783+
Projects
784+
</li>
785+
</ul>
786+
</div>
735787
</div>
736-
</div>
788+
</Desktop>
737789
<Row className="post">
738790
<Col xs={12}>
739791
<Mobile>

‎src/user/dashboard/news-feed/news-feed.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@
460460
}
461461
.tabs__container {
462462
width: 140%;
463-
margin-left: 27px;
463+
// margin-left: 27px;
464464
margin-top: 10px;
465465
.nav__tab {
466466
width: 100%;
@@ -543,7 +543,7 @@
543543
cursor: pointer;
544544
}
545545

546-
@media (min-width: 320px) and (max-width: 640px){
546+
@media (min-width: 320px) and (max-width: 1024px){
547547
.news__feed__container {
548548
margin-bottom: 0px;
549549
padding: 0px;

‎src/user/dashboard/news-feed/popups/AddPostModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const AddPostModal = (props) => {
8282
</span>
8383
</div>
8484
{type === "Write" ? (
85-
<Form className="modal__form" style={{ marginTop: "-20px" }}>
85+
<Form className="modal__form">
8686
<Form.Row className="modal__row">
8787
<Form.Group
8888
as={Col}
@@ -157,7 +157,7 @@ const AddPostModal = (props) => {
157157
<></>
158158
)}
159159
{type === "Preview" ? (
160-
<Form className="modal__form" style={{ marginTop: "-20px" }}>
160+
<Form className="modal__form">
161161
<Form.Row className="modal__row">
162162
<Form.Group
163163
as={Col}

‎src/utils/breakpoints.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMediaQuery } from "react-responsive";
22

3-
const DesktopMinWidth = 1024;
3+
const DesktopMinWidth = 1025;
44
const TabletMaxWidth = 1024;
55
const TabletMinWidth = 640;
66
const MobileMaxWidth = 640;
@@ -15,7 +15,7 @@ const Tablet = ({ children }) => {
1515
return isTablet ? children : null;
1616
};
1717
const Mobile = ({ children }) => {
18-
const isMobile = useMediaQuery({ maxWidth: MobileMaxWidth });
18+
const isMobile = useMediaQuery({ maxWidth: TabletMaxWidth });
1919
return isMobile ? children : null;
2020
};
2121
const Default = ({ children }) => {

0 commit comments

Comments
 (0)