Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table display issue on Tag Contributor pages #7817

Closed
ebarry opened this issue Apr 14, 2020 · 37 comments · Fixed by #8021
Closed

Table display issue on Tag Contributor pages #7817

ebarry opened this issue Apr 14, 2020 · 37 comments · Fixed by #8021
Assignees
Labels
bug the issue is regarding one of our programs which faces problems when a certain task is executed design issue requires more design work and discussion (i.e. mockups and sketches) help wanted requires help by anyone willing to contribute HTML

Comments

@ebarry
Copy link
Member

ebarry commented Apr 14, 2020

Please describe the problem (or idea)

There are a couple small display issues on Tag Contributor pages* that if fixed would entirely upgrade the user experience of someone searching on Public Lab for people researching topics that are also of interest to you.

*Tag Contributor pages have the URL structure: https://publiclab.org/contributors/foo , where foo represents a tag.

What happened just before the problem occurred?

I was browsing the evidence tag via https://publiclab.org/tag/evidence and wanted to see who contributed this type of content. I clicked on "23 contributors" -- see screenshot below of where this link is on the Tag Page:
Screen Shot 2020-04-14 at 2 02 47 PM

What did you expect to see that you didn't?

The link brought me to https://publiclab.org/contributors/evidence , which is great. However, the layout on this page has a couple issues:

  1. Both columns in the two column table are too narrow for the content they contain and for their header labels. The column headers are labelled "People who've posted" and "Notes". "People who've posted" breaks onto two lines. The content in Notes is forced to break onto two lines even though it contains only 7 characters.
  2. There is a third column which only appears once the user scrolls down to the bottom row of the first two columns. Then this third column appears at right, labelled "People who are following". This column lacks content.

See gif below:
contributors-display

Please show us where to look

Tag Contributor pages such as https://publiclab.org/contributors/evidence

There are some closed issues related to this page which can be seen at #993 (create this type of page), #2444 and #6675 (counting the number of contributors correctly)

What's your PublicLab.org username?

This can help us diagnose the issue:

liz

@ebarry ebarry added the bug the issue is regarding one of our programs which faces problems when a certain task is executed label Apr 14, 2020
@jywarren jywarren added design issue requires more design work and discussion (i.e. mockups and sketches) help wanted requires help by anyone willing to contribute HTML labels Apr 14, 2020
@jywarren
Copy link
Member

I believe the lines of code governing this page are here!

<table class="table">
<tr>
<th style="width:75%;"><%= translation('tag.contributors.people_who\'ve_posted') %></th>
<th><%= translation('tag.contributors.notes') %></th>
</tr>
<% if @users %>
<% @users.each do |user| %>
<tr class="users-row">
<td><a href='/profile/<%= user.name %>'><i class="fa fa-user"></i> <%= user.name %></a></td>
<td><a href='/tag/<%= params[:id] %>/author/<%= user.name %>'><%= translation('tag.contributors.notes') %> &raquo;</a></td>
</tr>
<% end %>
<% end %>
</table>
</div>
<div class="col-md-6" style="display: inline-table; position:absolute">
<table class="table">
<tr>
<th> <%= translation('tag.contributors.people_who_are_following') %> </th>
</tr>
<% Tag.followers(params[:id]) && Tag.followers(params[:id]).each do |follower| %>
<tr class="followers-row">
<td><a href='/profile/<%= follower.name %>'><i class="fa fa-user-o"></i> <%= follower.name %></a></td>
</tr>
<% end %>
</table>

@sanchibansal340
Copy link

Is this issue open?

@ebarry
Copy link
Member Author

ebarry commented Apr 20, 2020

Yes, thank you, this issue is open!

@sanchibansal340
Copy link

When I opened the site, it is not appearing as show in the video

@jywarren
Copy link
Member

@sanchibansal340
Copy link

https://drive.google.com/file/d/1QGaSavgEuES-I-faI7-ozNSaiI4MGIZT/view?usp=drivesdk

It's showing like in both my laptop and phone. Can you please check if you can view the video?
Thanks

@ebarry
Copy link
Member Author

ebarry commented Apr 28, 2020

Thank you @sanchibansal340 -- i agree with you. I see that your video shows that the display for https://publiclab.org/contributors/water-quality is working properly for you.

It is looking even worse for me, at least at the current width our screen is set to.

Screen Shot 2020-04-28 at 11 44 46 AM

@sanchibansal340
Copy link

Okay I will work on it

@ebarry
Copy link
Member Author

ebarry commented Apr 28, 2020

Hi @sanchibansal340 , thank you for writing back so quickly after it took me 7 days to write back to you! i'm realizing through working with @jywarren and @emilyashley that there are several pieces to this issue. haha 😅

  1. The Header Text. I just made this issue to address it 🌞Remove text from /contributors page #7847

  2. The appearance of the table at different widths. I'll write more on this in a couple hours.

@sanchibansal340
Copy link

Okay @ebarry . It isn't a problem, I realize that you must be busy.

@ebarry
Copy link
Member Author

ebarry commented Apr 28, 2020

To address 2) the appearance of the table at different widths, luckily the solution already exists—however, it's only visible at less than ~750 pixels of screenwidth. Perhaps this is referred to as "Media Width", as in for phones?

Here's the table looking great, as @sanchibansal340 also showed in video above:

Screen Shot 2020-04-28 at 4 44 02 PM

Here's what's great about it:

  • there is no line break in the values of the Notes column. This is good because the height of all rows in the table can remain normal, instead of being exaggerated in height which you can see at greater screenwidths.
  • The table of "People who are following" lines up next to the first table of "People who have posted" and "Notes", with appropriate white space separating the grey horizontal lines of each table, conveying that these are separate tables. At other screen widths, this table's headers are pushed to the bottom, and values are not displayed.

Next Steps

  • Find code links for where the width of the screen summons different table layouts
  • Set the display of the table to be shown as it is at less than 750px width at all widths.

@ebarry ebarry assigned ebarry and sanchibansal340 and unassigned ebarry Apr 29, 2020
@ebarry
Copy link
Member Author

ebarry commented Apr 29, 2020

Hi SanchiBansal340, i did not mean to "assign myself" to fix the issue yesterday, I have assigned it to you if you would still like it. 🌳

@sanchibansal340
Copy link

Yes, I want to work on it. Sorry was a little busy due to exams. I will start in 3 days, will that be okay?

@ebarry
Copy link
Member Author

ebarry commented May 4, 2020

Yes, thank you so much! Good luck on exams, and do get plenty of rest too :)

@ebarry
Copy link
Member Author

ebarry commented May 11, 2020

Hi @sanchibansal340, how did exams go?

@sanchibansal340
Copy link

Hey @ebarry. The exams went well, I am working on the issue and will be done with it in 2 days.
Sorry for not updating you.

@sanchibansal340
Copy link

@ebarry Why is that the source code on Chrome Dev tools is different and actual code is completely different?
Also do I have to setup the code according to the prerequisites in the README.md. I didn't because I thought that I am just working on HTML and CSS thus I won't have to.

@sanchibansal340
Copy link

@ebarry by removing 'position:absolute', 'People who are following' table is going below the 'People who've posted table'. Do you want this kind of format or do you want the table side by side only?

Attached the screenshots below of how that looks
Screenshot (35)
Screenshot (36)
Screenshot (37)
Screenshot (38)
Screenshot (39)
Screenshot (40)

@ebarry
Copy link
Member Author

ebarry commented May 20, 2020

@sanchibansal340 these screenshots are so helpful in describing the issue!

In mobile view, it would be helpful to move the table for "People who are following" down below the other tables, but this isn't what this issue is about, so let's set this part aside for now.

We are looking to retain the side-by-side view of both tables with appropriate column widths. Is there a way to see where the CSS changes on screensizes greater than 750px? I tried to look at the page using developer tools myself but i am not familiar enough to find what i'm looking for!

@ebarry ebarry changed the title Two small display issues on Tag Contributor pages Two display issues on Tag Contributor pages May 20, 2020
@patcon
Copy link
Contributor

patcon commented May 20, 2020

Hey all! Seems we've got a bootstrap formatting bug in our prior html structure :)

Don't want to confuse this with another cook, but seems like maybe there's a little bootstrap usage issue at the core of this, that's complicating things from the start

tl;dr - having a .col-* div as a child of another .col-* div (without separating them with a .row div) isn't supported by bootstrap

From bootstrap docs on Nesting the grid system:

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

When I add a new <div class="row"></div> around the inner cols (the two col-md-6 columns) and remove the inline styles for those same col-md-6divs, it seems to work out cleaner (and expands to cover the whole parent width, which seems expected).

--- /tmp/_contributors.html.erb	2020-05-20 15:36:04.000000000 -0300
+++ /tmp/_contributors.html.erb.new	2020-05-20 15:37:05.000000000 -0300
@@ -34,7 +34,8 @@
 <% elsif @note_count.nil? || @note_count == 0 %>
   <p><%= raw translation('tag.contributors.no_contributors', :tag => params[:id]) %>:</p>
 <% else %>
-  <div class="col-md-6" style="display: inline-block;">
+  <div class="row">
+  <div class="col-md-6">
     <table class="table">
       <tr>
         <th style="width:75%;"><%= translation('tag.contributors.people_who\'ve_posted') %></th>
@@ -50,7 +51,7 @@
       <% end %>
     </table>
   </div>
-  <div class="col-md-6"  style="display: inline-table; position:absolute">
+  <div class="col-md-6">
     <table class="table">
       <tr>
         <th> <%= translation('tag.contributors.people_who_are_following') %> </th>
@@ -62,5 +63,6 @@
       <% end %>
     </table>
   </div>
+  </div>
   <br />
 <% end %>

See below for what it looks like with that change:

screencap of modified grid

Pretty sure this is the root of part of this issue (the total width and smaller widths that don't add up, maybe?). If it looks right, I'm happy for someone else with more context to run with a PR :)

@ebarry
Copy link
Member Author

ebarry commented May 21, 2020

Thanks for spotting these insights @patcon and @sanchibansal340 ! It would really be great to get our contributor tables looking good because Public Lab is made of contributors :) Do the next steps seem clear to anyone?

@sanchibansal340
Copy link

sanchibansal340 commented May 21, 2020

@ebarry I made 3 changes on Chrome Devtools. I found the 750px thing as well but wasn't able to take screenshot of it. In the first 2 screenshots I have just changed the widths of the table. The problem now is that I can't find this code in the local files. Any idea how I can find them?
I have attached the screenshots of the changes made and how the table looks with it.
Screenshot (53)
Screenshot (55)
Screenshot (56)

@cesswairimu
Copy link
Collaborator

@ebarry Why is that the source code on Chrome Dev tools is different and actual code is completely different?
Also do I have to setup the code according to the prerequisites in the README.md. I didn't because I thought that I am just working on HTML and CSS thus I won't have to.

Hey @sanchibansal340 yeah you will need to install the project inorder to work on this...but you could also do it on github but you will have trouble testing the implementation also we normally require screenshots for ui changes. Thanks for the great investigations 🎉

@cesswairimu
Copy link
Collaborator

@sanchibansal340 these files are rendered as partials at https://github.com/publiclab/plots2/blob/master/app/views/tag/show.html.erb and these partials are in this folder https://github.com/publiclab/plots2/tree/master/app/views/tag/show let me know if you need more pointers on the code. Thanks

@cesswairimu
Copy link
Collaborator

@patcon @sanchibansal340 @ebarry great detective work here 🚀 Thanks

@ebarry
Copy link
Member Author

ebarry commented May 24, 2020

Hi @sanchibansal340 , do you feel interested in figuring out how to install the project to take this to the next step? Let us know what support would help!

@sanchibansal340
Copy link

@ebarry I will update you within a day. I am sorry that I am taking so long to solve such a simple issue.

@emilyashley
Copy link
Member

Awesome thank you @sanchibansal340! Appreciate you picking this up.

@jywarren jywarren changed the title Two display issues on Tag Contributor pages Table display issue on Tag Contributor pages May 26, 2020
@sanchibansal340
Copy link

@ebarry Can I setup this project on Windows?

@ebarry
Copy link
Member Author

ebarry commented May 27, 2020

I"m not sure, but i've asked in the chatroom if anyone could help answer this. Thanks for your dedication on this, i'm so grateful and impressed. I also wish to mention that this is not a "first-timers-only" issue, meaning that there is some complexity here that might be great to address through pairing up with a more experienced contributor. Would you be open to that?

@sanchibansal340
Copy link

I"m not sure, but i've asked in the chatroom if anyone could help answer this. Thanks for your dedication on this, i'm so grateful and impressed. I also wish to mention that this is not a "first-timers-only" issue, meaning that there is some complexity here that might be great to address through pairing up with a more experienced contributor. Would you be open to that?

Yes sure.

@sanchibansal340
Copy link

@ebarry Why is that the source code on Chrome Dev tools is different and actual code is completely different?
Also do I have to setup the code according to the prerequisites in the README.md. I didn't because I thought that I am just working on HTML and CSS thus I won't have to.

I was talking about having sqlite3 and rvm etc. Do I need them or can I work on HTML and CSS part of the project without needing to setup sqlite3 and rvm?

@Tlazypanda
Copy link
Collaborator

Hey @sanchibansal340 Thanks so much for your dedication towards this issue ❤️

To answer some of your queries -

  • It is recommended that you setup this on Linux since Ruby on rails and our particular environment works better with Linux. But I believe you have a windows system (am i right not sure ❓ ) so here are some ways you can setup Linux in your windows and carry out installation. Please refer this.

Now my personal opinion would be to dual boot your system since later on if you want continue to work with Opensource Linux will be your saviour 💯 but please do this when you are absolutely clear with how to do it (some wrong steps and your OS vanishes 😕 I will be happy to help 😄 ).

  • Setting up the project is the best way to go! Since we need to check if your changes work alright locally, might require screenshots and also if the changes would require us to update tests of any kind. Since this is a bit complex of an issue might require some testing 😅

Hope this answer your queries! Feel free to ping me in case you run into any issues ✌️

@sanchibansal340
Copy link

@Tlazypanda thank you so much for the guidelines. I will dual boot my laptop, though the part about os vanishing is a bit scary but I will ask for your help if needed.

@jywarren
Copy link
Member

jywarren commented Jun 2, 2020

Thank you @Tlazypanda !!! And @sanchibansal340 you're awesome for taking on this challenge. Also see #3840 for group troubleshooting on installation!

@jywarren
Copy link
Member

Hi, all, I've looked through all the solutions here and wanted to try some of them out, so I opened a pull request here: #8021

It pushes the right-hand "followers" table below the left hand "contributors" table in narrower views which I think is appropriate; when the two tables are too narrow, they read as a single table, which is confusing.

One thing I'd like to suggest is that we get rid of, or move, the "Related tags" text -- @ebarry do you remember where we had thought we could put those? My memory was that we wanted to display them differently because it's not a good use of an entire 25% column to the right. I'll open a new issue for this and if we can develop a plan for those, perhaps @sanchibansal340 would be interested in helping with that? I would be very happy to guide a bit on it once @sanchibansal340!

If the solution in #8021 looks like progress, we can merge it and move to further refinements. Thanks, everyone!

@jywarren
Copy link
Member

Ah, and just to link up regarding "Related tags", @ebarry resurfaced this discussion which i think is an appropriate place to talk about that! #6307

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug the issue is regarding one of our programs which faces problems when a certain task is executed design issue requires more design work and discussion (i.e. mockups and sketches) help wanted requires help by anyone willing to contribute HTML
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants