testimonial: added carousel on landing page #80

thelostone-mc · 2017-12-04T20:46:13Z

Changes:

created a fadein-fadeout carousel for testimonial on the landing page
populated with dummy content
responsive design
used font-awesome icons and shapes instead of the images

Refs: #63

@tra38 I rewrote the code base using yours as a starting point. Any thoughts on this approach ?
@owocki Also , the design laid out by @taurean was pretty sweet , but I decided to use font-awesome icons and basic shapes to recreate the design.

Could either of you spare a few min and make sure I've gotten everything right ?

Reason :

images are heavier
resizing divs and svg icons is a lot easier that images and they don't loose clarity

files added:

carousel.css
carousel.js
testimonials.js

files changed:

index.html
footer_scripts.html
head.html

owocki · 2017-12-05T03:23:12Z

#69
#80
#79

@tra38 @ethikz @thelostone-mc -- im thrilled that everyones excited about this and that we've got working testimonial modules, but i wish we had all coordinated better. it makes me sad we can't use all three 3 PRs. but i pulled down all 3 codebases and all 3 work, so that's pretty cool!

ill own not having a better claim tool. that's on gitcoin.

so... where do we go from here? whats best for the repo?

owocki · 2017-12-05T03:36:36Z

screenshots for @taurean

#69
http://bits.owocki.com/2G1P0p2q060k/Screen%20Shot%202017-12-04%20at%208.35.48%20PM.png

#80
http://bits.owocki.com/222T140w023X/Screen%20Shot%202017-12-04%20at%208.36.11%20PM.png

#79
http://bits.owocki.com/0o2f2z2K2c0m/Screen%20Shot%202017-12-04%20at%208.36.28%20PM.png

taurean · 2017-12-05T04:43:57Z

looks like #80 is the closest to the mockup at the moment. the prev/next controls still need to be centered properly within the circle. The icons surrounded the user-photo is lacking that layered effect with the illustrative elements but that might be because that place-holder image is transparent? In either case, there should probably be a background color set to the image to mitigate that issue. The cited name should also be in caps. Thanks everyone!

tra38 · 2017-12-05T04:51:56Z

so... where do we go from here? whats best for the repo?

Since open source is built on collaboration, it would seem the best way of handling this scenario is to merge all the best ideas from the different PRs into a single PR to be merged into master. All people involved will share in the bounty, based on how much contribution each person did to the overall task.

I'm perfectly fine with @thelostone-mc rewriting my codebase. There's some features in the old codebase that I want to port over to the new one (such as allowing programmers to change slide timings), mostly by adding commits to this PR. Would that be okay with you, @thelostone-mc?

thelostone-mc · 2017-12-05T07:28:46Z

@taurean

Ah I didn't notice the mis-alignment on my machine. That looks ugly, will fix that
Yeah the layered effect isn't visible cause the avatar has a transparent background.I tested it out with a photo with a solid background, no issues there. We could set an overlay color, but I'm not sure if css has the ability to detect if the background is transparent and adding a default overlay on every photo might be a bit of an overkill. Any thoughts on this @owocki , @tra38 ?
will change the cited name to be in caps

@tra38 By all means -> port it over via a commit :D (For now, one has to edit this line here to change the timings )

taurean · 2017-12-05T07:35:11Z

awesome @thelostone-mc. re: background image, I don't think you need to detect transparency first. setting a background color of #FAFAFA or something to img or the parent containing img and making sure it doesn't peak out underneath opaque images should work just fine. I can whip a codepen example up if thats helpful to illustrate what I mean.

thelostone-mc · 2017-12-05T08:30:50Z

@taurean

Setting the background to #FAFAFA

Setting the background to #FFF looks neater but then the layering effect gets compromised to an extent (Seems like the best option )

Setting the background of the parent to #FAFAFA looks perfect but it messes up when you have a photo with a non-transparent bg. (Ignore the positions of the circles for now )

Good:

Bad:

PS: Is the font-size for the cited name alright or does it need to be increased ?

owocki · 2017-12-05T13:34:03Z

thanks for working together everyone.. im thrilled that you're working together in the spirit of open source :)

let me figure out what to do about the bounty payout here while you all iron out the PR.

owocki · 2017-12-06T04:01:46Z

@ethikz what do you think of this approach?

tra38 · 2017-12-06T05:14:05Z

@thelostone-mc, here's my commit with my suggested changes to your code. It's in a separate branch since I don't know how to push code onto your branch. Let me know how you like it.

taurean · 2017-12-06T05:36:21Z

@thelostone-mc here is an example codepen of what I'm talking about, there shouldn't be any additional padding causing the issue in the screenshot I don't think. re: font-size I can't inspect that image to check but the computed size that's rendered for the block quote is 20px and the cited name is 16px. Both the block quote and cited name should be a medium weight so probably like font-weight: 600 if I had to guess?

taurean · 2017-12-06T05:38:20Z

@owocki do you happen to know if the testimonial images will be photos or illustrations? Maybe we're thinking too much about setting fallbacks if we know the exact images we're building for.

thelostone-mc · 2017-12-06T09:00:31Z

@tra38 Gimme a day! Let me fix the css up a bit and squash the commit, then just send out a PR to my branch , i'll merge it and it would be reflected here ( sound good ? )

@taurean so basically the first photo I'd posted ^_^ will do

owocki · 2017-12-06T16:28:28Z

@taurean i'm still gathering the images. do you think gitcoin style illustrations (like my avatar) would look good? if so, we could probably get them hooked up

thelostone-mc · 2017-12-06T17:10:05Z

@tra38 I''ve made the changes (feel free to double check ^_^ )
Could you send out the PR ? I'll merge it and we'll get this PR set in motion :D

tra38 · 2017-12-06T22:32:21Z

@thelostone-mc: PR sent! 👍

- created a fadein-fadeout carousel for testimonial on the landing page - populated with dummy content - responsive design - used font-awesome icons and shapes instead of the images Refs: gitcoinco#63

… when slides change Allowing users to control slideDuration via views.py makes it easy to change the duration of each slide without having to affect the actual JS logic. Resetting the timer whenever the slide changes fixes a bug that can occur whenever the slide auto-advances while the user interacts with the carousel.

thelostone-mc · 2017-12-06T22:48:30Z

@owocki I guess we are done from our end ^_^

owocki · 2017-12-06T22:50:55Z

sawwwweetttt.. rdy for me to test then? thelostone-mc:testimonial is the branch i want to test?

thelostone-mc · 2017-12-06T22:55:12Z

@owocki That's the one \m/

owocki · 2017-12-07T02:39:08Z

pulled it down to QA.

looks very nice. good work yall!
can the cursor turn to a opinter when you hover over the left/right arrows?
responsive works very well on chrome and on safari!

woo hoo!

owocki · 2017-12-07T02:39:37Z

app/assets/v2/css/carousel.css

+}
+
+.carousel .avatar .circle-small {
+	position: relative;


inconsistent tab / spacing on this file. can we clean that up real quick?

Haha getting that done !! Thanks for pointing that out ^_^

still looks inconsistent to me

owocki · 2017-12-07T02:40:54Z

app/retail/views.py

@@ -26,7 +26,14 @@


 def index(request):
+    slides = [


i love that this is abstracted out of the template :)

credits go to @tra38 :D

owocki · 2017-12-07T02:41:06Z

app/retail/views.py

    context = {
+        'slides': slides,
+        'slideDuration': 6000,


Yup! we could rename it to slideDurationInMs or leave a comment -> take your pick

owocki · 2017-12-07T02:41:39Z

just left a few comments. then i think this is rdy to merge!

taurean · 2017-12-07T02:45:02Z

chiming in really quick, looks like the controls for navigating to other testimonials are divs, ideally these should be buttons for accessibility reasons.

thelostone-mc · 2017-12-07T05:02:51Z

@owocki

re-indented the css file
not sure if i should rename the timer variable to slideDurationInMs

can the cursor turn to a opinter when you hover over the left/right arrows?

Yup!

responsive works very well on chrome and on safari!

and firefox \m/

@taurean I meant to do that. Slipped my mind! Fixed ^_^

ethikz · 2017-12-07T17:32:29Z

@owocki Sorry I didn't get any notification 😞

What approach are you referring to?

owocki · 2017-12-07T18:00:17Z

What approach are you referring to?
@ethikz
the one on this PR. there was a mix up and multiple people workedo n this. see => #80 (comment)

- carousel control are now buttons - mouse turns to pointer on hover over control - re-indented code

thelostone-mc · 2017-12-07T18:23:37Z

@owocki changes done ^_^

ethikz · 2017-12-07T21:30:51Z

@owocki Oh...yea I saw. Whichever one is better I'd use. I threw it together quickly so maybe @thelostone-mc was able to provide a better solution

owocki · 2017-12-07T22:08:50Z

i have a few testimonials sourced and i am just circling back with everyone to make sure they're double extra secret sure they're okay with being quoted publicly. i hope to have that content added to the PR by EOW

owocki · 2017-12-08T18:52:39Z

ok ive got the testimonials sourced. testing for merge now

owocki · 2017-12-08T19:37:33Z

https://gitcoin.co <= hows it look

heres the commit for adding the real testimonials 729710f

gitcoinbot · 2017-12-08T20:42:10Z

⚡️ A tip worth 0.075 ETH has been granted to @tra38 for this issue from Kevin Owocki. ⚡️

Nice work @tra38, check your email for further instructions. | Send a Tip

gitcoinbot · 2017-12-08T20:43:03Z

⚡️ A tip worth 0.075 ETH has been granted to @ethikz for this issue from Kevin Owocki. ⚡️

Nice work @ethikz, check your email for further instructions. | Send a Tip

owocki · 2017-12-08T20:43:51Z

thanks yall :)

ethikz · 2017-12-08T21:00:22Z

@owocki Looks good! Minor issue in the nav, arrows aren't exactly centered but other than that works and looks great

gitcoinbot · 2017-12-08T21:19:46Z

⚡️ A tip worth 0.075 ETH has been granted to @thelostone-mc for this issue from Kevin Owocki. ⚡️

Nice work @thelostone-mc, check your email for further instructions. | Send a Tip

testimonial: added carousel on landing page

clean up quest code

owocki mentioned this pull request Dec 6, 2017

Testimonials #69

Closed

thelostone-mc force-pushed the testimonial branch from 413839c to 3046785 Compare December 6, 2017 17:08

testimonial: added carousel

a3561f4

- created a fadein-fadeout carousel for testimonial on the landing page - populated with dummy content - responsive design - used font-awesome icons and shapes instead of the images Refs: gitcoinco#63

thelostone-mc force-pushed the testimonial branch from 3046785 to a3561f4 Compare December 6, 2017 22:34

owocki reviewed Dec 7, 2017

View reviewed changes

owocki mentioned this pull request Dec 7, 2017

feat(slider): add generic content slider #79

Closed

thelostone-mc force-pushed the testimonial branch from 18310d7 to 91517c0 Compare December 7, 2017 04:57

testimonial: incorporated feedback

f9145ac

- carousel control are now buttons - mouse turns to pointer on hover over control - re-indented code

thelostone-mc force-pushed the testimonial branch from 91517c0 to f9145ac Compare December 7, 2017 18:23

owocki merged commit 7f0a990 into gitcoinco:master Dec 8, 2017

thelostone-mc deleted the testimonial branch December 11, 2017 21:01

ethikz pushed a commit to ethikz/web that referenced this pull request Jan 24, 2018

Merge pull request gitcoinco#80 from thelostone-mc/testimonial

bd0fd8f

testimonial: added carousel on landing page

owocki pushed a commit that referenced this pull request Apr 30, 2021

Merge pull request #80 from nopslip/richard-demo-implementation

6880209

clean up quest code

testimonial: added carousel on landing page #80

testimonial: added carousel on landing page #80

Conversation

thelostone-mc commented Dec 4, 2017

owocki commented Dec 5, 2017

owocki commented Dec 5, 2017

taurean commented Dec 5, 2017

tra38 commented Dec 5, 2017

thelostone-mc commented Dec 5, 2017 • edited Loading

taurean commented Dec 5, 2017

thelostone-mc commented Dec 5, 2017

owocki commented Dec 5, 2017

owocki commented Dec 6, 2017

tra38 commented Dec 6, 2017 • edited Loading

taurean commented Dec 6, 2017

taurean commented Dec 6, 2017

thelostone-mc commented Dec 6, 2017

owocki commented Dec 6, 2017 • edited Loading

thelostone-mc commented Dec 6, 2017

tra38 commented Dec 6, 2017

thelostone-mc commented Dec 6, 2017

owocki commented Dec 6, 2017

thelostone-mc commented Dec 6, 2017

owocki commented Dec 7, 2017

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

ms

Choose a reason for hiding this comment

Choose a reason for hiding this comment

owocki commented Dec 7, 2017

taurean commented Dec 7, 2017

thelostone-mc commented Dec 7, 2017

ethikz commented Dec 7, 2017

owocki commented Dec 7, 2017

thelostone-mc commented Dec 7, 2017

ethikz commented Dec 7, 2017

owocki commented Dec 7, 2017

owocki commented Dec 8, 2017

owocki commented Dec 8, 2017

gitcoinbot commented Dec 8, 2017

gitcoinbot commented Dec 8, 2017

owocki commented Dec 8, 2017

ethikz commented Dec 8, 2017

gitcoinbot commented Dec 8, 2017

thelostone-mc commented Dec 5, 2017 •

edited

Loading

tra38 commented Dec 6, 2017 •

edited

Loading

owocki commented Dec 6, 2017 •

edited

Loading