1244 how it works #1501

darkdarkdragon · 2018-06-19T01:39:04Z

WIP - finished one page of #1244

thelostone-mc · 2018-06-19T11:17:43Z

app/app/urls.py

@@ -175,6 +175,8 @@
    url(r'^extension/chrome?', retail.views.browser_extension_chrome, name='browser_extension_chrome'),
    url(r'^extension/firefox?', retail.views.browser_extension_firefox, name='browser_extension_firefox'),
    url(r'^extension/?', retail.views.browser_extension_chrome, name='browser_extension'),
+    url(r'^how_it_works/funder', retail.views.how_it_works_funder, name='how_it_works_funder'),


rename -> /funder/

replace url with path (just check in this file to know how)

thelostone-mc · 2018-06-19T11:17:50Z

app/app/urls.py

@@ -175,6 +175,8 @@
    url(r'^extension/chrome?', retail.views.browser_extension_chrome, name='browser_extension_chrome'),
    url(r'^extension/firefox?', retail.views.browser_extension_firefox, name='browser_extension_firefox'),
    url(r'^extension/?', retail.views.browser_extension_chrome, name='browser_extension'),
+    url(r'^how_it_works/funder', retail.views.how_it_works_funder, name='how_it_works_funder'),
+    url(r'^how_it_works/contributor', retail.views.how_it_works_contributor, name='how_it_works_contributor'),


rename -> /contributor/

replace url with path

thelostone-mc · 2018-06-19T11:19:52Z

app/retail/templates/how_it_works_contributor.html

@@ -0,0 +1,134 @@
+{% comment %} Copyright (C) 2017 Gitcoin Core This program is free software: you can redistribute it and/or modify it under


Could this be reindented?

thelostone-mc · 2018-06-19T11:24:18Z

app/retail/templates/how_it_works_contributor.html

+          </div>
+        </div>
+
+        <div class="testimonial-container w-100" style="height: 7px;">


Could we rename it to and move the CSS to it's respective file?

thelostone-mc · 2018-06-19T11:34:40Z

I know the image is text aligned center but it looks like it isn't cause of the shadow in the image.
Hence move the image a lil towards the right

-left here

codecov · 2018-06-19T13:31:00Z

Codecov Report

Merging #1501 into master will increase coverage by <.01%.
The diff coverage is 33.33%.

@@            Coverage Diff             @@
##           master    #1501      +/-   ##
==========================================
+ Coverage   28.27%   28.27%   +<.01%     
==========================================
  Files         129      129              
  Lines        9520     9523       +3     
  Branches     1231     1231              
==========================================
+ Hits         2692     2693       +1     
- Misses       6730     6732       +2     
  Partials       98       98

Impacted Files	Coverage Δ
app/app/urls.py	`89.74% <ø> (ø)`	⬆️
app/retail/views.py	`39% <33.33%> (-0.13%)`	⬇️

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 d9829d8...b57022f. Read the comment docs.

mbeacom · 2018-06-19T13:32:14Z

app/retail/views.py

@@ -62,6 +62,22 @@ def index(request):
    return TemplateResponse(request, 'index.html', context)


+def how_it_works_funder(request):


We could make this one view and determine the display type based on the path.

mbeacom · 2018-06-19T13:35:18Z

app/app/urls.py

@@ -175,6 +175,8 @@
    url(r'^extension/chrome?', retail.views.browser_extension_chrome, name='browser_extension_chrome'),
    url(r'^extension/firefox?', retail.views.browser_extension_firefox, name='browser_extension_firefox'),
    url(r'^extension/?', retail.views.browser_extension_chrome, name='browser_extension'),
+    path(r'funder', retail.views.how_it_works_funder, name='how_it_works_funder'),


This will fail. If you're using r'', you'll want to switch this to re_path() - Otherwise, simply drop the r here.

Why this will fail?

@darkdarkdragon The docs example should shed some light on it

@thelostone-mc sorry, still don't understand. can you please point me to exact problem?

@mbeacom can you please explain what is the problem here?

mbeacom · 2018-06-19T13:36:15Z

app/retail/templates/how_it_works.html

