diff --git a/README.md b/README.md index e52bfe9..1c9a031 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,28 @@ ![Tech logos](https://i.ibb.co/0BgNRKC/logos.jpg) -![App screenshot](https://i.ibb.co/HDwwh6L/jira-clone-optimized.jpg) +![App screenshot](https://i.ibb.co/W3qVvCn/jira-optimized.jpg) + +## What is this and who is it for 🤷‍♀️ + +I do web development and UX design consulting and this is a showcase product I've built in my spare time. It's a very good example of what a modern real-world React codebase looks like. + +There are many public React projects out there but most of them are either way too simple or [way too complex](https://github.com/Automattic/wp-calypso). I like to think that this project contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand. + +## Features + +### Client + +- Proven, scalable, and easy to understand project structure +- Written in modern React, only functional components with hooks +- A variety of custom light-weight UI components such as datepicker, modal, various form elements etc +- Simple local React state management, without redux, mobx, or similar +- Custom webpack/babel setup, without create-react-app or similar + +### API + +- Simple, scalable, and easy to understand project structure +- Written in TypeScript and using TypeORM ## Setting up development environment 🛠 diff --git a/api/src/database/createGuestAccount.ts b/api/src/database/createGuestAccount.ts index 814d9e7..caf94ae 100644 --- a/api/src/database/createGuestAccount.ts +++ b/api/src/database/createGuestAccount.ts @@ -112,7 +112,7 @@ const seedIssues = (project: Project): Promise => { timeSpent: 3, reporterId: users[1].id, project, - users: [users[0], users[1]], + users: [users[1], users[2]], }), createEntity(Issue, { title: diff --git a/client/src/App/BaseStyles.js b/client/src/App/BaseStyles.js index 64b4d59..c49e765 100644 --- a/client/src/App/BaseStyles.js +++ b/client/src/App/BaseStyles.js @@ -6,6 +6,7 @@ export default createGlobalStyle` html, body, #root { height: 100%; min-height: 100%; + min-width: 768px; } body { diff --git a/client/src/Project/Board/Header/index.jsx b/client/src/Project/Board/Header/index.jsx index 5fae1e8..907d41e 100644 --- a/client/src/Project/Board/Header/index.jsx +++ b/client/src/Project/Board/Header/index.jsx @@ -1,13 +1,15 @@ import React from 'react'; -import { CopyLinkButton } from 'shared/components'; +import { Button } from 'shared/components'; import { Header, BoardName } from './Styles'; const ProjectBoardHeader = () => (
Kanban board - + + +
); diff --git a/client/src/Project/Sidebar/Styles.js b/client/src/Project/Sidebar/Styles.js index d5ca010..dbdc28e 100644 --- a/client/src/Project/Sidebar/Styles.js +++ b/client/src/Project/Sidebar/Styles.js @@ -17,6 +17,9 @@ export const Sidebar = styled.div` @media (max-width: 1100px) { width: ${sizes.secondarySideBarWidth - 10}px; } + @media (max-width: 999px) { + display: none; + } `; export const ProjectInfo = styled.div` diff --git a/client/src/Project/Styles.js b/client/src/Project/Styles.js index 0c9e015..a79fa9d 100644 --- a/client/src/Project/Styles.js +++ b/client/src/Project/Styles.js @@ -10,4 +10,7 @@ export const ProjectPage = styled.div` @media (max-width: 1100px) { padding: 25px 20px 50px ${paddingLeft - 20}px; } + @media (max-width: 999px) { + padding-left: ${paddingLeft - 20 - sizes.secondarySideBarWidth}px; + } `;