Verticals — checklist with vertical separation
Great for planning and organizing work, educational process. Write better. Think more clearly. Get organized. Try it yourself. 👌
Any planning is difficult to complete, especially if it involves a lot of tasks. Many people neglect planning and scheduling their tasks, goals, plans for the next day, week or even years. Be better than them and plan your time.
Using the beautiful and intuitive interface, where there is nothing superfluous, it is very easy to organize your workspace for carrying out tasks!
Is the main building block of your planning. It can contain columns, headers, todo and sub todo internally. To reveal all the functionality of the boards, watch the video and description below.
Columns can be used to group whole task blocks. Columns can contain todo or headers. To find out all the possibilities of the columns, check out our presentation below.
Large lists make it very difficult to read. Use headings to avoid this. With their help, you can create a certain structure. For example, they can store categories, stage names, versioning, or something else...
The most common block you will have to work with. This is a card that displays a task to complete. The additional features of the card are described below.
Verticals has more task states than many other similar products that only have To Do and Done statuses. With statuses, you can control the progress of each todo or sub todo. There are 4 statuses in total: To do, Doing, Canceled, Done.
These are a kind of subtasks that need to be completed in order to implement some kind of large task. Although it is recommended to store large tasks in a heading or even a column, sometimes this is not enough and sub todo comes to the rescue. You can use sub todo as a checklist for your task.
It's no secret that highlighting something with color helps in the perception of information. You can highlight the boards in any color you like to focus your attention on the board.
Columns can also be highlighted with color. The color is applied not to the entire column, but only to its top. Thus, it will not interfere and distract you when working with the content of the column.
Like columns, headings also let you colorize themselves. For ease of use, only the upper part of the header is marked with color, so as not to take too much attention when working with tasks in the heading.
Tasks can be colored in the same way as headings, this is convenient when, for example, you need to focus all your attention on completing a specific task. The colors are not very saturated so as not to focus on the color only.
Sub todo is a direct analogue of the todo discussed above, so the sub todo also has the ability to use colors. The colors are not very saturated so as not to focus on the color only.
To improve the recognizability of the boards, we can highlight them in color, give them unique names, and change their positions. But nothing allows the eye to catch on like a unique icon. This is why there are icons for the boards. By default, they are the same, but if necessary, you can easily change the icon to your liking or choose the icon that best describes your board.
We do not always need classic checkboxes to work with tasks. Sometimes we just have task lists that we just need to move between columns, headers. In this case, you can use a different style of cards. The card style is applied to all todo and sub todo related to this board.
For a cleaner, data-free user experience, you can collapse the columns you don't need at the moment. The collapsed column displays the name of the column and the number of tasks it contains. Collapsed columns are easier to reorder when changing positions.
If you are not currently working on a specific heading and its content is not interesting to you right now, then you can collapse it so that it does not take up too much space. When collapsed, the title looks like a todo and displays the number of nested todo & heading title.
Sometimes it can be useful to invert the order of the columns within the board. To do this, simply click the corresponding button in the context menu. To apply the reverse operation to reverse the column order, do this again.
When you delete a card, it is not permanently deleted, but transferred to the Recycle Bin. This is useful when you accidentally delete a card or after deleting you decide that you need it. Thus, all information on the card, including comments and attachments, can be restored in one click.
The required order of the boards does not always match the order in which we create them. In addition, priorities can sometimes change and some boards must go up in the list, or go down. To change the order, simply pinch and drag the board to the target position.
If you are using columns to track weekly sprints, you may not need to rearrange the columns. But if the contents of the columns have nothing in common and represent one large enough block of work, then ordering the positions can be very useful. Pinch the top of the column and drag the column to the target location.
Headings, like columns, can be dragged and dropped. Use this opportunity in order to correctly prioritize tasks and be as productive as possible in the process of working on a block of tasks. To move, you need to pinch down the top part of the header and drag it to the required position.
Tasks from time to time need to be grouped and prioritized to the top of the list. Priorities can change over time and therefore it is very important to be able to move tasks. Moving is available within a column, heading or even between them. Just click and drag the task to the desired location.
The sub todo represents a small part of the path to completing a task. And the correct execution of subtasks can lead to the completion of the task as a whole faster. Therefore, changing the positions of subtasks from the checklist plays an important role in the process of planning approaches to solving a specific problem.
It is not enough to simply set a task for yourself. If you do not estimate the timing of a task, then this task may not be completed for a long period of time. And in this case, the whole planning process comes to naught. Use a smart calendar to select dates. You can describe in simple words when the deadline comes and the date will be inserted automatically.
Some tasks may lose priority, but you may still have to return to them after a certain period of time. In this case, it is better not to permanently delete the card or move it to the trash can. Instead, just archive the card and it will move to the archive list within the column.
For good and productive communication between team members, you need a place where the problem can be discussed and add the necessary materials to complete. These can be pictures, files of any extension, and text comments that support the Markdown format, which will be discussed below.
Cards allow you to attach comments to them, various files and pictures. And sometimes it is not very convenient to constantly open a popup with comments to the card in order to see all attachments. Using the function demonstrated in the video, you can instantly view all attachments, without having to open a popup of comments to the card.
Very often whiteboards are used by programmers who quite often have to deal with the Markdown format. Verticals supports this feature for comments. You can easily format your text, insert pieces of code, draw tables, and more. More information can be found on the popup with the help of text formatting.
If the names of the cards are very long, then the column width can be increased so as not to take up a lot of space in height and there is no need for additional scrolling. Just hover your cursor between the columns for a distinctive resize pointer and drag it to the size you need to comfortably work with the column.
When working on a device with a low resolution, it is more correct to use all the space to display what really matters. Switching between boards and other functions that are located on the sidebar are not often used and therefore the sidebar can be hidden if necessary.
For a convenient search by task names, you can use the search. All boards, columns, headings are searched at once. After searching, you can see how many matches were found for each board. Column, heading names and sub todo names are not included in the search results. Todo headers only.
Clone repo & install dependencies
$ git clone https://github.com/xom9ikk/verticals.git
$ npm iRun in dev mode with hot reload. dev server will run at http://localhost:3002
$ npm run startBuild for production. Static files will be created in dist folder.
$ npm run buildBuild for production and analyze package sizes.
$ npm run analyzeExtract all i18n strings for translation into files to static/locales
$ npm run i18n:extractBuild a dependency graph of modules inside the app. The outcome will be located in the graph.svg file.
$ npm run graphRun storybook in dev mode with hot reload. dev server will run at http://localhost:6006
$ npm run sbBuild storybook for production. Static files will be created in storybook-static folder.
$ npm run sb:buildBuild storybook for production and run regression testing of the components.
$ npm run loki:updateApply changes that were made to components and approved after review.
$ npm run loki:approveRun unit and integration tests.
$ npm run testRun unit and integration tests in watch mode.
$ npm run test:watchRun code coverage analysis.
$ npm run test:coverageRun mutation testing with stryker.
$ npm run test:stryker