Quickstart screen for bounty creation flow #1029

SaptakS · 2018-04-30T18:36:39Z

Description

Frontend for the quickstart screen has been added.
Functionalities like video lightbox and don't show again.
Integrating with the bounty creation flow.

Checklist

linter status: 100% pass
changes don't break existing behavior
commit message follows commit guidelines

Affected core subsystem(s)

Testing

Refers/Fixes

Fixes: #982
Refs: #429

SaptakS · 2018-04-30T18:39:45Z

Following is the screenshot as it looks in Chrome in MacOS. Some work still needs to be done in responsiveness.

thelostone-mc · 2018-04-30T21:53:42Z

@SaptakS Oh you might wanna use 2 spaces as against 4 in .css files :P

The box svg + green background for the issue svgs still feels a lil off 😓

SaptakS · 2018-05-01T04:52:56Z

Oh you might wanna use 2 spaces as against 4 in .css files :P

Yes yes. I haven't checked the linting. I will definitely do that. No worries.

SaptakS · 2018-05-01T04:53:46Z

The box svg + green background for the issue svgs still feels a lil off

I thought it goes well with the current design of the entire website. What would you suggest?

thelostone-mc · 2018-05-01T12:58:47Z

I figured we'd have the svgs in green against a white background but yeah that might throw off the color balance !! Let's stick to the design for now in that case

( Oh btw how does it look when you swap out the grey with light shade from the filters on the explorer pages ? )

codecov · 2018-05-04T21:24:39Z

Codecov Report

Merging #1029 into master will increase coverage by 0.15%.
The diff coverage is 57.14%.

@@            Coverage Diff             @@
##           master    #1029      +/-   ##
==========================================
+ Coverage   31.08%   31.24%   +0.15%     
==========================================
  Files         122      120       -2     
  Lines        8521     8404     -117     
  Branches     1117     1100      -17     
==========================================
- Hits         2649     2626      -23     
+ Misses       5764     5669      -95     
- Partials      108      109       +1

Impacted Files	Coverage Δ
app/app/urls.py	`94.28% <ø> (ø)`	⬆️
app/dashboard/views.py	`16.89% <57.14%> (+0.56%)`	⬆️
app/dashboard/admin.py	`72.41% <0%> (-4.4%)`	⬇️
app/marketing/admin.py	`76% <0%> (-4.33%)`	⬇️
app/app/settings.py	`83.61% <0%> (-1.7%)`	⬇️
app/faucet/admin.py	`64.51% <0%> (-1.11%)`	⬇️
app/marketing/models.py	`65.98% <0%> (-0.46%)`	⬇️
app/enssubdomain/views.py	`22.9% <0%> (-0.41%)`	⬇️
app/dashboard/notifications.py	`16.74% <0%> (-0.31%)`	⬇️
app/retail/views.py	`39.09% <0%> (ø)`	⬆️
... and 12 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update efd66b3...86bc240. Read the comment docs.

stickler-ci · 2018-05-08T09:05:22Z

app/dashboard/views.py

