Now, let's take a look at the UI of the board page that we're building. Figure 12.1 is the UI design of the page:
As you can you see, we have the card lists shown as columns on the page. In the Todo list, the cards are listed vertically with their titles showing. For cards that have images uploaded, we will show a thumbnail as the card cover, as shown in the fourth card. In this chapter, the cards will only be listed with their titles. We will implement the cover image in the next chapter, once we have uploaded an attachment feature implemented.
Figure 12.2 shows the UI of the board page when the (+ Add List) button is clicked; and the Add List form shows up inline. The user can type the list's name and press the Enter key or click the (+ Add List) button to add a new list. Clicking anywhere outside the form will automatically close the form:
Figure 12.3 shows the UI when the (+ Add Card) button is clicked. As you can see, when the button is clicked, the add card form is shown inline, inside the card list. The user can press the Enter key or click the (Add) button to submit the form. Also, clicking anywhere outside the form will close the form. We will implement it using the same mechanism as the add list form:
Users can click on the list header, such as Waiting, In Progress, or Done, and drag the card list to its left side or right side to change the position of the card list. In the same way, using drag and drop, users can move a card up and down in the same card list or move it to another card list.
Users can add as many card lists to the board as needed. When there are more card lists to show on the screen, the card lists will overflow to the outside of the page and there will be a horizontal scrollbar at the bottom of the page. When a card list contains more cards than can be displayed on the screen, those at the bottom will be hidden and a vertical scrollbar will be shown. Figure 12.4 shows how the page will look when the card lists overflow horizontally and cards are hidden at the bottom of a card list:
