Prepping for Bike Hack Night - Weds, September 7th 2016 #125
Comments
|
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. |
|
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. |
|
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 |
|
@hareno44 - can you keep the logo as a png instead of an svg? what was the benefit of converting it to an svg? |
|
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. => |
|
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. |
|
|
|
So I tested the title, and then the logo so you can see the .png, by pulling some of the attributes from
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. |
|
Yes, I am still on the |
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 |
|
|
|
That's a much better idea! I just used the method you linked me to. |
|
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) |
|
Loving it, @hareno44! |
|
@NellePierson Thank you! Glad you like it! I was able to tweak the boxes some with the |
|
@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 |
|
Here's what it looks like currently |
|
Bike hack night happened and it was awesome! All of the medium and low priorities in this original ticket are now being tracked in #135, so closing. |
Let's see if we can get the following issues fixed before Bike Hack Night. I've labeled most of these as a
prioritywith theBike Hack Nightmilestone.Check them off as they are complete and feel free to self-assign by adding your GitHub handle next to each.
Highest priority
Medium priority
Select region and distanceinstead ofmenuDesign change: menu > instruction #114 - wanna tackle this @hareno44?Lowest priority
Merge Created a modal error box #92- @alulsh closed/cc @NellePierson @hareno44 @mdelcambre @alongthepike @tomBeach @hrecht
The text was updated successfully, but these errors were encountered: