I worked on getting the sign-up, login, and edit-account forms styled similarly to the rest of the site (dark grey and green theme). When I was looking through the forms (which are generated by Devise, which handles user authentication), I had thought that I could just add some classes to a stylesheet (as I had been doing for everything else), include them in the appropriate areas in the haml view and call it good. Nope! The way Devise works, it generates an .erb file (embedded Ruby) to go along with the haml view. To actually get the CSS to work properly, you have to edit the CSS classes referenced in the .erb file (or create your own CSS classes and then make sure they are used in the .erb file, not the .haml file). Once I figured this out, styling the forms was fairly straightforward.
I also decided to move the 'change profile picture' capability to a modal since it didn't really make sense to redirect the user to an entirely new page just to click a few buttons to upload the image. After some trial and error, I discovered that the best way to have the modal display when the "Change Profile Picture" link was clicked was to have the modal and form in a partial, which was rendered in the page by calling "= render 'partial_name_here'". However, the modal would only display when the link was clicked (this is very similar to how Matt F. had done the modals for the Challenges page). I did run into an issue when I was trying to get this to work because I had forgotten to include the "#" as the link path (the hash symbol just serves as a placeholder, or a link to the top of the current page; thus it does not redirect the user anywhere else). Because of this, the "link_to" method was trying to load the modal and data target information as a path. I realized my mistake when I was looking at the URL displayed in the browser and added the "#" since I just wanted to display the modal, not redirect the user to another page.
No comments:
Post a Comment