search

Comp-490-SeniorProject / site

MIT License
0 stars 1 forks source link

Update Routing and Reconfigure Styling #25

Closed mndzamel closed 2 years ago

mndzamel commented 2 years ago

The first commit contains most of the routing and styling fixes. Updated the routing and paths in app-routing.module.ts so that the majority of the site pages link together. Different layout components are used for subsets of pages.

The login functionality is currently still being worked on so there is a test admin component in place of the device overview page. To go from the main pages to the pages related to the device, add /my-devices to the url and use the links in the header and sidebar to navigate the site.

The styles that were initially applied globally in styles.scss were either commented out or moved to the appropriate component folder and modified in the .scss and .html files, with some additional Bootstrap if necessary. Google Fonts imports were not functioning so they are commented out for now; there may be extra steps needed to make them work with webpack. Bootstrap was installed using the npm install bootstrap command.

The second commit includes modifications of layouts, headers, sidebars, and the footer to make them more responsive and align together correctly. Basic Bootstrap card components were added to pages related to the device for consistency and to match the initial prototype design for presentation purposes.

mndzamel commented 2 years ago

I'm not sure if I'll be able to review your actual changes, but I can comment on one obvious issue.

You accidentally checked in the node modules directory, which contains the third party dependencies. This probably happened when you installed bootstrap. It's my fault for not being clearer about this — the way Angular is set up within Django may be a bit unintuitive. To install node modules through npm, you should cd into the web/frontend/angular directory. This is just like you did when you first installed dependencies according to the instructions in CONTRIBUTING.md. It's done this way so that npm will detect the extant package.json in that directory and add the new dependency to it. Note that node_modules is already ignored by git if it's within that directory.

Okay, thanks for pointing that out. I didn't realize I was in the wrong directory when installing Bootstrap. Is there a specific way to remove the node modules directory or uninstall Bootstrap so I can install it in the correct directory?

MarkKoz commented 2 years ago

Is there a specific way to remove the node modules directory or uninstall Bootstrap

Just delete the node_modules directory, the package.json file, and the lock file generated in the root.

mndzamel commented 2 years ago

Just delete the node_modules directory, the package.json file, and the lock file generated in the root.

I deleted these files and ran npm install bootstrap in the web/frontend/angular directory but the node_modules directory is still generated in the same place I deleted it from. How should this be fixed?

Edit: Nevermind, it worked correctly. The folder is just greyed out.

MarkKoz commented 2 years ago

Looks like you fixed that now.