Open mbeylin opened 5 years ago
Issue Status: 1. Open 2. Started 3. Submitted 4. Done
This issue now has a funding of 0.82 ETH (299.8 USD @ $365.62/ETH) attached to it.
Is http://flexboxgrid.com/ mandatory? Can we use another CSS framework (like Bulma) or plain CSS Grid?
Hi! I have some questions
Hey guys good luck to whoever is awarded the bounty. You can use this to get started fast using gulp, flexboxgrid, and a test server. It works! https://github.com/tcrowe/bounties.network
@mbeylin please what's the criteria for rejecting hunters? Or is this task not ready to be worked on?
Apologies to those who were applying to do this: my intention was to accept @tcrowe for this bounty, but some issues on Gitcoin were prohibiting me from doing that. When the site is working I will accept Tony but in the meantime, @tcrowe please feel free to begin working on this.
Regarding the questions:
@tcrowe the file was made on Figma, so we can share the design with you on that site if you're interested in seeing any of the details of its implementation.
Np @mbeylin
Static sites are the most fun! I'm a contributor on https://hexo.io static site generator but as this was only one page I used a simpler tool set.
Here's a link to see the design: https://www.figma.com/file/a6x2BkAyST5KJzmvQzSqRcem/Bounties.network-Landing-Page?node-id=0%3A1
@corwinharrell Hey that was me checking out the design :wave: 😆
@tcrowe haha oh I thought it was Mark! Let me know if you have any questions about Figma. You should be able to inspect element properties to some degree (It's been a while since I've been inside a Figma file as a viewer and not the owner.)
I thought what you guys provided in the initial write-up was great but the Figma project is icing on the cake. Thanks @mbeylin @corwinharrell 👍🏼
Is still open.?
Preview site here: https://elegant-spence-fbc1e4.netlify.com/
@mbeylin @corwinharrell Can you scrunch it down to mobile size and try that hamburger menu? You may want a different behavior.
I'm making good progress here. I am hoping to be mostly finished up today then we can do some tweaks for you guys until it's to your satisfaction.
A question I have is about SVG format. In each SVG is a copy of the watercolor jpg base64-encoded. As you might imagine that will duplicate the JPG many times through the page. I tried looking through the SVG specification to see if I can do something like /img/watercolor.jpg
but I was not able to get it to show up in the SVG background.
Do you have any ideas?
The only one I can think of was to compress down watercolor.jpg
then base64 encode and put it back in.
Please provide:
Alternatively I will write a script to import medium articles from the API: https://github.com/Medium/medium-api-docs#33-posts
https://medium.com/feed/bounties-network
In that case to update you will trigger a website deploy when a new article is written.
@tcrowe I'll reply all at once:
I like the hamburger menu, but it doesn't seem to respond to different screen sizes (on chrome's galaxy s5 emulator the alignment was off, but on my iPhone it looked great). I also couldn't actually see the heading links in the hamburger state, I assume you're just not finished with that.
Regarding the SVG sizing it looks like an extra ~500kb is added with every new image that uses the watercolour. Finding a way not to be reloading the same image would be great. @corwinharrell do you think we could apply that overlay using CSS, by stacking img tags atop each other?
For the partner logos, for now you can just use 4 of these in a row: We can switch them out for real partner logos later.
For the media posts, you can also just link to this medium post 3 times: https://medium.com/bounties-network/the-honu-kitty-supporting-ocean-conservation-the-crypto-way-ef1042e58c50 using the medium logo and body image from that article. I don't think the automation of medium pulling makes sense since we'll likely be adding external publications there as well.
Overall, this is fantastic work (especially the mobile compatibility) and I can't wait to see the finished product.
@mbeylin
New demo deployed here: https://elegant-spence-fbc1e4.netlify.com/
Fixed:
Left to do:
I'm testing on some devices and it still needs some work on the lower resolutions
@tcrowe I see you've already gone this route but yeah I was going to say it might just be worth using a .png for at least the top header image. I don't have any issue with that, although we'll need to make sure the asset is the correct size and appears sharp on retina devices 👍 For now, we're not really going to be leveraging svg-specific properties to modify the more illustrative elements (changing scale, color, animating, etc...) so if the file size is an issue then it probably makes more sense just to use images for elements that include that heavy texturing.
Issue Status: 1. Open 2. Started 3. Submitted 4. Done
Work has been started.
These users each claimed they can complete the work by 5 months from now. Please review their action plans below:
1) tcrowe has been approved to start work.
I am starting work on this issue right now. Thank you for having me to work on this bounty with you
Learn more on the Gitcoin Issue Details page.
@tcrowe a couple of notes on the most recent update:
Otherwise this is coming together quite nicely and I can't wait to see it finished.
Getting closer https://elegant-spence-fbc1e4.netlify.com/
The carousels are not animating but they can be scrolled horizontally manually.
There is a nagging horizontal scroll I'm trying to track down in small res.
The video toward the bottom is an iframe and needed to be adjusted via the script during resize to maintain aspect ratio.
In production the HTML, CSS, and JS are all compressed minified. 😉
@tcrowe this is amazing. I love what you did with the carousels. The final outstanding issue is a small one I noticed with the media cards, there's some strange vertical scrolling that's going on. If you could fix that and open a PR to merge into https://github.com/Bounties-Network/bounties.network/tree/new-design, I'd be happy to finalize this and accept the submission.
Thank you @mbeylin
Can you also tell me how you want to deploy the site? To GitHub, Netlify, other? Depending on that I will need to change a few things.
Issue Status: 1. Open 2. Started 3. Submitted 4. Done
Work for 0.82 ETH (229.08 USD @ $279.36/ETH) has been submitted by:
@mbeylin please take a look at the submitted work:
@tcrowe we'll likely be deploying using an S3 bucket so no need to make any substantial changes.
I accidentally accepted your original PR (and then reverted) after realizing it was merging into master instead of the branch new-design
. Could you re-PR to merge into that branch?
Yes @mbeylin.
If you run npm run prd
it will create ./dist
. The s3 command should be able to sync that dir.
https://github.com/Bounties-Network/bounties.network/pull/10
Issue Status: 1. Open 2. Started 3. Submitted 4. Done
The funding of 0.82 ETH (234.98 USD @ $286.56/ETH) attached to this issue has been approved & issued to @tcrowe.
Description
We need to build a new version of the Bounties Network landing page!
Here is a picture of the design itself: Desktop:
Mobile:
Here is a zip folder of the various SVG files found in the design:
website bounty.zip
This new site should follow the attached design as closely as possible, and should include a number of unique elements:
Requirements
A correct submission for this bounty will:
Revisions
We will require at most 4 revisions for submitted work, and expect whoever completes this bounty to come to us with intermediate questions (especially regarding mobile responsiveness) rather than making assumptions on one's own.