publiclab/plots2

<% questions = questions || @questions # accept local if present, default to instance %>
<div id="notes">
    <div class="row">
    <% questions.each_with_index do |node,i| %>
        <div class="<% if @widget %>col-4 <% end %>col-lg-4 note note-container-question" style="margin-top:20px;">
    <div class="card">
    <div class="<% if node.status == 4 %> moderated<% end %>">

    <% if node.main_image %>
      <a class="card-img-top img" style="overflow: hidden; height:10em;"<% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><img src="<%= node.main_image.path(:default) %>" style="width:100%;"/></a>
    <% elsif node.scraped_image %>
      <a class="card-img-top img" style="overflow: hidden; height:10em;" href="<%= node.path %>"><img src="<%= node.scraped_image %>" style="width:100%;" /></a>
    <%  else %>
      <a class="imgg overflow-hidden" style="background:#ddd;height:10em; margin-bottom: 10px;padding: 1rem">
      <img src="https://storage.googleapis.com/publiclab-production/public/system/images/photos/000/045/449/medium/paint-bucket.png" style="width: 100%;padding: 15% 30%;opacity: 0.3;">
      </a>
    <% end %>


    <div class="card-body">
      <% if node.status == 4 %>
          <p class="alert alert-warning moderated">
          <% if logged_in_as(['admin','moderator']) %>
          <%= translation('dashboard._node_moderate.first_time_post') %>
          <a class="btn btn-outline-secondary btn-sm" href="/moderate/publish/<%= node.id %>"><%= translation('dashboard.moderate.approve') %></a>
          <a class="btn btn-outline-secondary btn-sm" href="/moderate/spam/<%= node.id %>"><%= translation('dashboard.moderate.spam') %></a>
          <% else %>
          <%= raw translation('dashboard.moderate.pending_approval', :url => '/wiki/moderation') %>
          <% end %>
      </p>
      <% end %>



      <h5><a <% if @widget %>target="_blank"<% end %> href="<%= node.path(:question) %>"><%= node.title %></a></h5>

      <span style="display: block;">
      <% unless node.is_a?(Comment) || node.is_a?(Revision) || node.type == 'page' %>
      asked 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%> <%= coauthor.new_contributor %></a>
              <%= ',' if i < node.coauthors.size-1 %>
              <% end %>
              <% end %>
      <% end %>
      </span>

      <span style="display: block; width:90%;" id="tags">
          <% node.tags.limit(4).each do |tag| %>
          <span id="tag_<%= tag.id %>" ><a class="badge badge-primary" href="/questions/tag/<%= tag.name %>"><%= tag.name %></a></span>
          <% end %>
      </span>

      <a class="ellipsis bottom-right" data-toggle="dropdown"><i class="fa fa-ellipsis-h" style="color : #666; font-size:15px; float:right;"></i></a>
          <ul class="dropdown-menu dropdown-menu-right" style = "width: 150px; font-size:10px;">
              <li>
              <a>Made: <%= distance_of_time_in_words(node.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a>
              </li>
              <% node = node.parent if node.is_a?(Revision) %>
              <span class="">
                <% if params[:controller] == 'questions' %>
                  <li>
                  <a href="<%= node.path(:question) %>#answers" title="Answers"><i class="fa fa-comments-o" style="color: #DAA583;"></i> <%= node.answers.size %></a>
                  </li>

                <% end %>
                  <li>
                  <a><span class="d-none d-lg-inline">Total Views: <%= number_with_delimiter(node.views) %></span></a>
                  </li>
                  <li>
                  <a>Total Likes: <%= node.likes %></a>
                  </li>
                  <li>
                  <a href="<%= node.path %>#comments">Total Comments: <%= node.comments_viewable_by(current_user).size%></a>
                  </li>
                  <li>
                  <a href="/n/<%= node.id %>">Read More</a>
                  </li>
                  <% if params[:mod] %>| <a href="#"><i class="fa fa-ban"></i></a><% end %>
                  <% if current_user %>
                    <li class="buttons dropdown-submenu">
                      <a class="btn btn-outline-secondary btn-sm spam">Spam</a>
                      <ul class="dropdown-menu">
                        <li>
                        <div class="dropdown-arrow"></div>
                        <%= render partial:'dashboard/flag_list', locals: { node: node } %>
                        </li>
                      </ul>
                    </li>
                  <% else %>
                    <li class="buttons"><a data-toggle="modal" data-target="#loginModal" class="btn btn-outline-secondary btn-sm" role="button" aria-pressed="true"> Spam </a></li>
                  <% end %>
              </span>
          </ul>
      </div>


      </div>
      </div>
      </div>

<% unless @widget %><hr class="d-lg-none" /><% end %>
<% if ((i+1)/3.0).to_i == ((i+1)/3.0) %>
</div>
<% unless @widget %><hr class="d-lg-none grid" /><% end %>
<div class="row">
<% end %>
<% end %>
</div>
</div>
<div class="text-center">
<% if @pagy %>
  <%== pagy_bootstrap_nav @pagy %>
<% else %>
  <%= will_paginate questions, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer unless @unpaginated || questions.empty? %>
<% end %>
</div>
</div>

<style>

.card {
  background-color: #fff;
  border: 1px solid;
  border-color: #D3D3D3;
  border-radius: 6px;
  margin: 0em;
}
.card-body {
  margin-right: 1em;
  margin-left: 1em;
  padding: 0.8em;
  text-align: left;
  padding: 1em 0.6em 1em 0.6em;
}

.imgg {
  background: #aaa;
  display: flex;
  align-items: center;
}

.note-not {
  margin-left:auto;
  margin-right: auto;
  color: #fff;
}

.ellipsis{
  cursor: pointer;
}

.dropdown-menu li a{
  display: inline-block;
  padding-bottom: 5px;
  padding-left: 14px;
  font-size: 13px;
}

.bottom-right {
  position: absolute;
  bottom: 10px;
  right: 16px;
  color: #fff;
  text-shadow: 0.5px 0.5px #333;
  text-decoration: underline;
 }

.buttons {
  text-align: center;
  margin: 10px 0px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  left: -20%;
  margin-top: 11px;
}

.dropdown-arrow {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 0px;
  background-color: #fff;
  border-left: 1px solid rgb(217 217 217);
  border-top: 1px solid rgb(217 217 217);
  transform: translate(-50%, -50%) rotate(45deg);
}
</style>

<script>
  $(document).ready(function(){
    $('.spam').on("click", function(e){
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });
</script>