show.html.erb

<script src="/assets/wikis.js" type="text/javascript"></script>

<div class="container tag-header" style="height:400px;">
  <%= render partial: 'tag/show/header' %>
  <div class= "card tag-card">
    <div class="card-body">
      <div class="pull-right"><%= render :partial => "tag/show/user_controls" %></div>
      <h1 style="margin-top:6px;"><%= @title %></h1>
      <% if @wildcard %>

        <% if @node_type == "questions"%>
          <p><i>Showing <b>questions</b></i></p>
        <% elsif @node_type == "note" && params[:id].match("activity:") %>
          <p><i>Showing <b>activities</b></i></p>
        <% elsif @node_type == "note" && params[:id].match("replication:") %>
          <p><i>Showing <b>completed activities</b></i></p>
        <% end %>

        <p><i>This is a wildcard (*) tag search. Please enter a tag without wildcards to display lead wiki pages.</i></p>

      <% end %>
      <% if @wiki %>
        <p class = "wiki-sub"><%= @wiki.latest.body.split('\n').first %></p>
      <% end %>
      <div class="tag-buttons">
        <div class="btn-group" role="group">
          <% if current_user && current_user.following(@title) %>
            <a rel="tooltip" title="<%= t('sidebar._post_button.share_your_work') %>" data-placement="bottom" href="/post?tags=<%= tag.name %>" class="btn btn-primary requireLogin">New post <i class="fa fa-plus fa-white"></i></a>
          <% else %>
            <a class="btn btn-primary requireLogin" target="_blank" href="/subscribe/tag/<%= @title %>"> Follow</a>
              <% if @related_tags %>
                <a><%= render partial: 'tag/dropdown_subscribe', locals: { tags: @related_tags, buttonStyle: "btn-primary"} %></a>
              <% end %>
          <% end %>
        </div>
        <% if @wiki %>
          <a><%= link_to("Learn more &raquo;".html_safe, "/wiki/#{params[:id]}", :class=> "btn btn-outline-secondary")%></a>
        <% else %>
          <a class="btn btn-outline-secondary" href="/wiki/new?title=<%= params[:id] %>">Add a description <span class="fa fa-plus"></span></a>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="box">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-9">

            <%= render partial: 'tag/show/contributors' %>

            <div class="row">
              <div class="col-lg-6">
                <p class="contributor-info"><%= Tag.find_nodes_by_type(tag.name, 'note', false).count %> posts by 
                  <a href="/contributors/<%= params[:id] %>"><%= Tag.contributor_count(tag.name) %> contributors</a> | 
                  <a href="/contributors/<%= params[:id] %>"><%= Tag.follower_count(tag.name) %> followers</a>
                  <a href="https://publiclab.org/wiki/contributors"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
                </p>
              </div>
              <div class="col-lg-6 d-flex justify-content-lg-end">
                <%= render partial: 'tag/show/nav_tabs' %>
              </div>
            </div>

            <%= render partial: 'tag/show/tab_content' %>
            <div>
              <script type="text/javascript">
                $('#questions .btn-group .btn').click(function(){
                  $(this).addClass('active').siblings().removeClass('active');
                });
              </script>
            </div>
          </div>
          <div class="col-md-3">
            <%= render partial: "tag/show/related_tags" %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<%= stylesheet_link_tag "dashboard" %>

<style>
  .tag-card {
    position: absolute;
    top: 100px;
    left: 5%;
    z-index: 1;
    width: 40%;
    padding: 10px 10px !important;
  }

  @media screen and (max-width: 998px) {
   .tag-card {
     width: 60%;
   }
  }

  @media screen and (max-width: 480px) {
   .tag-card {
     top: 90px;
     width: 90%;
   }
   .tag-header {
   }
  }
  .wiki-sub{
    overflow: hidden;
    color: #666;
    height: 70px;
  }
  .tag-buttons .btn {
    margin-top: 10px;
  }

  .contributor-info,
  .contributor-info a i,
  .contributor-info a:link i,
  .contributor-info a:active i,
  .contributor-info a:visited i {
    color: #aaa;
  }
  .contributor-info a,
  .contributor-info a:link,
  .contributor-info a:active,
  .contributor-info a:visited  {
    color: currentColor;
    text-decoration: underline;
  }
  .contributor-info a:hover,
  .contributor-info a:hover i {
    color: #666;
  }
</style>