Description
Motivation 🏁
I'm currently in the process of re-factoring the practice card, and there are a few glaring issues with the existing codebase, especially with the Vue SFCs. We should begin with the home page. Observe that the root element is the q-page component. This is wrong and leads to unexpected layout behavior. From the Quasar Docs:
A QPage must be encapsulated by QPageContainer, which in turn must be a child of QLayout.
The QLayout element provides built-in components that make generating user layouts far less error prone and more well-documented. There is no need to write use div elements with the mobile-container or config-header CSS classes, when Quasar ships with dedicated components for containers and headers.
Many more similar issues exist throughout the codebase, which all share a pattern of wrapping everything in a div and writing a custom CSS class. This is really hard to read, debug, or maintain.
Describe your refactoring solution 🛠️
The main goal is to re-factor the code using Quasar elements without changing the UI at all.
Additional details ℹ️
I'm unsure of how to make my PRs. Do I just submit one massive PR that re-factors a ton of source files? Suggestions welcome.