metadata to display on question cards - design discussion

[jywarren]

Just breaking out a discussion from #8479 (comment) on what to display on each card style. Right now, we show a pretty minimal card (re style guide https://publiclab.org/style-guide) for regular posts/notes:

This is driven by the following template: https://github.com/publiclab/plots2/blob/main/app/views/notes/_card.html.erb

Question cards look a little different, unfortunately:

Question cards are driven by a separate template, actually - we should try to make them more consistent, which would include:

• grey meta text
• smaller meta text size
• black title and author text
• more bottom-padding in card

Template here:

plots2/app/views/questions/_questions.html.erb

Lines 5 to 12 in 5c23901

	<div class="card bg-white rounded<% if node.status == 4 %> moderated<% end %>">
	<div class="card-header">
	<%= render partial: 'dashboard/node_moderate', locals: { node: node } %>
	<h4><a <% if @widget %>target="_blank"<% end %> href="<%= node.path(:question) %>"><%= node.title %></a></h4>
	</div>
	<div class="card-footer">
	<p class="meta"><%= render partial: "dashboard/node_meta", locals: { node: node } %></p>
	</div>

Design questions

Note that questions have tags listed. I think this makes them already quite cluttered and that adding a count of comments might make them even a bit harder to read, but we could do it. Is there anywhere else we could reduce clutter to improve readability? Are we still committed to the topics listing on each card?

For reference, look at how posts are displayed on the dashboard. Do we like the amount of info on each item here?

Coding

In any case, instead of making the templates match, we should just start using the regular card template, and add a condition to cover questions:

plots2/app/views/notes/_card.html.erb

Lines 39 to 45 in 5c23901

	<% if node.type == 'note' %>
	Post by <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a> <%= node.author.new_contributor %>
	<span style="color:darkgray;">
	<i class="fa fa-comment-o"></i>
	<%= node.comments.size %> &nbsp; | &nbsp; <%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope:'datetime.time_ago_in_words' }).gsub('about ','') %>
	</span>
	<% elsif node.type == 'page' %>

[jywarren]

OK, so let's just swap in the standard _card.html.erb template, having checked on this with @ebarry! We can make an FTO from this by just modifying:

plots2/app/views/questions/_questions.html.erb

Lines 5 to 12 in 5c23901

	<div class="card bg-white rounded<% if node.status == 4 %> moderated<% end %>">
	<div class="card-header">
	<%= render partial: 'dashboard/node_moderate', locals: { node: node } %>
	<h4><a <% if @widget %>target="_blank"<% end %> href="<%= node.path(:question) %>"><%= node.title %></a></h4>
	</div>
	<div class="card-footer">
	<p class="meta"><%= render partial: "dashboard/node_meta", locals: { node: node } %></p>
	</div>

---

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

[ghost]

@jywarren like I observed the cards aren't of the same height which is a lot inconsistent in itself. It would be great to add related tags in case the user searches by tags but if the tags become more than 3 and break into a new line, then it'd be too cluttered so maybe we could reduce the tags to the 3 most related? Then only the number of comments and maybe the link icons really matter. Maybe we could remove the others?

[ghost]

I could come up with a quick design of how I think the cards should look while incorporating gray and smaller meta text size and black colored author. I don't think adding more padding would totally solve the issue of inconsistent card heights. The length of the title is always a factor. Instead, it might be good to explicitly set a maximum number of characters for the title and maybe add a read more link to see the whole title? Not sure about that just suggesting

[ghost]

This is a rough design of how it'd look. Still some things to deliberate on.

1. The tags compose characters of different lengths, how do we deal with that. I think for questions asked, what's important is the person who asked the question, when it was asked and replies to the question, hopefully suggesting solutions.
   @jywarren what ae your thoughts?

[ghost]

@jywarren @cesswairimu ??

[jywarren]

Hi @karenefereyan I'm so sorry i missed this. Sometimes I don't see a comment for a few days as my main work day is Tuesdays. Thank you for your careful work on this! I think in discussion with @ebarry we settled on the default display (the very top screenshot) as suitable for questions as well. So I think that makes it relatively simple to move forward on!

I do think your idea of trying to get the cards to be standard heights is good. But it's a pretty tough challenge - are there sites which achieve this given variations in title length?

Thank you!

[jywarren]

I think we can break this into a few pieces and hopefully welcome some newcomers in in the process. I suggest:

• add a app/models/node.rb method node.is_question? so we can tell if it's a question. DONE in add is_question? method to node #8748
• add a conditional based on node.is_question? to line 40 below so we switch between Post and Question in this section:
  

  plots2/app/views/notes/_card.html.erb

  Lines 39 to 45 in 5c23901

  	<% if node.type == 'note' %>
  	Post by <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a> <%= node.author.new_contributor %>
  	<span style="color:darkgray;">
  	<i class="fa fa-comment-o"></i>
  	<%= node.comments.size %> &nbsp; | &nbsp; <%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope:'datetime.time_ago_in_words' }).gsub('about ','') %>
  	</span>
  	<% elsif node.type == 'page' %>

• replace the custom question template at the comment above with the <%= render partial: 'notes/card', locals: { node: node, i: i, tagname: tagname } %> template partial, so we start using the same template.

@karenefereyan if you are still interested in taking any of these on, that'd be great! Or in creating a first-timers-only issue out of them for a newcomer, as i suggested above. Thank you again for your work and patience!

[jywarren]

Actually for the above line item 3 -- changing the template -- couldn't we just eliminate this whole block and make line 9 accept || @node_type == 'question' as well?

plots2/app/views/tag/show/_tab_content.html.erb

Line 20 in 903a162

<% if @node_type == "questions" %>

@Cadreia maybe this could simplify your work in #8689 as well?

Thanks, all!

[ghost]

Hi @karenefereyan I'm so sorry i missed this. Sometimes I don't see a comment for a few days as my main work day is Tuesdays. Thank you for your careful work on this! I think in discussion with @ebarry we settled on the default display (the very top screenshot) as suitable for questions as well. So I think that makes it relatively simple to move forward on!

I do think your idea of trying to get the cards to be standard heights is good. But it's a pretty tough challenge - are there sites which achieve this given variations in title length?

Thank you!

I thought as much. Its okay. I can understand how busy you must be

[ghost]

I think we can break this into a few pieces and hopefully welcome some newcomers in in the process. I suggest:

• add a app/models/node.rb method node.is_question? so we can tell if it's a question.
• add a conditional based on node.is_question? so we switch between Post and Question in this section:
  

  plots2/app/views/notes/_card.html.erb

  Lines 39 to 45 in 5c23901

  	<% if node.type == 'note' %>
  	Post by <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a> <%= node.author.new_contributor %>
  	<span style="color:darkgray;">
  	<i class="fa fa-comment-o"></i>
  	<%= node.comments.size %> &nbsp; | &nbsp; <%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope:'datetime.time_ago_in_words' }).gsub('about ','') %>
  	</span>
  	<% elsif node.type == 'page' %>

• replace the custom question template at the comment above with the <%= render partial: 'notes/card', locals: { node: node, i: i, tagname: tagname } %> template partial, so we start using the same template.

@karenefereyan if you are still interested in taking any of these on, that'd be great! Or in creating a first-timers-only issue out of them for a newcomer, as i suggested above. Thank you again for your work and patience!

Sure. I can do either. Maybe create an FTO out of it. I'll need help with that though because I've never created one before

[tawahpeggy]

@karenefereyan Its quite simple to create an FTO issue, just check at the top of any issue already created, click on new issue (the green button at the top right corner of the page ) then select fto and follow the steps as describe on the template.its exactly same as creating a check-in ,just that different templates are used.

[jywarren]

I'm eating lunch right now but also happy to help out in the chatroom if you're looking into doing this! https://gitter.im/publiclab/publiclab

[ghost]

I'll be out of power on my phone soon.I'll look into it tomorrow and contact you @jywarren and @tawahpeggy if I have issues. BTW @jywarren enjoy your lunch

[jywarren]

OK @karenefereyan and thank you @tawahpeggy -- i've completed the first item, and so now the second can be done as a stand-alone. Then 3. If you need help faster next time, please do reach out in the chatroom as I should get a notification faster then!

Thanks, everybody!

[tawahpeggy]

I'll be out of power on my phone soon.I'll look into it tomorrow and contact you @jywarren and @tawahpeggy if I have issues. BTW @jywarren enjoy your lunch

anytime @karenefereyan

[ebarry]

Thank you for all your help @karenefereyan <https://github.com/KarenEfereyan> @tawahpeggy <https://github.com/tawahpeggy> @jywarren <https://github.com/jywarren> ! -- +1 336-269-1539 / @lizbarry <http://twitter.com/lizbarry> / lizbarry.net

…

On Wed, Nov 18, 2020 at 6:35 AM TAWAH PEGGY CHE NICO < ***@***.***> wrote: I'll be out of power on my phone soon.I'll look into it tomorrow and contact you @jywarren <https://github.com/jywarren> and @tawahpeggy <https://github.com/tawahpeggy> if I have issues. BTW @jywarren <https://github.com/jywarren> enjoy your lunch anytime @karenefereyan <https://github.com/KarenEfereyan> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8731 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABHNH4N2NNCW26PKJYSS5LSQOWORANCNFSM4TQ6OQOA> .

[jywarren]

Uh oh - actually it looks like our question card formatting in https://publiclab.org/questions was affected by the changes here. I'm reopening just to try to resolve this:

Before:

Now:

I think we need to fix the lazy loading on /questions, probably just by running this:

$(function(){
  $("img").lazyload();
});

(see https://github.com/publiclab/plots2/pull/8043/files#diff-10d79f07bd4ae39a54ddd901d05832f6ea45f6ec427932edd966bed0b83e6714R20)

[ebarry]

I think the question card formatting is fixed now:

[TildaDares]

@ebarry It was resolved in #10359

[cesswairimu]

Seems this one is resolved. Thanks all