search

dcfemtech / hackforgood-waba-map

DCFemTech Hack for Good 2016 - WABA Bike Map Project
MIT License
10 stars 9 forks source link

Prepping for Bike Hack Night - Weds, September 7th 2016 #125

Closed alulsh closed 8 years ago

alulsh commented 8 years ago

Let's see if we can get the following issues fixed before Bike Hack Night. I've labeled most of these as a priority with the Bike Hack Night milestone.

Check them off as they are complete and feel free to self-assign by adding your GitHub handle next to each.

Highest priority

/cc @nellepierson @hareno44 @mdelcambre @alongthepike @tomBeach @hrecht

hareno44 commented 8 years ago

So I have all the elements on the page: Title, description, credit, logo (converted to svg). However, the map keeps covering all these elements which makes it difficult to work on things like sizing and placement. I know they're there because when I refresh the page, it will load these elements first and will show for a split second, and then the map + menu load, covering the information I need to edit. If I can figure out how to keep the map from covering everything I'll be able to edit and finish these tasks.

alongthepike commented 8 years ago

Can you push up your work in progress code to a new branch? I can take a quick look and see if the problem jumps out at me.

hareno44 commented 8 years ago

Yeah, I can do that. It got pretty long because of that SVG, I'm still figuring out how to kind of fold it down so I don't have to keep scrolling up and down 200 lines of code to get to the <body> material.

alulsh commented 8 years ago

@hareno44 - can you keep the logo as a png instead of an svg? what was the benefit of converting it to an svg?

hareno44 commented 8 years ago

Now that you mention it I can't believe I failed to remember that you can insert images without having to convert them to svgs. => <img src=""/> I'm going to go fix that right now.

alongthepike commented 8 years ago

I believe we need to get the stuff at the top (logo, title, etc) to be a fixed height and then we can adjust the "top" property of the #map CSS to that same height. The other alternative would be to make it float on top of the map like the menu does.

hareno44 commented 8 years ago

image

alulsh commented 8 years ago

@hareno44 - you are working off of https://github.com/dcfemtech/hackforgood-waba-map/pull/127, right?

hareno44 commented 8 years ago

So I tested the title, and then the logo so you can see the .png, by pulling some of the attributes from #mapMenu

z-index:9; position:absolute; float:inherit;

Is what brought it to the front. Also, when I switched to the .png format, it doesn't allow me to adjust the color and sizing like the .svg. Is it okay if I switch back? .svg's are vectors so they don't get pixelated or fuzzy when their size changes. Plus, the .svg omits the white background.

hareno44 commented 8 years ago

Yes, I am still on the front-end-changes branch

alulsh commented 8 years ago

Also, when I switched to the .png format, it doesn't allow me to adjust the color and sizing like the .svg.

You should be able to adjust the size of the PNG using a graphics editor like Microsoft Paint, https://pixlr.com/editor/, or GIMP so that the image isn't pixelated or fuzzy.

You can also work with images as an svg while in development then export to a PNG when the image is the right color and size. In general PNGs are quicker to load than SVGs.

Admittedly, when I did front end work there was limited browser support for SVGs at the time, so I was forced to use correctly-sized PNGs. Today there is much more browser support for svgs.

Reviewing your branch, it looks like you added the svg graphics inline in index.html - can you use these in img tags instead per https://css-tricks.com/using-svg/#article-header-id-2?

hareno44 commented 8 years ago

image

hareno44 commented 8 years ago

That's a much better idea! I just used the method you linked me to.

hareno44 commented 8 years ago

image

Map update. I still need the link to the data matrix, but other than that the medium-priority tasks have been accomplished. (like figuring out how to get rid of the gaps below the county text)

WABA-Comms commented 8 years ago

Loving it, @hareno44!

hareno44 commented 8 years ago

@nellepierson Thank you! Glad you like it! I was able to tweak the boxes some with the max-height attribute so it looks better than the one pictured above. I think what's making it difficult to change the single-line counties is that all of them are connected.

alulsh commented 8 years ago

@hareno44 - nice work! This is a great start. Can we make the new header with the logo, title, and description be responsive and be 100% of the width of the user's browser? Right now the width is hardcoded to be 955px in your WIP branch - https://github.com/dcfemtech/hackforgood-waba-map/pull/127/files#diff-4e7bb40584b55a44f4657b188986bff4R11.

hareno44 commented 8 years ago

waba demo site wip

Here's what it looks like currently

alulsh commented 8 years ago

Bike hack night happened and it was awesome!

All of the medium and low priorities in this original ticket are now being tracked in https://github.com/dcfemtech/hackforgood-waba-map/issues/135, so closing.