Building the frontend of the board page
In this section, we will focus on two parts of building the frontend of the board page. The first one is how to make the height of the page the same height as the screen. The second is how to implement the feature of reorganizing the card list and cards by dragging and dropping.
The UI of the board page
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:
Figure 12.1: UI of the board 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...