@@ -719,6 +719,17 @@ def bounty_details(request, ghuser='', ghrepo='', ghissue=0, stdbounties_id=None
    return TemplateResponse(request, 'bounty_details.html', params)


+
+def quickstart(request):


E303 too many blank lines (3)

thelostone-mc · 2018-05-10T10:26:56Z

@SaptakS so a good chunk of the code base uses the following classes for font-size to ensure we don't have different font-size!

I know the design had the font-size bigger, but should we update it to match what is being used ?
Checkout out "localhost:8000/onboard" [ Comment out this line ]

Part 1

- Use a mix of : `font-subheader` + `font-title` + `font-body` for this : - Checkbox , we should reuse the styles like [here](https://github.com/gitcoinco/web/blob/master/app/dashboard/templates/shared/sidebar_search.html#L104-L110)

Part 2

Use a mix of : font-subheader + font-title + font-caption
Also can we use font-awesome 5 circle + cross instead of the image? That looks nicer :P

Part 3

The Metamask status is longer as compared to the status present on the dashboard & bounty details page. We could annoy @PixelantDesign to make it uniform :P

Part 4

This could use margin-top :P
Oh we should change the title to use "Muli" (and set the line-height : 0)

Part 5

We should make the checkboxes uniform ! Both are different from what's used in the explorer
Source code is here Copy + Paste \m/
Also thoughts on making the Fund Issue smaller ? (I know it's like this in the design but we don't have super wide buttons anywhere :P )

Part 6

When I click on fund issue without filling the issue details and stuff, it redirects me back to quickstart page ? 😅

Part 7 - Mobile

The font seems to big but that would be fixed when we reuse what we have
( as mentioned it Part1 :P )
@PixelantDesign I'm not a fan of the grey :P
Oh could we remove the padding-bottom on mobile ?

@SaptakS Feel free to buy me food for helping with the review :P
I like bacon

Also @mbeacom would it be okay to merge this in once these issues are addressed & disable the url so that @SaptakS doesn't spend his life resolving conflicts ?

mbeacom · 2018-05-16T13:16:18Z

@SaptakS Would you mind resolving the conflicts on this PR? Once that's done, we'll get this pushed to staging.

SaptakS · 2018-05-23T09:45:45Z

"Create a Github Issue" link doesnt go anywhere

What should I hyperlink this to? @owocki @PixelantDesign

SaptakS · 2018-05-23T10:06:22Z

how do i use the ' Don't show again' link?

Right now what I have is you need to click the checkbox and then click "Ok, I'm ready" button. And the localstorage value gets set so that next time you visit a new funder issue, it doesn't redirect.

I am still not sure whether to do it via JS or do we maintain a table to just save the information about users who have clicked on Don't show so that we can redirect from the backend instead. @owocki @mbeacom @thelostone-mc

mbeacom

I am committing the changes I've referenced in my comments. This just needs tested on staging. I'll deploy it once I commit my changes.

mbeacom · 2018-05-23T13:32:09Z

app/dashboard/templates/shared/zero_balance_error.html

+    </div>
+    <div class="col-lg-2 col-sm-12">
+      <p>
+        <a class="btn btn-sm btn-info mt-3 pulseClick" role="button" id="submit" href="/faucet" target="_blank" rel="noopener noreferrer">{% trans "View Faucet" %}</a>


This is merely a note since it was already like this, but we'll want to be mindful of replacing hard coded URLs in templates with {% url 'url_reverse_name' %}

mbeacom · 2018-05-23T13:39:15Z

app/dashboard/views.py

+
+    context = {
+        'active': 'video',
+        'title': 'Quickstart Video',


We'll want to wrap this in gettext_lazy via: _()

mbeacom · 2018-05-23T13:39:44Z

app/dashboard/views.py

+@ratelimit(key='ip', rate='5/m', method=ratelimit.UNSAFE, block=True)
+def get_quickstart_video(request):
+    """Show quickstart video."""
+


No new line between method start/docstring and the first line of logic.

mbeacom · 2018-05-23T13:40:24Z

app/dashboard/views.py

@@ -710,6 +710,16 @@ def bounty_details(request, ghuser='', ghrepo='', ghissue=0, stdbounties_id=None
    return TemplateResponse(request, 'bounty_details.html', params)


+def quickstart(request):


I'm adding staff_member_required to the new views until we're ready to launch quickstart

mbeacom · 2018-05-23T13:41:45Z

app/dashboard/templates/quickstart.html

+            <li>{% trans "4) Confirm the transaction in metamask" %}</li>
+          </ol>
+          <p>
+            {% trans "Once confirmed on blockchain, your bounty is posted to Gitcoin!


You'll want to be careful using {% trans "" %} spanning multiple lines with heavy whitespace between line segments.

mbeacom · 2018-05-23T13:42:24Z

app/assets/v2/images/Lightbulb.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>


This needs squashed. You can do that via make compress-images or simply svgo app/assets/v2/images/Lightbulb.svg for the time being.

mbeacom · 2018-05-23T15:48:45Z

@SaptakS As we discussed previously, I think storing the preference in the DB is a solid choice, so we can ensure persistence regardless of where the user is browsing from.

If we wanted to offload the check for this and avoid the query in most cases, we could store it in the DB once they opt in to Don't Show Again and local storage, only querying for that preference data if the local storage key doesn't exist. Anyone have strong opinions on this?

PixelantDesign · 2018-05-24T16:57:22Z

Looking good on the quick start!

Please update text: More funding tips --> See Developer Guide
Set tracking to zero on headers
Take body copy to the next size

Funder Form

Gas section is missing! Yikes
add some space above creator details

Thanks!

SaptakS · 2018-05-28T11:52:59Z

@PixelantDesign Done!

thelostone-mc · 2018-05-28T20:19:38Z

app/dashboard/templates/quickstart.html

-            Wait for developers across the world to discover your bounty and
-            start working on your issue.
-            {% endblocktrans %}
+            {% trans "Once confirmed on blockchain, your bounty is posted to Gitcoin! Wait for developers across the world to discover your bounty and start working on your issue." %}


@SaptakS Wanna break this up into multiple lines? Avoids horizontal scrolling 😅

I had this broken but then it was causing problem with {% trans. Instead of rendering, it was showing {% trans as normal text.

mbeacom · 2018-05-29T14:58:41Z

app/app/urls.py

@@ -73,6 +73,7 @@
    url(r'^explorer/?', dashboard.views.dashboard, name='explorer'),

    # action URLs
+    url(r'^bounty/quickstart/?', dashboard.views.quickstart, name='quickstart'),


Moving forward, can we use re_path and path for new urls?

mbeacom

lgtm

PixelantDesign

looked good to me

This reverts commit 22e5b36.

mbeacom added frontend This needs frontend expertise. in progress bounties labels Apr 30, 2018

SaptakS added 5 commits May 5, 2018 13:41

Quickstart: Images needed for quickstart page

fb250de

Quickstart: Frontend and routing implementation done

50f48e5

Quckstart: JS actions on various links added

a7b6d7d

Quickstart: Dont show implementation done

ba72b82

Funder Flow: Clean forms and put labels

ce710e6

SaptakS force-pushed the feature/quickstart-screen branch from ce35d93 to ce710e6 Compare May 8, 2018 06:19

stickler-ci reviewed May 8, 2018

View reviewed changes

SaptakS force-pushed the feature/quickstart-screen branch 2 times, most recently from c4414e1 to 6804829 Compare May 8, 2018 09:45

Merge branch 'master' into feature/quickstart-screen

7c2dd8b

SaptakS force-pushed the feature/quickstart-screen branch from 6804829 to 7c2dd8b Compare May 9, 2018 07:41

SaptakS added 3 commits May 10, 2018 13:38

Funder Flow: Increase width of the funder form

a9f1a83

Quickstart: Add video play icon

11b2efa

Merge branch 'master' into feature/quickstart-screen

42beea2

SaptakS force-pushed the feature/quickstart-screen branch from dd60f0e to 42beea2 Compare May 10, 2018 09:50

vs77bb mentioned this pull request May 10, 2018

CONTRIBUTOR WORKFLOW EPIC #1131

Closed

PixelantDesign mentioned this pull request May 10, 2018

FUNDER WORKFLOW EPIC #1136

Closed

Merge branch 'master' into feature/quickstart-screen

729a05d

Funder flow: Correct bulb color and improve content

03f38dd

SaptakS added 2 commits May 23, 2018 16:09

Quickstart: i18nize the page

30c913c

Merge branch 'master' into feature/quickstart-screen

547bf91

mbeacom reviewed May 23, 2018

View reviewed changes

mbeacom added 2 commits May 23, 2018 09:49

Updates per my comments

17c6e20

Fix trans block

94fceb8

ghost assigned mbeacom May 23, 2018

Quickstart updates in styling

b28e8bc

ghost assigned SaptakS May 28, 2018

Adds gas settings to the funder form

0133bd3

thelostone-mc reviewed May 28, 2018

View reviewed changes

mbeacom added needs review and removed in progress labels May 29, 2018

mbeacom changed the title ~~WIP: Quickstart screen for bounty creation flow~~ Quickstart screen for bounty creation flow May 29, 2018

Merge branch 'master' into pr/1029

44fb824

mbeacom previously approved these changes May 29, 2018

View reviewed changes

Adjust urls to use new methods

86bc240

mbeacom dismissed their stale review via 86bc240 May 29, 2018 15:05

mbeacom approved these changes May 29, 2018

View reviewed changes

mbeacom merged commit 22e5b36 into gitcoinco:master May 29, 2018

ghost removed the needs review label May 29, 2018

PixelantDesign reviewed May 29, 2018

View reviewed changes

mbeacom added a commit that referenced this pull request May 29, 2018

Revert "Quickstart screen for bounty creation flow (#1029)"

34586b0

This reverts commit 22e5b36.

SaptakS mentioned this pull request May 29, 2018

Quickstart PR with corrected redirect #1308

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quickstart screen for bounty creation flow #1029

Quickstart screen for bounty creation flow #1029

SaptakS commented Apr 30, 2018 •

edited

Loading

SaptakS commented Apr 30, 2018

thelostone-mc commented Apr 30, 2018 •

edited

Loading

SaptakS commented May 1, 2018

SaptakS commented May 1, 2018

thelostone-mc commented May 1, 2018

codecov bot commented May 4, 2018 •

edited

Loading

stickler-ci May 8, 2018

thelostone-mc commented May 10, 2018 •

edited

Loading

mbeacom commented May 16, 2018

SaptakS commented May 23, 2018 •

edited

Loading

SaptakS commented May 23, 2018

mbeacom left a comment

mbeacom May 23, 2018

mbeacom May 23, 2018

mbeacom May 23, 2018

mbeacom May 23, 2018

mbeacom May 23, 2018

mbeacom May 23, 2018

mbeacom commented May 23, 2018

PixelantDesign commented May 24, 2018

SaptakS commented May 28, 2018

thelostone-mc May 28, 2018

SaptakS May 28, 2018

mbeacom May 29, 2018

mbeacom left a comment

PixelantDesign left a comment

		@@ -719,6 +719,17 @@ def bounty_details(request, ghuser='', ghrepo='', ghissue=0, stdbounties_id=None
		return TemplateResponse(request, 'bounty_details.html', params)



		def quickstart(request):

		@@ -710,6 +710,16 @@ def bounty_details(request, ghuser='', ghrepo='', ghissue=0, stdbounties_id=None
		return TemplateResponse(request, 'bounty_details.html', params)


		def quickstart(request):

Quickstart screen for bounty creation flow #1029

Quickstart screen for bounty creation flow #1029

Conversation

SaptakS commented Apr 30, 2018 • edited Loading

Description

Checklist

Affected core subsystem(s)

Testing

Refers/Fixes

SaptakS commented Apr 30, 2018

thelostone-mc commented Apr 30, 2018 • edited Loading

SaptakS commented May 1, 2018

SaptakS commented May 1, 2018

thelostone-mc commented May 1, 2018

codecov bot commented May 4, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

thelostone-mc commented May 10, 2018 • edited Loading

Part 1

Part 2

Part 3

Part 4

Part 5

Part 6

Part 7 - Mobile

mbeacom commented May 16, 2018

SaptakS commented May 23, 2018 • edited Loading

SaptakS commented May 23, 2018

mbeacom left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbeacom commented May 23, 2018

PixelantDesign commented May 24, 2018

SaptakS commented May 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbeacom left a comment

Choose a reason for hiding this comment

PixelantDesign left a comment

Choose a reason for hiding this comment

SaptakS commented Apr 30, 2018 •

edited

Loading

thelostone-mc commented Apr 30, 2018 •

edited

Loading

codecov bot commented May 4, 2018 •

edited

Loading

thelostone-mc commented May 10, 2018 •

edited

Loading

SaptakS commented May 23, 2018 •

edited

Loading