Implement Homepage Redesign

[tkwidmer]

We had a pull request from @fionawhittington over on refuge_assets to update our homepage.
I think it's a pretty great redesign of our home page. So this is the proposal, and I think it would clean up that page a little bit, which is something i had just thrown together.

[zealousAnemone]

Hi there - I'm new to contributing to others repositories so please excuse me if I'm being completely daft. Do you need somebody to do a CSS styling of the page to make it look like this? I would love to help with this project if you still need help.

Thanks :)

[DeeDeeG]

Hi, and welcome to our GitHub repo!

Do you need somebody to do a CSS styling of the page to make it look like this?

Yes, I'd say that is about right. Might require some changes to the HTML as well? Or maybe not?

In any case, we are definitely open to contributions here. We are an all-volunteer team, and contributions to improve the project are greatly appreciated. If you need any hints or help, we are here to give it. (Leave a comment anywhere and we'll get a notification).

And if you just want to go for it straight-away, we'd be happy to have your changes as a Pull Request. Just fork the repo, make the changes at your fork, and make a new PR.

(Here's a how-to guide: https://help.github.com/articles/creating-a-pull-request-from-a-fork/)

[DeeDeeG]

For more info about the repo's technology, we do have a Wiki as well: https://github.com/RefugeRestrooms/refugerestrooms/wiki

The way to test changes on your own machine is described in CONTRIBUTING.md

A lot of our site is compiled from a source language into standard HTML, CSS, and JavaScript... We use HAML -> HTML, SCSS -> CSS, and CoffeeScript -> JavaScript.

Our CSS files are here (most of it is Sass "SCSS" format): https://github.com/RefugeRestrooms/refugerestrooms/tree/develop/app/assets/stylesheets

HTML source is here (mostly in Haml form): https://github.com/RefugeRestrooms/refugerestrooms/tree/develop/app/views

[zealousAnemone]

@DeeDeeG Thank you so much for your prompt and detailed response! That is super helpful. I'll fork it and take a crack at it. :)

Veronica

[fionawhittington]

Veronica, Thanks for taking this project on! I was going to try and code it myself, but I haven’t been able to find the time. Let me know if you need any help or have any questions about the design! If I have any free time this weekend or next week, I will try to mock up designs for the other pages and for mobile. Best, Fiona

…

On Mar 8, 2018, at 3:11 PM, Veronica ***@***.***> wrote: @DeeDeeG <https://github.com/deedeeg> Thank you so much for your prompt and detailed response! That is super helpful. I'll fork it and take a crack at it. :) Veronica — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#468 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOHGMd3msPpjAgWPKvzIb9-5Q2w9km5Aks5tcZBVgaJpZM4SSeF5>.

[zealousAnemone]

@fionawhittington @DeeDeeG ... So I took a look at it, and I think my lack of Ruby knowledge is going to get in the way of me being able to do this. :( I thought I could kind of suss out the parts I knew and make some stylesheets, but I'm having a harder time navigating the code than I thought I would. (I am more a MERN type of person.) I still really want to help though! Is there anything you need that might be easier? Need any tedious but easy tasks done or anything?

[mi-wood]

@zealousAnemone I'm happy to invite you to slack and help you navigate the codebase if that would help! Otherwise, I can spend a little time digging through other issues to find something else.

Thanks for volunteering!

[DeeDeeG]

I'm thinking over a bit how this should happen whenever we get to it.

This is indeed going to be some concerted work to actually implement this (whoever feels comfortable doing it), since we use a lot of styles from the "Bootstrap" gem right at the moment, and (I assume?) the default CSS from the various components' gems (simple_form, for example.) So we would have to start writing a bunch more custom-from-scratch CSS that overrides the default stuff (and maybe turn off the default CSS where possible.)

And changing the HAML source might be useful... but we have fairly spare HAML markup, whereas the gems' ruby code does most of the work compiling out into our final product. So I would start out seeking to avoid changing the HAML code wherever possible, to keep this task simple and reduce scope/diffiiculty.

[cindychangy]

are you still looking for someone to code up the design?

[DeeDeeG]

Hi @cindychangy,

Yes, we are still looking for someone to do this! We are, as always happy to help with/consult over anything you may run into along the way.

[DeeDeeG]

By the way, I have been trying to mock this up in plain HTML/CSS in order to make it clearer how to implement this on the web. If anyone is interested in my work-in-progress of that, let me know and I'll post it up on GitHub somewhere. (Mostly it's just a bare-bones HTML version of the splash page, but it's ready to add styles now. I have an odd-looking version of the purple square for the nav area as well, but need to research how to get it behind the nav text...)

[cindychangy]

@DeeDeeG : great, do you want to post what you have for the page - can most likely use it as a base to build up from/add styles too. The purple square and nav ordering can most likely be solved with a 'z-index' ordering of the items which will allow you to place one behind the other.

[fionawhittington]

I know of another student that would be willing to design the other pages in May, if that is of interest to the team. I don’t know Ruby or HAML, so I’m not sure I’m the best person to assist with coding bugs. However, I am versed in HTML and CSS though, if any more questions pertaining to style or structure arise. Best, Fiona

…

On Apr 10, 2018, at 12:08 PM, cindychangy ***@***.***> wrote: @DeeDeeG <https://github.com/DeeDeeG> : great, do you want to post what you have for the page - can most likely use it as a base to build up from/add styles too. The purple square and nav ordering can most likely be solved with a 'z-index' ordering of the items which will allow you to place one behind the other. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#468 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOHGMSQsTwkU88Q5T08UhpPoHU6Zzu3iks5tnNkXgaJpZM4SSeF5>.

[DeeDeeG]

@fionawhittington,

Yeah, I think everyone would be down for that. We're generally very happy for contributors around here! (We try to be good mentors as well, even though some issues do arrise that we don't immediately know how to tackle ourselves... Students who are able to handle unexpected hiccups will probably do best? And we can't guarantee every project will go 100% smoothly if that's the learning environment they need. But this is a real-world project, so it could be a valuable experience in that sense.) Anyway, sure!

EDIT: Please pardon my typo! Typing on an old iPad with autocorrect turned off is, perhaps, a bad idea!

[DeeDeeG]

Okay, here it is: https://github.com/RefugeRestrooms/refugerestrooms-redesign-web-mockup

(It is very basic, but it's a start. Will be improving over next hour or so.)

Edit to add: We will not be able to directly use this in the app, we will have to transfer over to using HAML and SCSS, etc (unless we want to re-write the whole app).

Edit 2: I made a few improvements so that it's getting closer to matching the PNG of the re-design. It's maybe 25%-50% done.

Going to take a break, but I'm hoping to come back to it soon as/when I have time.

[DeeDeeG]

@fionawhittington,

Do you happen to recall the font and font sizes that are used in the wireframe?

(I found Lato, which looks similar but it's not an exact match.)

[fionawhittington]

@DeeDeeG Sorry for the delayed response! The font type is Interstate <https://store.typenetwork.com/foundry/fontbureau/series/interstate?src=GoogleFonts>. The font sizes I have won't translate to the web because I made it in Photoshop. Best, Fiona

…

On Tue, Apr 10, 2018 at 4:01 PM, DeeDeeG ***@***.***> wrote: @fionawhittington <https://github.com/fionawhittington>, Do you happen to recall the font and font sizes that are used in the wireframe? (I found Lato <https://fonts.google.com/specimen/Lato>, which looks similar but it's not an exact match.) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#468 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOHGMSKym2CfJsgpHRJrx5pQ6HJvqWt3ks5tnQ-XgaJpZM4SSeF5> .

[DeeDeeG]

@fionawhittington Thanks!

[cindychangy]

@DeeDeeG : sorry for the late reply, I see your repo online for the design so far, do you want me to help finish building out the remainder of what is left on the mockup?

[DeeDeeG]

@cindychangy yes, that would be great! I'm a bit of novice at building web stuff from scratch; My forte is bug fixes... The web-tech mockup should be even more helpful if it's more complete (and perhaps made responsive for various screen sizes.)

(The end goal is, of course, to translate this all to HAML and Sass for the real web-app to use. So I can see making the web mockup really great and getting around to "porting" that to the real app later, or at some point just transitioning over to the final implementation and polishing there.)

I can give you commit rights directly to the web-mockup repo, if that works for you. I'm also happy to just accept PRs, or just have you link to your fork as your fork advances past the upstream repo.

---

On the other hand, if the web mockup is close enough as-is, and you prefer to move on to implementing in HAML / Sass (probably as a fork of this repo) then that would be quite welcome also.

[DeeDeeG]

And of course, there is no obligation or expectation of having to get 100% finished with the project once you start. Any progress is progress, in my opinion, and we're glad for the contributions.

[cindychangy]

@DeeDeeG, sounds good, I forked the repo and will put a link to the repo to review when some progress has been made.

[DeeDeeG]

I just updated some of the branches, hopefully that won't cause any issues. Particularly, master now more-closely matches the work branch.

The "work" and "footer-fix-WIP" branches are attempts to make alignment work better, but I'm not 100% sure what approach to take there. The main thing that's confused me in those branches is how to get the footer to be responsive without becoming detached from the bottom of the page, or if using "position: fixed," how to keep it from blocking important content at smaller screen sizes such as the OG iPhone's 320x480.

[cindychangy]

@DeeDeeG : I've done a first pass at completing the homepage based off of your start - forked repo
I see you guys are using bootstrap and pulled the same link on the live site into the header to assign sections into columns, but it seems like there are custom styles in the bootstrap stylesheet, which overwrite the general tags (header, footer) you had set up, so left the page as is, for now.

Let me know if I should re-factor page to use that same bootstrap stylesheet.

[DeeDeeG]

@cindychangy This looks good, thank you for the update!

I personally feel the bootstrap CSS file is a bit heavy for what we get out of it, so if we can manage without it that would be cool. However, I am a bit of a junior member of the team, just the one most available to comment on this right now; I don't want to override anyone else's opinion on this if anyone else is particularly fond of bootstrap.

(Bootstrap might be more heavily-relied-on in other pages than the splash page, I'm not 100% sure, but if possible, it seems that we could have a performance improvement if we drop bootstrap.)

For the mockup, I think it is totally fine either way, as we can use or drop bootstrap in the final implementation if we decide we need to. As long as it works using web tech and visually matches @fionawhittington's mockup from Photoshop reasonably closely, I'd call that a success. 👍

If we could get responsive design working too, in the web mockup, that would be a major thing IMO, and would make the final implementation a lot less tricky. On the deployed site, we currently do that largely by having different styles for different screen widths. I recall that the footer works fine on our deployed site, so if we need to copy the deployed site to get that working, that sounds like a good idea to me. 👍 👍

[DeeDeeG]

Update about footer alignment:

The way the deployed site gets away with this is just by not having a footer with an opaque/rectangular background. With a tall enough screen, the footer floats well away from the bottom edge of the user's screen. Edit: Which looks fine, since it doesn't stand out as being out of place at all. It just floats fairly naturally against the background image.

The deployed site also is tall enough (has enough pixels of height) that it will tend to have a vertical scroll bar, whereas the photoshop re-design mockup is more minimalist, and seemingly designed to work well without a vertical scroll bar at all.

The solution I heard of somewhere online was to use flexbox. I take it that at one point this was a rare thing for browsers to support, but it's very well supported now: https://www.caniuse.com/#feat=flexbox

(EDIT: and for browsers that don't support flexbox we can have a fallback behavior pretty much equivalent to the deployed site.)

Otherwise, we could give the footer a border radius, or remove the solid fill background, and/or generally make it look less out-of-place when it floats away from the bottom screen edge.

[janaipakos]

@DeeDeeG I think flexbox for a footer is a good strategy. https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
main would push footer to the bottom of the viewport

[wellingtongvs]

Is anyone else still working on this? If not, I would like to work on this issue.

[DeeDeeG]

Hi @wellingtongvs,

Yes, there was an update to this just yesterday two days ago actually. But it is not done yet, and we are glad to have help finishing it. See this repo: https://github.com/RefugeRestrooms/refugerestrooms-redesign-web-mockup

I think that mockup is mostly finished. It only needs the "resources" dropdown menu implemented, and to work better on narrower screens, such as smartphones.

Help on this is still very much welcome. I think there are two possible directions to take contributing to this issue:

1. Finishing the web mockup (add "responsive design" for narrow screens, and/or implement a working dropdown menu at the top navigation bar.)
2. Begin translating this web mockup into the real web app, using Haml and Scss.

Thank you for your interest in helping with this issue, and if you have any other questions, let us know and we will try to help.

Best regards,

- DeeDeeG

[wellingtongvs]

Great! I'll see what I can do about the responsiveness of the mockup for now.

[wellingtongvs]

I made a pull request over at the mockup repository. I tested the finished version on Emmet Re:view and everything seems fine. My CSS could use some polishing, but for a mockup version I think it should be fine.

I tried to stay true to the pure HTML+CSS approach, but I think Bootstrap would have made things a lot easier to implement. On that note, I'm not too sure if it's a good idea to drop it from the main project. I don't know too much about the impact it has on the performance, but from my point of view and past experience it's usually easier for people to work on the frontend with a framework such as Bootstrap or Materialize.

If it's fine, I would like to continue work on this and begin translating the mockup into the main project using HAML and SCSS, as you had suggested.

Edit: I missed the part about the Resources dropdown menu. I'll implement it and update the PR if it hasn't been accepted by the time I finish.

Edit 2: Added the Resources dropdown.

[DeeDeeG]

The pull request is merged now. It is a fairly complete mockup now (in HTML and CSS)!

It is recommended for anyone working on this issue to take a look at the web mockup for guidance when implementing this in the actual app. Although I think we are still ultimately aiming to replicate the photoshop mockup, the web mockup gives a clear picture how this is doable on the web.

Thanks @cindychangy and @wellingtongvs for your contributions to the web mockup so far!