Skip to content

Commit

Permalink
Update _thumbnail.html.erb to make it consistent with new card display (
Browse files Browse the repository at this point in the history 
#6581)

* Update _thumbnail.html.erb

* Update style.css

* Update node_shared_test.rb

* Update _thumbnail.html.erb

* Update _notes.html.erb

* Update _notes.html.erb

* Update _notes.html.erb

* added ApplicationController.helpers.logged_in_as

* Update _notes.html.erb

* self.current_user in application_helper.rb

* Update application_helper.rb

* switch to "@current_user && ['admin','moderator'].includes?(@current_user.role)"

* PL.editor shows map if lat,lon passed in URL. (#6788)

* pl-editor shows map

* indentation

* yarn.lock added for PL.editor

* safe traverse syntax used

* handle nils

* Update _notes.html.erb
  • Loading branch information
@jywarren
jywarren authored Nov 18, 2019
1 parent a5d3392 commit 1e0eba7
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 129 deletions.
4 changes: 0 additions & 4 deletions app/assets/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -412,10 +412,6 @@ div.note .meta {
color:#888;
}

.image-container {
height:auto;
overflow:auto;
}
/*start of img aspect css that will affect the
thumbnails which appears on the user's profile
under their notes*/
Expand Down
65 changes: 3 additions & 62 deletions app/views/grids/_thumbnail.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,3 @@
<div class="thumbnail-grid image-container row">
<% nodes.each_with_index do |node, index| %>
<% if index % 3 == 0 && index > 0 %>
<div class="clearfix d-none d-xl-inline"></div>
<% end %>
<% if index > 8 %>
<div class="d-none note-image col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center">
<% else %>
<div class="note-image col-xl-4 col-lg-5 col-md-6 col-sm-12 col-xs-12 text-center">
<% end %>
<a class="img" href="<%= node.path %>">
<% if node.main_image %>
<img alt="image" class="img-fluid grid-image" src="<%= node.main_image.path(:default) %>" style="width:100%;height:auto;">
<% end %>
</a>
<h4 style="padding: 0px; margin: 10px;"><a href="<%=node.path%>" style="padding-top: 0px"><%=node.title%></a></h4>
<p class="meta"><small>
<% if node.type == 'note' %>
by <a href="/profile/<%= node.author.name %>"><%= node.author.name %></a> <%= node.author.new_contributor %>
<%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope:'datetime.time_ago_in_words' }) %>
| <a href="<%= node.path %>#comments"><i style="color:#888;" class="fa fa-comment-o"></i> <%= node.comments.size %></a>
<% else %>
<%= t('notes._notes.last_edit_by') %> <a href="/profile/<%= node.latest.author.name %>"><%= node.latest.author.name %></a>
<%= distance_of_time_in_words(Time.at(node.latest.timestamp), Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %>
<% end %>
| <i class="fa fa-eye"></i> <%= number_with_delimiter(node.views) %> <span class="d-none d-md-inline"><%= t('notes._notes.views') %></span>
| <i style="<% if node.likes > 0 %>color:#db4;<% else %>color:#888;<% end %>" class="fa fa-star-o"></i> <%= node.likes %>
| <% if node.has_tag("pin:#{tagname}") %><i rel="tooltip" title="This item was pinned with the tag 'pin:<%= tagname %>'." class="fa fa-thumb-tack"></i> <% end %>
</small></p>
</div>
<% end %>
</div>
<% if nodes.count > 8 %>
<div class="row">
<a id="show-all" class="col-lg-2 col-lg-offset-5 show-all">Show more</a>
</div>
<% end %>
<script>
$('#show-all').on('click', function(){
if ($('.thumbnail-grid .hidden').length > 0) {
$('.thumbnail-grid .hidden').addClass('show');
$('.thumbnail-grid .show').removeClass('hidden');
$('#show-all').html('Show less');
} else {
$('.thumbnail-grid .show').addClass('hidden');
$('.thumbnail-grid .show').removeClass('show');
$('#show-all').html('Show more');
}
});
</script>
<style>
.thumbnail-grid .hidden {
display: none;
}
.thumbnail-grid .show {
display: inline-block;
}
.show-all {
color: black;
text-decoration: underline;
}
</style>
<div class="thumbnail-grid">
<%= render partial: 'notes/notes', locals: { notes: nodes, unpaginated: true } %>
</div>
120 changes: 59 additions & 61 deletions app/views/notes/_notes.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,74 +15,72 @@
<% end %>
<div class="card-body">
<% if node.status == 4 %>
<p class="alert alert-warning moderated">
<% if logged_in_as(['admin','moderator']) %>
<%= t('notes._notes.moderate_first_time_post') %> <br class="d-none d-lg-inline"/>
<a class="btn btn-outline-secondary btn-sm" href="/moderate/publish/<%= node.id %>"><%= t('notes._notes.approve') %></a>
<a class="btn btn-outline-secondary btn-sm" data-test="spam" href="/moderate/spam/<%= node.id %>"><%= t('notes._notes.spam') %></a>
<% else %>
<%= raw t('notes._notes.pending_approval', :url1 => '/wiki/moderation') %>
<% end %>
</p>
<% end %>
<% if node.status == 4 %>
<p class="alert alert-warning moderated">
<% if @current_user && ['admin','moderator'].include?(@current_user.role) %>
<%= t('notes._notes.moderate_first_time_post') %> <br class="d-none d-lg-inline"/>
<a class="btn btn-outline-secondary btn-sm" href="/moderate/publish/<%= node.id %>"><%= t('notes._notes.approve') %></a>
<a class="btn btn-outline-secondary btn-sm" data-test="spam" href="/moderate/spam/<%= node.id %>"><%= t('notes._notes.spam') %></a>
<% else %>
<%= raw t('notes._notes.pending_approval', :url1 => '/wiki/moderation') %>
<% end %>
</p>
<% end %>
<h5 style="margin-bottom: 0px;"><a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>" style="color: black"><%= (node.type == 'note') ? node.title : node.latest.title %></a></h5>
<h5 style="margin-bottom: 0px;"><a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>" style="color: black"><%= (node.type == 'note') ? node.title : node.latest.title %></a></h5>
<small>
<% if node.type == 'note' %>
<div style="font-size: 1.0em; color: darkgray">Post by <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a> <%= node.author.new_contributor %></div><br>
<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>
<a class="ellipsis bottom-right" data-toggle="dropdown">&nbsp;<i class="fa fa-ellipsis-h" style="color : #666; font-size:15px; float:right;"></i></a>
<ul class="dropdown-menu" style = "width: 150px; font-size:10px;">
<small>
<% if node.type == 'note' %>
<div style="font-size: 1.0em; color: darkgray">Post by <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>" style="color: #303030">@<%= node.author.name %></a> <%= node.author.new_contributor %></div><br>
<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>
<% end %>
<a class="ellipsis bottom-right" data-toggle="dropdown">&nbsp;<i class="fa fa-ellipsis-h" style="color : #666; font-size:15px; float:right;"></i></a>
<ul class="dropdown-menu" style = "width: 150px; font-size:10px;">
<% if node.type == 'note' %>
<li>
<a> Made: <%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope:'datetime.time_ago_in_words' }) %> </a>
</li>
<% else %>
<li>
<a>Last Edited: <%= t('notes._notes.last_edit_by') %> <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.latest.author.name %>"><%= node.latest.author.name %></a></a>
</li>
<li>
<a><%= distance_of_time_in_words(Time.at(node.latest.timestamp), Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a>
</li>
<% end %>
<li>
<a>Total Views: </i> <%= number_with_delimiter(node.views) %> <span class="d-none d-lg-inline"><%= t('notes._notes.views') %></span></a>
</li>
<li>
<a> Total Likes: <%= node.likers.length %></a>
</li>
<div class="content" style="width: 100%" >
<% if @compact.nil? %>
<% if params[:action].to_s.include?("methods") %>
<p><small>
<li><a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>#Activities"><i class="fa fa-flask" style="color:#3da56a;"></i> <%= node.activities.count %> activities</a> &nbsp;</li>
<!-- <p><i class="fa fa-users" style="color:blue"></i> contributors</p> -->
<li><a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>#Questions"><i class="fa fa-question-circle" style="color:#db3a1e;"></i> <span id="questions-count-<%= node.id %>"><%= node.questions.count %> questions</span></a></li>
</small></p>
<% end %>
<li class="buttons mb-2"><% if logged_in_as(['admin','moderator']) %><a style="width: 90px" class="btn btn-outline-secondary" href="/moderate/spam/<%= node.id %>"><i class="fa fa-ban"></i> <%= t('notes._notes.spam') %></a><% end %></li>
<li class="buttons"><a style="width: 90px;" class="btn btn-outline-secondary" href="<%= node.path %>"><%= t('notes._notes.read_more') %></a></li>
<% end %>
<% if params[:mod] %>
<a class="btn btn-outline-secondary" href="#"><i class="fa fa-ban-circle"></i> <%= t('notes._notes.spam') %></a>
<% end %>
<hr style="display:none;" class="bottom" />
</div>
</ul>
</small>
</div>
</div>
<% else %>
<li>
<a>Last Edited: <%= t('notes._notes.last_edit_by') %> <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.latest.author.name %>"><%= node.latest.author.name %></a></a>
</li>
<li>
<a><%= distance_of_time_in_words(Time.at(node.latest.timestamp), Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a>
</li>
<% end %>
<li>
<a>Total Views: </i> <%= number_with_delimiter(node.views) %> <span class="d-none d-lg-inline"><%= t('notes._notes.views') %></span></a>
</li>
<li>
<a>Total Likes: <%= node.likers.length %></a>
</li>
<div class="content" style="width: 100%" >
<% if @compact.nil? %>
<% if node.has_tag("method") %>
<p><small>
<a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>#Activities"><i class="fa fa-flask" style="color:#3da56a;"></i> <%= node.activities.count %> activities</a>
<a <% if @widget %>target="_blank"<% end %> href="<%= node.path %>#Questions"><i class="fa fa-question-circle" style="color:#db3a1e;"></i> <span id="questions-count-<%= node.id %>"><%= node.questions.count %> questions</span></a>
</small></p>
<% end %>
<li class="buttons mb-2"><% if @current_user && ['admin','moderator'].include?(@current_user.role) %><a style="width: 90px" class="btn btn-outline-secondary" href="/moderate/spam/<%= node.id %>"><i class="fa fa-ban"></i> <%= t('notes._notes.spam') %></a><% end %></li>
<li class="buttons"><a style="width: 90px;" class="btn btn-outline-secondary" href="<%= node.path %>"><%= t('notes._notes.read_more') %></a></li>
<% end %>
<% if @current_user && params[:mod] %>
<a class="btn btn-outline-secondary" href="#"><i class="fa fa-ban-circle"></i> <%= t('notes._notes.spam') %></a>
<% end %>
<hr style="display:none;" class="bottom" />
</div>
</ul>
</small>
</div>
<% unless @widget %><hr class="d-md-none" /><% end %>
<% end %>
</div>
</div>
</div>
<% unless @widget %><hr class="d-md-none" /><% end %>
<% end %>
</div>
</div>
<%= will_paginate notes, renderer: WillPaginate::ActionView::BootstrapLinkRenderer unless @unpaginated %>
<%= will_paginate notes, renderer: WillPaginate::ActionView::BootstrapLinkRenderer unless @unpaginated || (unpaginated ||= false) %>

<style>
#notes .card {
Expand Down
4 changes: 2 additions & 2 deletions test/unit/node_shared_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ class NodeSharedTest < ActiveSupport::TestCase
before = "Here are some notes in a table: \n\n[nodes:grid:test] \n\nThis is how you make it work:\n\n`[nodes:grid:tagname]`\n\n `[nodes:grid:tagname]`\n\nMake sense?"
html = NodeShared.nodes_thumbnail_grid(before)
assert html
assert_equal 1, html.scan('<div class="thumbnail-grid image-container row">').length
assert_equal 4, html.scan('h4').length
assert_equal 1, html.scan('<div class="thumbnail-grid">').length
assert_equal 4, html.scan('h5').length
end

test 'that NodeShared can be used to convert short codes like [notes:foo] into tables which list notes' do
Expand Down

0 comments on commit 1e0eba7

Please sign in to comment.