fix of issue #76 Overhaul leaderboards page design #91

ernaneluis · 2017-12-06T01:39:26Z

#76

Final layout in HTML/CSS

gitcoinco#76

thelostone-mc · 2017-12-06T02:24:42Z

@owocki I like the way this looks ^_^

@ernaneluis

what are your thought on extracting the css bit meant for the leaderboard, into an external file (lets say leaderboard.css rather than leaving it all within base.css ?
I get an list index out of range when my leaderboard is empty causing the page to throw an error.
PS: @owocki thoughts on having a custom error page rather than spitting out the error on the UI?

Error:

web_1  |     return leaderboard(request, '')
web_1  |   File "/code/app/marketing/views.py", line 214, in leaderboard
web_1  |     amount_max = LeaderboardRank.objects.filter(active=True, leaderboard=key).values_list('amount').annotate(Max('amount')).order_by('-amount')[0][0]
web_1  |   File "/usr/local/lib/python2.7/site-packages/django/db/models/query.py", line 289, in __getitem__
web_1  |     return list(qs)[0]
web_1  | IndexError: list index out of range
web_1  | [05/Dec/2017 19:18:04] "GET /leaderboard/all_all HTTP/1.1" 500 76808

Screenshot(s)

with your changes:

In contrast to how it is currently is in master:

owocki · 2017-12-06T03:07:13Z

@thelostone-mc try loading this sql file into your database to get a real leaderboard http://bits.owocki.com/450U3e0U1h0C/marketing_leaderboardrank.sql

owocki · 2017-12-06T03:08:09Z

to @thelostone-mc 's point though, the code should probably properly handle a leaderboard with no content on it though. it could just say 'no activity found for this time range'

owocki · 2017-12-06T03:09:05Z

app/assets/v2/css/base.css

+}
+
+#leaderboard .winner-content .winner-position-third  {
+    background-image: url('/static/v2/images/leaderboard-3.png');


can this be filled out dynamically? check out bounty.local_avatar_url

whoops i take this back. its the medal image

owocki · 2017-12-06T03:10:33Z

app/assets/v2/js/pages/leaderboard.js

+    var max = parseInt($(this).attr('aria-valuemax'))
+    var now = parseInt($(this).attr('aria-valuenow'))
+    var width = (now * 100) / max
+    console.log(width)


errand console.log!

owocki · 2017-12-06T03:10:45Z

app/assets/v2/js/pages/leaderboard.js

+    var width = (now * 100) / max
+    console.log(width)
+    $(this).css('width', width + '%')
+    // $(this).changeElementType('a'); // hack so that users can right click on the element


itd be nice if this was an anchor element so users could right click.

owocki · 2017-12-06T03:10:55Z

this looks really good. im excited!

thelostone-mc · 2017-12-06T03:38:09Z

app/assets/v2/css/base.css

+    background-image: url('/static/v2/images/leaderboard-3.png');
+}
+
+


Can we do away with the extra empty lines ?
same in leaderboard.html

- make css of leaderboard into another css file, file leaderboard.css created - removed empty lines - make rows right clickable

ernaneluis · 2017-12-06T18:38:44Z

suggestions were done :D

owocki · 2017-12-06T19:27:49Z

not sure what im doing wrong but this is what it looks like on my local http://bits.owocki.com/1C3g3W23383Z/Screen%20Shot%202017-12-06%20at%2012.27.44%20PM.png

owocki · 2017-12-06T19:29:33Z

tried incognito / with a cache refresh too..

ernaneluis · 2017-12-06T19:41:35Z

I using this to get the avatar:

<img class="img-fluid" src="{{podium_items.local_avatar_url}}" >

and podium_items came from

items = LeaderboardRank.objects.filter(active=True, leaderboard=key).order_by('-amount')

the error is not been able to get the avatar:

what is the problem with this url http://localhost:8000/funding/avatar?repo=https://github.com/dylanjw&v=3 @owocki ?

if you access this url you going to get

any reason why this?

owocki · 2017-12-06T19:44:05Z

@ernaneluis yopu need to fill out the GITHUB_CLIENT_ID and other GITHUB_* keys in your local_settings.py

owocki · 2017-12-06T19:44:35Z

though this does not seem to be the issue with my local... theres something wacky about the layout on mine

ernaneluis · 2017-12-06T19:45:22Z

@owocki can you show your console? to see if they are downlaoding the image?

owocki · 2017-12-06T21:34:41Z

console

http://bits.owocki.com/3A1K3d1i350o/Screen%20Shot%202017-12-06%20at%202.34.02%20PM.png

network tab is all 200 statsu codes

page 1
http://bits.owocki.com/1J2C003M0U1u/Screen%20Shot%202017-12-06%20at%202.34.21%20PM.png

page 2 http://bits.owocki.com/461y342n2V0M/Screen%20Shot%202017-12-06%20at%202.34.32%20PM.png

ernaneluis · 2017-12-07T01:16:22Z

@owocki can you have a look now. I made new commit.

owocki · 2017-12-07T01:32:28Z

😍 😍 😍 omg looks amazing

owocki · 2017-12-07T01:33:11Z

app/assets/v2/js/pages/leaderboard.js

@@ -1,10 +1,17 @@
-$(document).ready(function(){
-    $(".leaderboard_entry").each(function(){
-        $(this).changeElementType('a'); // hack so that users can right click on the element


i'd still like for these items to be a tags because that means that a user can right click on them

is clickable but not using Anchor tag. It would need a lot of css fix in order to use the <a> tag. See comment bellow.

ok, ill make the change after merge

owocki · 2017-12-07T01:33:40Z

app/assets/v2/css/leaderboard.css

+#leaderboard .leaderboard_entry .position{
+    color:lightgray;
+ }
+ /* #leaderboard .leaderboard_entry tr{


can u delete this dead code

owocki · 2017-12-07T01:34:32Z

anything we can do about the mobile view for the leaderboard?

http://bits.owocki.com/3H0E1F3f410v/Screen%20Shot%202017-12-06%20at%206.34.01%20PM.png

many of these issues can be fixed with just decreasing the font size

owocki · 2017-12-07T01:38:28Z

app/retail/templates/leaderboard.html

        <div class="col body">
            <div class="container-fluid" id="leaderboard">
            {% include 'shared/bounty_def.html' %}
-                <div class="row mt-0 ml-1 pt-1 pl-1">
-                    <select id="key">


i think well likely want to hide the 'key' field and just standardize on the monthly leaderboard for now. anyone disagree?

owocki · 2017-12-07T01:39:13Z

app/retail/templates/leaderboard.html

@@ -14,46 +15,98 @@
    <div class="row no-gutter  text-uppercase">
        <div class="col-3" style="background: #eee; ">
            {% include 'shared/current_balance.html' %}
-            {% include 'shared/sidebar_search.html' %}
+            <!-- {% include 'shared/sidebar_search.html' %} -->


i think this module should still be on the page to keep parity with the other pages, no?

I dont know, it will show a search side bar, which might be misleading to the user.

owocki · 2017-12-07T01:40:25Z

something on this PR broke the profile pages. not sure what it was -- maybe refactor'd CSS? http://bits.owocki.com/1V1k2E330y1M/Screen%20Shot%202017-12-06%20at%206.40.01%20PM.png

owocki · 2017-12-07T01:40:34Z

whoops accidental close

ernaneluis · 2017-12-07T10:15:26Z

app/assets/v2/js/pages/leaderboard.js

See here @owocki

now leaderboard css is only on the page leaderboard.html to avoid another pages conflict

ernaneluis · 2017-12-07T10:33:21Z

@owocki I think I might fix the profile page as well please have a look.

thelostone-mc · 2017-12-07T13:47:30Z

@ernaneluis sorry to be a pain but could we

do away with the extra white spaces like L30, L61
leave a space before { in css (this is quite a few places )
#leaderboard .leaderboard_entry { instead of #leaderboard .leaderboard_entry{

owocki · 2017-12-07T16:00:47Z

@owocki I think I might fix the profile page as well please have a look.

to generate a profile locally just go to profile/xxx where xxx is anygithub username. the view is smart enough to hit the github API to get the profile information

ernaneluis · 2017-12-07T16:20:48Z

but did you try it locally @owocki ?

owocki · 2017-12-07T16:27:34Z

@ernaneluis yes. for example, here is your profile generated locally http://bits.owocki.com/1W1X300Z3G0t/Screen%20Shot%202017-12-07%20at%209.27.21%20AM.png

ernaneluis · 2017-12-08T01:26:02Z

@owocki i meant the new commits on the leaderboard page, please check if is correct now in order to merge

owocki · 2017-12-08T16:42:45Z

looking now

owocki · 2017-12-08T16:45:13Z

the leaderboard page looks great locally, but something on the branch has caused a regression in the profile pages, for example profile/xxx

owocki · 2017-12-08T16:46:16Z

app/assets/v2/css/base.css

-    vertical-align: middle;
-    margin-top: 20px;
-}
-.profile_details li:nth-child(2n+0) .dot,


-.profile_details li:nth-child(2n+0) .dot,

this should not be removed

owocki · 2017-12-08T16:46:23Z

app/assets/v2/css/base.css

 }
-.profile_details li:nth-child(2n+1) .dot,


owocki · 2017-12-08T16:47:10Z

its a small fix. easier for me to just fix than continue trying to talk about it here. paying out bounty and merging now

owocki · 2017-12-08T16:59:27Z

https://gitcoin.co/leaderboard 🎉 @ernaneluis @thelostone-mc

ernaneluis · 2017-12-08T20:31:48Z

@owocki I committed a small fix to solve this problem

#99

fix of issue gitcoinco#76 Overhaul leaderboards page design

vote.html update

fix of issue gitcoinco#76 Overhaul leaderboards page design

8f6574b

gitcoinco#76

owocki reviewed Dec 6, 2017

View reviewed changes

thelostone-mc reviewed Dec 6, 2017

View reviewed changes

suggestions from the community:

ace49b2

- make css of leaderboard into another css file, file leaderboard.css created - removed empty lines - make rows right clickable

fixed images of the podium and column sizes of the table.

d931b98

owocki reviewed Dec 7, 2017

View reviewed changes

owocki closed this Dec 7, 2017

owocki reopened this Dec 7, 2017

ernaneluis commented Dec 7, 2017

View reviewed changes

app/assets/v2/js/pages/leaderboard.js

$('.clickable-row').click(function () {

Copy link

Contributor Author

ernaneluis Dec 7, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See here @owocki

ernaneluis added 3 commits December 7, 2017 11:17

removed not used css.

a482701

keep the sidebar

f3d0789

refactor leaderboard css

dbf9e0e

now leaderboard css is only on the page leaderboard.html to avoid another pages conflict

owocki reviewed Dec 8, 2017

View reviewed changes

owocki merged commit 62af2e0 into gitcoinco:master Dec 8, 2017

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

Merge pull request gitcoinco#91 from ernaneluis/new_leaderboard_layout

ca628d4

fix of issue gitcoinco#76 Overhaul leaderboards page design

owocki mentioned this pull request Sep 2, 2019

Add profile theme customization #5083

Closed

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

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

9c38bef

vote.html update

TravisSCode mentioned this pull request Sep 13, 2021

Gitc 394 polygon tx validation #9473

Closed

		background-image: url('/static/v2/images/leaderboard-3.png');
		}

fix of issue #76 Overhaul leaderboards page design #91

fix of issue #76 Overhaul leaderboards page design #91

Conversation

ernaneluis commented Dec 6, 2017

thelostone-mc commented Dec 6, 2017 • edited Loading

owocki commented Dec 6, 2017

owocki commented Dec 6, 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

owocki commented Dec 6, 2017

Choose a reason for hiding this comment

ernaneluis commented Dec 6, 2017

owocki commented Dec 6, 2017

owocki commented Dec 6, 2017

ernaneluis commented Dec 6, 2017 • edited Loading

owocki commented Dec 6, 2017

owocki commented Dec 6, 2017

ernaneluis commented Dec 6, 2017 • edited Loading

owocki commented Dec 6, 2017

ernaneluis commented Dec 7, 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

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

owocki commented Dec 7, 2017

owocki commented Dec 7, 2017

Choose a reason for hiding this comment

ernaneluis commented Dec 7, 2017

thelostone-mc commented Dec 7, 2017

owocki commented Dec 7, 2017

ernaneluis commented Dec 7, 2017

owocki commented Dec 7, 2017

ernaneluis commented Dec 8, 2017

owocki commented Dec 8, 2017

owocki commented Dec 8, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

owocki commented Dec 8, 2017 • edited Loading

owocki commented Dec 8, 2017

ernaneluis commented Dec 8, 2017

thelostone-mc commented Dec 6, 2017 •

edited

Loading

ernaneluis commented Dec 6, 2017 •

edited

Loading

ernaneluis commented Dec 6, 2017 •

edited

Loading

owocki commented Dec 8, 2017 •

edited

Loading

owocki commented Dec 8, 2017 •

edited

Loading