Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML/CSS Standardization #16

Open
5 of 7 tasks
jonathan-ty opened this issue Sep 16, 2024 · 3 comments
Open
5 of 7 tasks

HTML/CSS Standardization #16

jonathan-ty opened this issue Sep 16, 2024 · 3 comments
Assignees
Labels
enhancement New feature or request ux/ui user experience, user interface

Comments

@jonathan-ty
Copy link
Collaborator

jonathan-ty commented Sep 16, 2024

This task involves...

  • Removing redundancies in CSS selectors (Multiple CSS selectors that share the same properties in different webpages can be shared in one CSS file, etc.)
  • Removing selectors that serve no purpose (IDs or classes for HTML elements that don't necessarily need IDs or classes associated with them)
  • Standardizing the look of all webpages (i.e. same background-image, similar button animation, etc.)
  • Making our website look cool! 😎

Task List of Webpages to Standardize:

  • compare-stores.html
  • index.html
  • item-price.html (this web page needs to be worked on, nothing to standardize)
  • make-list.html
  • receipt.html (this web page needs to be worked on, nothing to standardize)
  • user-authentication.html
  • user-page.html
@jonathan-ty jonathan-ty added enhancement New feature or request ux/ui user experience, user interface labels Sep 16, 2024
@jonathan-ty
Copy link
Collaborator Author

jonathan-ty commented Sep 16, 2024

Currently working on make-list.css, make-list.html, and make-list.js file. Any notes that I've made in this comment are changes I made that I believe require discussion:

make-list.css

  • Removing hover animation for next-page-buttons, the decrease in opacity seems unnecessary
  • Removed CSS selectors that were commented on and made no impact on the design of the webpage
  • Resized next-page-buttons to match the sizes from other web pages
  • Changed background color of the columns + added borders to the images of food items
  • Fixed border-radius issues concerning the columns for the dashboard
  • Changed padding/margins for the grocery list items

make-list.html

  • No changes were made to this file

make-list.js

  • Tweaked the JS animation for list name editing to return the original background-color

@jonathan-ty
Copy link
Collaborator Author

Currently working on receipt.html file. Any notes that I've made in this comment are changes I made that I believe require discussion:

  • Removed the edit list name for the receipt.html webpage, decided it didn't seem necessary to have on the receipt page.
  • Matched display background color with that from make-list.html.

@jonathan-ty
Copy link
Collaborator Author

Currently working on compare-stores.html, compare-stores.js, and compare-stores.css file. Any notes that I've made in this comment are changes I made that I believe require discussion:

  • Removed the JS feature where the background color of the storeTitle was set to some random hex color. Alternatively, I made a list of 30 or so colors complementary to our website's color pallette that would be randomly assigned to the storeTitleBar
  • Resizing of the list name, pencil, and the add-store + add-item buttons
  • Consistent animation from previous webpages applied unto this webpage (add-store/add-item buttons)
  • border-radius adjustments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux/ui user experience, user interface
Projects
None yet
Development

No branches or pull requests

2 participants