+          <div class="col text-center text-white how-it-works-footer">
+            <div class="mt-4 contributors-cta-text">{% blocktrans %}For more details,
+              please see repo maintainer's guide or the
+              <a target="_blank" href="https://github.com/gitcoinco/web/blob/contributing/CONTRIBUTING.md">


We'll probably want to throw in rel="noopener noreferrer" here

stickler-ci · 2018-06-19T14:30:30Z

app/retail/views.py

@@ -61,6 +61,13 @@ def index(request):
    }
    return TemplateResponse(request, 'index.html', context)

+def how_it_works(request):


E302 expected 2 blank lines, found 1

thelostone-mc · 2018-06-20T15:53:39Z

@mbeacom we need to think of better path for this than /funder/ & /contributor

@PixelantDesign I've attached the screenshots
UI looks alright from my end + mobile + tablet view == 👍

Ps: @darkdarkdragon @PixelantDesign

Not a big fan of of the line going on top of the text.
One fix could be give white background to text and push it on top of the line using z-index

PixelantDesign

In the original design the icons are closer to the numbers and the bottom section where it says "In some cases"...Can we shrink the graphics by 30%? They seem a little large.

can we also make the gray vertical line a few px thinner?

Looking great!

darkdarkdragon · 2018-06-20T22:07:59Z

@thelostone-mc do you want it to look like this?:

darkdarkdragon · 2018-06-20T22:09:23Z

@PixelantDesign I've made icons close to the numbers

darkdarkdragon · 2018-06-21T16:00:08Z

darkdarkdragon · 2018-06-21T16:00:21Z

darkdarkdragon · 2018-06-21T16:01:22Z

thelostone-mc · 2018-06-21T21:25:21Z

Ah it's fine the way it is ! Thanks @darkdarkdragon ^_^

PixelantDesign · 2018-06-22T17:04:45Z

@darkdarkdragon could you update the CTAs right above the footer (both pages)?

Developer Guide should link to this:
https://docs.google.com/document/d/1S8BLKJF7J5RbrfFw-mX0iYcy4VSc6-a1aQXtKT_ta0Y/edit?usp=sharing

Repo Maintainer Guide should link to this:
https://docs.google.com/document/d/1_U9IdDN8FIRMGAdLWCMl2BnqCTAv558QvyJiSWQfkbs/edit?usp=sharing

darkdarkdragon · 2018-06-22T17:10:13Z

@PixelantDesign no problem, will do in half an hour

darkdarkdragon · 2018-06-22T17:39:02Z

@PixelantDesign done

How it Works / Contributor page finished

bottom images re-exported from sketch

Added links to Developer's guide and Maintainer's guide

- reused existing css class - fixed line overlappint content - update URL -> /how/funder & /how/contributor

thelostone-mc

LGTM !

@mbeacom I updated the url to keep it similiar to onboard (/onboard/contributor)

/funder -> /how/funder
/contributor -> /how/contributor

SaptakS

LGTM

All comments have been addressed ^_^

thelostone-mc reviewed Jun 19, 2018

View reviewed changes

mbeacom previously requested changes Jun 19, 2018

View reviewed changes

stickler-ci reviewed Jun 19, 2018

View reviewed changes

gitcoinbot mentioned this pull request Jun 19, 2018

BUILD: HOW IT WORKS #1244

Closed

thelostone-mc requested a review from PixelantDesign June 20, 2018 15:54

PixelantDesign reviewed Jun 20, 2018

View reviewed changes

darkdarkdragon added 9 commits June 23, 2018 09:39

gitcoinco#1244 How it Work WIP

023e6e4

gitcoinco#1244 - WIP

569ffd0

How it Works / Contributor page finished

gitcoinco#1244 How it Works - finished

68ad848

moved css for How It Works into separate file

3afaea1

join how it works views into one

d4ad2be

satisfy linter

3aa4db8

use usual strings

eee3a4a

vertical line thinner

2a9bc23

bottom images re-exported from sketch

text fixed

c485ffc

darkdarkdragon added 2 commits June 23, 2018 09:39

make "how it works" icons close to text

36aff93

Fixes gitcoinco#1244

e2a2186

Added links to Developer's guide and Maintainer's guide

thelostone-mc force-pushed the 1244_how_it_works branch from 40c3e8f to e2a2186 Compare June 23, 2018 16:40

