WIP: Homepage redesign #674

Closed
wants to merge 37 commits into
from

Projects

None yet

2 participants

@tygriffin
Contributor

This addresses 628 and is a work in progress. I'm leaving some notes in-line asking for feedback.

@tygriffin tygriffin and 1 other commented on an outdated diff Jan 24, 2015
app/views/home/_find_growers.html.haml
@@ -0,0 +1,8 @@
+.find-growers.home-banner
+
+ #placesmap
@tygriffin
tygriffin Jan 24, 2015 Contributor

@Skud : We talked about making this full-width, which I think is a great idea. It's a little tricky though because the application layout nests everything in a Bootstrap container class, which is not designed to be full-width. Did you mention a work-around for this? I thought you did, but perhaps I hallucinated that. If not, I'm happy to move that container class out of the application layout and into respective templates. Alternatively, we could make a second application layout for the homepage, but that feels weird to me.

@tygriffin
tygriffin Jan 24, 2015 Contributor

@Skud : I think you mentioned wanting this map to update as you typed something into the input. That shouldn't be too hard to do. Should I implement now or break out into another story?

@Skud
Skud Jan 24, 2015 Contributor

Please implement the "update in place" now rather than later :)

For the full-width thing, take a look at what we did on http://github.com/3000acres/3000acres with app/views/layouts/home.html.haml (the actual specification of what layout to use happens in the controller). Basically you just need to make a different layout that doesn't wrap everything in .container.

@tygriffin tygriffin and 1 other commented on an outdated diff Jan 24, 2015
config/locales/en.yml
@@ -29,12 +29,8 @@ en:
contact: "Contact"
home:
- blurb:
- intro: "%{site_name} is a community of food gardeners. We're building an open source platform to help you learn about growing food, track what you plant and harvest, and swap seeds and produce with other gardeners near you."
- perks: "Join now for your free garden journal, seed sharing, forums, and more."
- sign_up: "Sign up"
- already_html: "Or %{sign_in} if you already have an account"
- sign_in_linktext: "sign in"
+ home_title:
+ tagline: "A community of food growers"
@tygriffin
tygriffin Jan 24, 2015 Contributor

This extremely creative tagline isn't necessarily my suggestion for what the tagline should be. I just needed something there to test locale changing :)

Does anyone have any interesting ideas for this one?

@Skud
Skud Jan 24, 2015 Contributor

"Open data for small-scale food growers" is what I've been using most places of late. Still not super catchy but a little more specific. Go with that for now and I'll keep pondering (or someone else may come up with something).

@pozorvlak pozorvlak changed the title from Homepage redesign to WIP: Homepage redesign Jan 24, 2015
@Skud
Contributor
Skud commented Jan 24, 2015

Just taking a look at this!

Is there meant to be an image behind "what do you want to grow" ? I don't see anything. I also don't see the map.

The search boxes have something very weird going on where the text in the input field is being cut off/squished, but for some reason I can't upload a screenshot :( Looks like a margin/padding issue.

I think after you select something from that search UI it should take you direct to the crop page in question (eg. /crops/eggplant) not to search results (unless there's not an exact match).

I've got the data section just about ready to go, and will go over it with you tomorrow @ Hackstuff!

@tygriffin
Contributor

This latest push contains the changes that @Skud and I discussed at Hackstuff. I think it looks good except I don't like the map flush against the top banner, so for comparison, I made this alternative branch with the map in a regular container and this second alternative with the interesting crops put back in.

@Skud
Contributor
Skud commented Jan 31, 2015

OK @pozorvlak and I are looking at this and here are my comments at this stage:

  1. Where are the interesting crops? I was expecting to see a row of crops eg. tomato, bean, etc below the crop search. I thought maybe there just weren't enough interesting ones in my local system but the code shows me that it's not even attempting to find any.
  2. Why is the crop search not an autosuggest? If I type "pea" or "berry" for instance I don't see the list.
  3. There's still a CSS problem with the search input boxes, looks like a padding thing? Here's a screenshot (finally -- this is last week's but it's the same problem):

screenshot 2015-01-24 20 40 32

  1. I feel like we need some sort of stronger border between the background image in the top section, and the map in the second. Perhaps just darkening the background image towards its lower edge, like a gradient? I'm not sure.

Moving on to the map section...

  1. How would it look if we extended the "find people" shadow box to the full width of the screen, and align it with the top of the map, like so it covers Greenland, rather than Spain? Could that help with the border thing I mention? Maybe if it had a 1px black border at its top.
  2. When I search there for "Ballarat" it should just rezoom the map, not take me to /places/ballarat -- that's unexpected, and surprising, and let's not surprise people!

Below the map section:

  1. We should stop calling all the partials we used to call (crops, seeds, members, discussion) and remove the partials.

@pozorvlak and I are pairing tonight so we'll work on fixing a bunch of these (or trying our suggestions) and send you a PR direct to your branch.

Skud added some commits Jan 31, 2015
Skud Merge branch 'dev' of https://github.com/Growstuff/growstuff into tyg…
…riffin-homepage-redesign

Conflicts:
	app/assets/stylesheets/overrides.css.less
fd0b93d
Skud Removed unwanted partials from new homepage 0ab25b1
Skud Fixed CSS error from merging 4844002
Skud Fixed breaking post tests. Don't know how they ever passed 84fd497
Skud Fixed CSS problem with inputs on homepage 6d3c75e
Skud Renamed search_crops partial 9de0877
Skud Fixed locales due to changing partials for homepage 015c660
Skud Heaps of cleanup of partials, layouts, and CSS/less
@tygriffin we should probably discuss this but basically I made sure
lots of stuff was nested more sensibly and/or avoided using random
IDs/classes where semantic nesting made more sense.

I also made an attempt at making the "find growers" form be higher up
(near Greenland) and full with, but couldn't make hte full width thing
work.
e4deb37
Skud Fixed a broken translation for Japanese 23469dd
@tygriffin
Contributor

Hey @Skud and @pozorvlak. Sorry I've got no time to respond to everything at this moment, but did you see my alternate branches repeated below? I thought we'd decided to take out the interesting crops all together at Hackstuff so I took them out, but I put them back in one of the alt branches.

https://github.com/tygriffin/growstuff/tree/homepage-redesign-alt
https://github.com/tygriffin/growstuff/tree/homepage-redesign-alt2

@tygriffin
Contributor

This is getting a bit messy so I'm going to close this and make a new PR #697 .

@tygriffin tygriffin closed this Feb 6, 2015
@tygriffin tygriffin deleted the tygriffin:homepage-redesign branch Feb 6, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment