Make wiki/note page headings more minimal, based on the new style guide

[jywarren]

@gautamig54 @CleverFool77 I was working in the style guide draft, and have been trying to see how we can keep a minimum of extra stuff in the heading, as it's currently so overloaded:

So I tried putting everything in a ... menu just under the title. But then i thought, it's bit too hidden maybe? So I tried a row of buttons in the sidebar:

Any thoughts? Ideas? Preferences?

[CleverFool77]

I seem to miss out this.
Thanks for assigning. @jywarren

[CleverFool77]

We have been using ellipses in all cards too.Instead of ellipses, row of buttons and menu buttons looks much better.
How about earlier, letting all this data remain hidden, then we can trigger the show class with one menu button.
So unless someone want to edit the note or wiki, they need not see these buttons.

[gautamig54]

We have been using ellipsis for text over-riding. Like in extra long tags. We ca keep it to ellipsis and display the full text on hover. What do you think @CleverFool77 ?

[jywarren]

Hover could be an issue for smartphones, but I like the idea -- maybe on click? So, the first button would be a ... button, but round, and clicking it shows all the other buttons in that row?

[jywarren]

Now we have a very minimal set of sidebar buttons which can contain LOTS of extra stuff, we can get back to making the wiki/note page headings more minimal as in the style guide:

https://publiclab.org/notes/Bronwen/09-20-2019/online-live-builds-make-magazine-in-october is an example page.

Here's what it looks like now:

The mockup is here:

The ... menu can now be skipped as that content can go in the new sidebar ... button, the circular one. For the rest, anything else we are removing to get it minimized can go in the dropdown of the new ... button as well!

We'd love help with this!

[jywarren]

Here's the current wiki page header:

So for note pages, it could say:

by @authorname | Sept 4 2019 | #14142

For wiki pages, it could say:

8 authors | 14 revisions | Talk (each underlined, as a link)

The notes header code is here (it could maybe be broken into a partial template?):

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

Lines 27 to 60 in f7683ee

	<span>
	<% if @node.status == 0 || @node.status == 4 %><span class="badge badge-danger"><%= t('notes.show.unpublished') %></span> | <% end %>
	<% if @node.status == 3 %><span class="badge badge-success">Draft</span> | <% end %>
	by <a href="/profile/<%= @node.author.name %>"><%= @node.author.name %></a> <%= @node.author.new_contributor %>
	<% if @node.has_power_tag('with') %>with <% @node.coauthors.each_with_index do |coauthor,i| %>
	<a href="/profile/<%= coauthor.username %>">
	<%= coauthor.username%></a> <%= coauthor.new_contributor %>
	<%= ',' if i < @node.coauthors.length-1 %><% end %><% end %>
	<% if current_user && current_user.id == @node.uid %><a onClick="promptTag('with:')" href="#"><i style="color:#aaa;" class="fa fa-pencil"></i></a><% end %> |
	<span class="d-none d-lg-inline">
	<%= @node.created_at.to_s(:long) %>
	</span>
	<a class="d-lg-none collapse-btn" data-toggle="collapse" href="#collapse-info" role="button" aria-expanded="false" aria-controls="collapse-info" id="collapse-button">...</a>
	<span class="collapse collapse-info" id="collapse-info">
	| <%= number_with_delimiter(@node.views) %> <%= t('notes.show.views') %>
	<% if @node.comments %>
	| <i class="fa fa-comment"></i>
	<a href="#comments"> <%= @node.comments.length %> <%= t('notes.show.comments') %> </a>
	<% end %>
	| <a href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
	</span>
	<span class="d-none d-lg-inline d-print-none">
	| <%= number_with_delimiter(@node.views) %> <%= t('notes.show.views') %>
	<% if @node.comments %>
	| <i class="fa fa-comment"></i>
	<a href="#comments"> <%= @node.comments.length %> <%= t('notes.show.comments') %> </a>
	<% end %>
	| <a href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
	</span>
	<span class="d-xl-none">
	<%= @node.created_at.to_s(:short) %>
	</span>
	</span>

The wiki page header code is here:

plots2/app/views/wiki/_header.html.erb

Lines 30 to 108 in f7683ee

	<div class="float-right" style="padding-top:8px;">
	<span class="d-none d-lg-inline">
	<%= number_with_delimiter(@node.views) %> <%= t('wiki.show.views') %> |
	<%= raw t('wiki.show.last_edited', url1: "/profile/" + @revision.author.name, author: @revision.author.name, time: time_ago_in_words(@revision.created_at)) %>
	| <a href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a>
	<span class="d-none d-xl-inline">
	<a href="/n/<%= @node.id %>">#<%= @node.id %></a>
	</span>
	</span>
	</div>
	<ul class="nav nav-tabs">
	<li class="nav-item" >
	<a class="<%= 'active' unless (controller.action_name == 'comments' or params.key?(:raw)) %> nav-link" href="<%= @node.path %>">
	<span class="d-none d-md-inline"><%= t('wiki.show.view') %></span>
	<span class="d-md-none"><i class="fa fa-file-o"></i></span>
	</a>
	</li>
	<% if @node.has_tag('locked') && (current_user ? (current_user.role != "moderator" && current_user.role != "admin") : true) %>
	<li class="nav-item">
	<a class="nav-link" href="/wiki/locked"><i class="fa fa-lock"></i></a>
	</li>
	<% else %>
	<% if current_user && current_user.first_time_poster %>
	<li class="nav-item">
	<a class="nav-link" rel="tooltip" title="Please post a question or other content before editing the wiki. Click to learn why." data-placement="top" href="https://publiclab.org/notes/tester/04-23-2016/new-moderation-system-for-first-time-posters">
	<i class="fa fa-lock"></i>
	<span class="d-none d-xl-inline"></span>
	</a>
	</li>
	<% else %>
	<li class="nav-item">
	<a rel="tooltip" title="Edit this wiki page." data-placement="top" href="<%= @node.edit_path %>?t=<%= Time.now.to_i %>" class="requireLogin nav-link">
	<i class="fa fa-pencil"></i>
	<span class="d-none d-xl-inline"></span>
	</a>
	</li>
	<li class="<%= 'active' if params[:raw] == 'true' %> nav-item">
	<a class="nav-link" rel="tooltip" title="Try the beta inline Rich Wiki editor." data-placement="top" href="<%= @node.path %>?raw=true">
	<i style="color:#0c8;" class="fa fa-pencil"></i>
	</a>
	</li>
	<% end %>
	<% end %>
	<% if logged_in_as(['admin']) %>
	<li class="nav-item" rel="tooltip" title="Delete this wiki page." data-placement="top">
	<%= link_to url_for(action: :delete,id: @node.id),method: :delete, data: {confirm: I18n.t('wiki.show.are_you_sure_delete', path: @node.path)}, class: "nav-link" do %>
	<i class="fa fa-trash"></i>
	<span class="d-none"> <%= t('wiki.show.delete') %></span>
	</a>
	<% end %>
	</li>
	<% end %>
	<li class="nav-item">
	<a class="nav-link" rel="tooltip" title="Practice in a realtime doc." data-placement="top" href="/talk/<%= @node.slug_from_path %>">
	<i class="fa fa-comments-o"></i>
	<span class="d-none d-xl-inline"> <%= t('wiki.show.talk') %></span>
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" rel="tooltip" title="View previous versions of this page." data-placement="top" href="/wiki/revisions/<%= @node.slug_from_path %>">
	<span class="d-none d-md-inline"><%= @node.revisions.length %> </span>
	<i class="fa fa-list"></i>
	</a>
	</li>
	<li class="nav-item" >
	<a class="nav-link <%= 'active' if (controller.action_name == 'comments' )%>"href="/wiki/<%= @node.slug_from_path %>/comments" rel="tooltip" title="Read Comments regarding this wiki page" data-placement="top">
	<span class="d-none d-md-inline"> <%= @node.comments.size %></span>
	<i class="fa fa-comment"></i>
	</a>
	</li>
	</ul>
	</div>

[ebarry]

@joyofsoy, check out this issue which comprehensively redesigns the header on notes and wikis -- that redundant line "read more: publiclab.org/n/######" will definitely be removed.

[Ugtan]

I would like to work on the issue @jywarren