Packt+ | Advance your knowledge in tech

You're reading from Building Applications with Spring 5 and Vue.js 2

Product type Book

Published in Oct 2018

Publisher Packt

ISBN-13 9781788836968

Pages 590 pages

Edition 1st Edition

Languages

Java

Concepts

Full Stack Web Development

Author (1):

James J. Ye

Table of Contents (23) Chapters

Title Page

Dedication

About Packt

Contributors

Preface

1. Modern Web Application Development - This Is a New Era

2. Vue.js 2 - It Works in the Way You Expected

3. Spring 5 - The Right Stack for the Job at Hand

4. TaskAgile - A Trello-like Task Management Tool

5. Data Modeling - Designing the Foundation of the Application

6. Code Design - Designing for Stability and Extensibility

7. RESTful API Design - Building Language Between Frontend and Backend

8. Creating the Application Scaffold - Taking off Like a Rocket

9. Forms and Validation - Starting with the Register Page

10. Spring Security - Making Our Application Secure

11. State Management and i18n - Building a Home Page

12. Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards

13. File Processing and Scalability - Playing with Cards

14. Health Checking, System Monitoring - Getting Ready for Production

15. Deploying to the Cloud with Jenkins - Ship It Continuously

1. Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Building the frontend of the card modal

In this section, we will focus on implementing the frontend of the card modal window. Instead of opening cards in a standalone page, opening a card in a modal window is very convenient for browsing cards. When you open a card to check its details, you stay on the same board page with everything else unchanged. This will help you focus, avoiding distractions caused by jumping between pages.

The UI of the card modal window

Now, let's take a look at the UI of the card modal window. Figure 13.1 shows its UI design:

Figure 13.1: UI of the card modal window

As you can see, the card opened in a modal window with a dark transparent mask behind it. The title of the card is showing at the top of the modal window. You will also be able to check the title to enable the edit mode, which we will talk about later. Under the title is the description of the card. You can click the edit icon to open the edit description form, and when there are attachments added to the...