Skip to content

Commit ab876df

Browse files
varunsingh87varunsingh87
authored
Merge pull request #17 from BorumTech/mobile
Implement mobile compatibility
2 parents 7b64d9f + 771e5a8 commit ab876df

15 files changed

Lines changed: 159 additions & 83 deletions

‎components/JottingList/jottingList.module.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.jottingList {
22
display: flex;
3-
flex-wrap: wrap;
3+
flex-direction: column;
44
align-content: flex-start;
55
border: 2px double indianred;
66
padding: 0;
@@ -15,4 +15,11 @@ ul.jottingList > li {
1515
ul.jottingList > li:hover {
1616
background-color: lightgray;
1717
cursor: pointer;
18+
}
19+
20+
@media screen and (min-width: 800px) {
21+
.jottingList {
22+
flex-wrap: wrap;
23+
flex-direction: row;
24+
}
1825
}

‎components/JottingList/noteList.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ export default function NoteList({ notes }) {
1212

1313
const labelIsNotRelevant = !urlParser.has("label") || item.owner === "shared" || !item.labels;
1414

15-
if (item.labels) {
16-
console.info("[NoteList] Labels", Object.values(item.labels));
17-
}
18-
1915
const jotHasLabel = labelIsNotRelevant || Array.isArray(Object.values(item.labels)) && Object.values(item.labels).some(item => item.name.toLocaleLowerCase() === urlParser.get("label").toLocaleLowerCase());
2016

2117
return (

‎components/JottingList/taskList.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ export default function TaskList({ tasks }) {
1212

1313
const labelIsNotRelevant = !urlParser.has("label") || item.owner === "shared" || !item.labels;
1414

15-
if (item.labels) {
16-
console.info("[TaskList] Labels", Object.values(item.labels));
17-
}
18-
1915
const jotHasLabel = labelIsNotRelevant || Array.isArray(Object.values(item.labels)) && Object.values(item.labels).some(item => item.name.toLocaleLowerCase() === urlParser.get("label").toLocaleLowerCase());
2016

2117
return (

‎components/JottingsControls/jottingsControl.js‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { useRouter } from "next/router";
12
import { useEffect, useState } from "react";
23
import { compareArrays } from "../../libs/arrayExtensions";
34
import { getJottings, getLabels, getSharedJottings } from "../../libs/Datastore/requests";
4-
import { useInterval } from "../../libs/delay";
5+
import { useWindowSize } from "../../libs/view";
56
import LabelControl from "./labelControl";
67
import LabelsControl from "./labelsControl";
78
import NoteControl from "./noteControl";
@@ -14,6 +15,24 @@ export default function JottingsControl(props) {
1415
const [tasks, setTasks] = useState(null);
1516
const [labels, setLabels] = useState(null);
1617

18+
const { width } = useWindowSize();
19+
const [activeList, setActiveList] = useState('labels');
20+
21+
const router = useRouter();
22+
23+
useEffect(() => {
24+
if (width >= 800) {
25+
setActiveList('all');
26+
} else {
27+
setActiveList('labels');
28+
}
29+
}, [width]);
30+
31+
useEffect(() => {
32+
setActiveList(router.query.list || 'labels');
33+
34+
}, [router.query]);
35+
1736
const getJotsToShow = (response, jotType) => {
1837
if (
1938
response[1].status === "rejected" &&
@@ -92,15 +111,15 @@ export default function JottingsControl(props) {
92111
makeJottingsRequests();
93112
}, []);
94113

95-
return (
96-
<>
97-
<LabelsControl labelsState={[labels, setLabels]} />
98-
<NotesControl notesState={[notes, setNotes]} />
99-
<TasksControl tasksState={[tasks, setTasks]} />
100-
101-
<NoteControl notes={notes} />
102-
<TaskControl tasks={tasks} />
103-
<LabelControl labels={labels} />
104-
</>
105-
);
114+
return (
115+
<>
116+
<LabelsControl active={['labels', 'all'].includes(activeList)} labelsState={[labels, setLabels]} />
117+
<NotesControl active={['notes', 'all'].includes(activeList)} notesState={[notes, setNotes]} />
118+
<TasksControl active={['tasks', 'all'].includes(activeList)} tasksState={[tasks, setTasks]} />
119+
120+
<NoteControl notes={notes} />
121+
<TaskControl tasks={tasks} />
122+
<LabelControl labels={labels} />
123+
</>
124+
);
106125
}

‎components/JottingsControls/jottingsControl.module.css‎

Lines changed: 42 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,66 @@
1-
.ownNoteList {
2-
grid-column: 2 / 5;
3-
}
4-
5-
.ownTaskList {
6-
grid-column: 5 / 9;
1+
.taskControl {
2+
grid-row: 7 / -1;
73
}
84

9-
.ownNoteList, .ownTaskList, .labelList {
10-
grid-row: 2 / 6;
11-
margin: 1em;
5+
.labelList, .ownNoteList, .ownTaskList {
6+
display: none;
7+
grid-row: 2;
8+
grid-column: 2 / -1;
129
}
1310

14-
.labelList {
15-
grid-column: 1 / 2;
11+
.labelList h1, .ownNoteList h1, .ownTaskList h1 {
12+
display: none;
1613
}
1714

1815
.fullJotting {
19-
display: grid;
20-
grid-row: 2 / 5;
21-
grid-column-end: -1;
22-
justify-self: flex-start;
23-
overflow: auto;
24-
grid-template-columns: subgrid;
25-
}
26-
27-
.taskControl {
28-
grid-column-start: 1;
16+
grid-row: 2 / -1;
17+
grid-column: 1 / -1;
2918
}
3019

31-
.noteControl {
32-
grid-column-start: 2;
33-
}
20+
@media screen and (min-width: 800px) {
21+
.ownNoteList {
22+
grid-column: 2 / 5;
23+
}
3424

35-
.jottingContent {
36-
grid-row: 1 / 2;
37-
grid-column: 1 / -3;
38-
}
25+
.ownTaskList {
26+
grid-column: 5 / 9;
27+
}
3928

40-
.noteControl, .taskControl {
41-
position: relative;
42-
}
29+
.ownNoteList,
30+
.ownTaskList,
31+
.labelList {
32+
grid-row: 2 / 6;
33+
margin: 1em;
34+
}
4335

44-
@media only screen and (max-width: 830px) {
45-
.noteControl, .fullJotting, .jottingContent {
46-
grid-column: 1 / -1;
47-
justify-self: stretch;
36+
.labelList {
37+
grid-column: 1 / 2;
4838
}
4939

50-
.taskControl {
51-
grid-row: 7 / -1;
40+
.fullJotting {
41+
display: grid;
42+
grid-row: 2 / 5;
43+
grid-column-end: -1;
44+
justify-self: flex-start;
45+
overflow: auto;
46+
grid-template-columns: subgrid;
5247
}
5348

54-
.ownNoteList {
55-
grid-column: 1 / 3;
49+
.taskControl {
50+
grid-column-start: 1;
5651
}
5752

58-
.ownTaskList {
59-
grid-column: 3 / 5;
53+
.noteControl {
54+
grid-column-start: 2;
6055
}
61-
}
6256

63-
@media only screen and (max-width: 600px) {
64-
.ownNoteList, .ownTaskList {
65-
grid-column: 1 / -1;
57+
.jottingContent {
58+
grid-row: 1 / 2;
59+
grid-column: 1 / -3;
6660
}
6761

68-
.ownTaskList {
69-
grid-row: 6;
62+
.noteControl,
63+
.taskControl {
64+
position: relative;
7065
}
7166
}
72-

‎components/JottingsControls/labelsControl.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import ProgressSpinner from "../ProgressSpinner/progressSpinner";
22
// import CreateNoteButton from "../CreateJottingButton/createNoteButton";
33
import LabelList from "../LabelList/labelList";
44
import jottingsControl from "./jottingsControl.module.css";
5+
import { useWindowSize } from "../../libs/view";
56

67
/**
78
* Control for Labels heading,
@@ -12,11 +13,11 @@ import jottingsControl from "./jottingsControl.module.css";
1213
* @param props.notesState[0] The value of notes
1314
* @param props.notesState[1] The Dispatch to set a new value to the notes state
1415
*/
15-
export default function LabelsControl({labelsState}) {
16+
export default function LabelsControl({labelsState, active}) {
1617
const [labels, setLabels] = labelsState;
1718

1819
return (
19-
<article className={jottingsControl.labelList}>
20+
<article style={{display: active ? "block" : "none"}} className={jottingsControl.labelList}>
2021
<h1>Labels</h1>
2122
{labels ? <LabelList labels={labels} /> : <ProgressSpinner />}
2223
{/* <CreateNoteButton jots={notes} /> */}

‎components/JottingsControls/noteControl.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function NoteControl({ notes }) {
2828
urlService.setQueryToJottingInfo("note");
2929
}, [notes]);
3030

31-
if (showNote && router.query.type == "note") {
31+
if (showNote) {
3232
return (
3333
<article ref={showShareMenu ? ref : null} className={`${jottingsControl.fullJotting} ${jottingsControl.noteControl}`}>
3434
<div

‎components/JottingsControls/notesControl.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import jottingsControl from "./jottingsControl.module.css";
1212
* @param props.notesState[0] The value of notes
1313
* @param props.notesState[1] The Dispatch to set a new value to the notes state
1414
*/
15-
export default function NotesControl({notesState}) {
15+
export default function NotesControl({notesState, active}) {
1616
const [notes, setNotes] = notesState;
1717

1818
return (
19-
<article className={jottingsControl.ownNoteList}>
19+
<article style={{display: active ? 'block' : 'none'}} className={jottingsControl.ownNoteList}>
2020
<h1>Notes</h1>
2121
{notes ? <NoteList notes={notes} /> : <ProgressSpinner />}
2222
<CreateNoteButton jots={notes} />

‎components/JottingsControls/tasksControl.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import TaskList from "../JottingList/taskList";
1111
* @param { [tasks, setTasks] } props.tasksState
1212
* @param { {id: number}[] } props.tasksState[0]
1313
*/
14-
export default function TasksControl({ tasksState }) {
14+
export default function TasksControl({ tasksState, active }) {
1515
const [tasks, setTasks] = tasksState;
1616

1717
return (
18-
<article className={jottingsControl.ownTaskList}>
18+
<article style={{display: active ? 'block' : 'none'}} className={jottingsControl.ownTaskList}>
1919
<h1>Tasks</h1>
2020
{tasks ? <TaskList tasks={tasks} /> : <ProgressSpinner />}
2121
<CreateTaskButton jots={tasks} />

‎components/MobileNav/MobileNav.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import mobileNav from './mobileNav.module.css';
2+
import Link from "next/link";
3+
4+
export default function MobileNav() {
5+
return (
6+
<nav className={mobileNav.mobileNav}>
7+
<Link href="?list=labels">Labels</Link>
8+
<Link href="?list=notes">Notes</Link>
9+
<Link href="?list=tasks">Tasks</Link>
10+
</nav>
11+
);
12+
}

0 commit comments

Comments
 (0)