ghost assigned thelostone-mc Jun 23, 2018

ghost added the in progress label Jun 23, 2018

review: changes

b57022f

- reused existing css class - fixed line overlappint content - update URL -> /how/funder & /how/contributor

thelostone-mc force-pushed the 1244_how_it_works branch from 64a6098 to b57022f Compare June 23, 2018 17:28

thelostone-mc approved these changes Jun 23, 2018

View reviewed changes

SaptakS approved these changes Jun 24, 2018

View reviewed changes

thelostone-mc merged commit a8036b1 into gitcoinco:master Jun 25, 2018

ghost removed the in progress label Jun 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1244 how it works #1501

1244 how it works #1501

darkdarkdragon commented Jun 19, 2018

thelostone-mc Jun 19, 2018

thelostone-mc Jun 19, 2018 •

edited

Loading

thelostone-mc Jun 19, 2018

thelostone-mc Jun 19, 2018

thelostone-mc Jun 19, 2018

thelostone-mc Jun 19, 2018 •

edited

Loading

thelostone-mc commented Jun 19, 2018

codecov bot commented Jun 19, 2018 •

edited

Loading

mbeacom Jun 19, 2018

mbeacom Jun 19, 2018

darkdarkdragon Jun 19, 2018

thelostone-mc Jun 19, 2018

darkdarkdragon Jun 19, 2018

darkdarkdragon Jun 19, 2018

mbeacom Jun 19, 2018

stickler-ci Jun 19, 2018

thelostone-mc commented Jun 20, 2018 •

edited

Loading

PixelantDesign left a comment •

edited

Loading

darkdarkdragon commented Jun 20, 2018

darkdarkdragon commented Jun 20, 2018

darkdarkdragon commented Jun 21, 2018

darkdarkdragon commented Jun 21, 2018

darkdarkdragon commented Jun 21, 2018

thelostone-mc commented Jun 21, 2018

PixelantDesign commented Jun 22, 2018 •

edited

Loading

darkdarkdragon commented Jun 22, 2018 •

edited

Loading

darkdarkdragon commented Jun 22, 2018

thelostone-mc left a comment

SaptakS left a comment

		@@ -0,0 +1,134 @@
		{% comment %} Copyright (C) 2017 Gitcoin Core This program is free software: you can redistribute it and/or modify it under

		@@ -62,6 +62,22 @@ def index(request):
		return TemplateResponse(request, 'index.html', context)


		def how_it_works_funder(request):

1244 how it works #1501

1244 how it works #1501

Conversation

darkdarkdragon commented Jun 19, 2018

Choose a reason for hiding this comment

thelostone-mc Jun 19, 2018 • edited Loading

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

thelostone-mc Jun 19, 2018 • edited Loading

Choose a reason for hiding this comment

thelostone-mc commented Jun 19, 2018

codecov bot commented Jun 19, 2018 • edited Loading

Codecov Report

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

Choose a reason for hiding this comment

thelostone-mc commented Jun 20, 2018 • edited Loading

PixelantDesign left a comment • edited Loading

Choose a reason for hiding this comment

darkdarkdragon commented Jun 20, 2018

darkdarkdragon commented Jun 20, 2018

darkdarkdragon commented Jun 21, 2018

darkdarkdragon commented Jun 21, 2018

darkdarkdragon commented Jun 21, 2018

thelostone-mc commented Jun 21, 2018

PixelantDesign commented Jun 22, 2018 • edited Loading

darkdarkdragon commented Jun 22, 2018 • edited Loading

darkdarkdragon commented Jun 22, 2018

thelostone-mc left a comment

Choose a reason for hiding this comment

SaptakS left a comment

Choose a reason for hiding this comment

thelostone-mc Jun 19, 2018 •

edited

Loading

thelostone-mc Jun 19, 2018 •

edited

Loading

codecov bot commented Jun 19, 2018 •

edited

Loading

thelostone-mc commented Jun 20, 2018 •

edited

Loading

PixelantDesign left a comment •

edited

Loading

PixelantDesign commented Jun 22, 2018 •

edited

Loading

darkdarkdragon commented Jun 22, 2018 •

edited

Loading