Skip to content

Commit

Permalink
Building profile page as per new style guide (#5990)
Browse files Browse the repository at this point in the history 
* Profile page : Chnage col spans and bring map to top-left

* Profile page : Add topic Cards for profile page

* Add information of user

* fix tests
  • Loading branch information
@CleverFool77 @jywarren
CleverFool77 authored and jywarren committed Jul 26, 2019
1 parent 877b2bd commit f9f0bdc
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 116 deletions.
6 changes: 3 additions & 3 deletions app/views/map/_userLeaflet.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<% if haslocation == true %>
<style>
#map_leaflet{ height:300px; width:292px; margin: auto; position: relative;}
#map_leaflet{ height:300px; width:100%; margin: auto; position: relative;}
</style>
<div class="leaflet-map" id="map_leaflet"></div>
<script>
Expand All @@ -25,8 +25,8 @@
<% end %>
</script>
<% else %>
<div id="map_template" style="position: relative; display: inline-block;">
<img src="https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/0/0/0.png" style="height:300px; margin: 0; position: relative; margin-right: -10px;">
<div id="map_template" style="position: relative; width: 100%; display: inline-block;">
<img src="https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/0/0/0.png" style="height:300px; width: 100%; margin: 0; position: relative; margin-right: -10px;">
<button type='button' class='btn btn-default btn-lg' onclick='addLocation()' style="position: absolute; position: absolute;top: 41% ; left: 15% ;"> <strong> Share your Location </strong> </button>
<p><i><small>Learn about <a href='https://publiclab.org/wiki/location-privacy'>privacy</a> </small></i></p>
</div>
Expand Down
42 changes: 42 additions & 0 deletions app/views/tag/_profileCard.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

<div class="card-view">
<% @profile_user.tags.each do |tag| %>
<div class="card shadow-sm p-2 mb-3 bg-white rounded" >
<div class="card-header mt-2" style=" padding:0.8em; background-color: inherit; border:none;">
<h4 style="display: inline-block;"><%= tag.name %></h3>
<p style="display: inline-block; color: #808080;"><a style="text-decoration: underline; color: #808080;" href="/tag/<%= tag.name %>"><%= Tag.follower_count(tag.name) %> people</a> discussing</p>
</div>
<div class="card-body" style="padding:0.8em;">
<div>
<% Tag.find_nodes_by_type(tag.name, type = 'note', limit = 3).each do |node| %>
<div>
<% if node.author.name == @profile_user.name %>
<% if node.main_image %>
<img class="rounded-circle" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.main_image.path(:default) %>" />
<% elsif node.scraped_image %>
<img class="rounded-circle" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.scraped_image %>" />
<% end %>
<p style="display: inline-block;"><a style="color: inherit;" <% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><%= (node.type == 'note') ? node.title : node.latest.title %></a></p>
<p style="display: inline-block; margin-left: 10px;color: #808080;">by <a style="color: #808080;" <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>">@<%= node.author.name %></a></p>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="card-footer" style="background-color: inherit; border:none;">
<a style="text-decoration: underline; color: #808080; display: inline-block;" href="/tag/<%= tag.name %>"><%= tag.count %> <%= t('tag.index.more_posts') %> <i class="fa fa-angle-double-right"></i></a>

<a style="float: right; width: 100px;" rel="tooltip" title="<%= t('sidebar._post_button.share_your_work') %>" data-placement="bottom" href="/post?tags=<%= tag.name %>" class="btn btn-primary btn-sm">New post <i class="fa fa-plus fa-white"></i></a>
<% if current_user %>
<div id="follow-unfollow-column-<%=tag.tid%>" style="float: right; margin-right: 10px;">
<% if current_user.following(tag.name) %>
<a style="width: 100px;" rel="tooltip" title="<%= t('tag.show.unfollow') %>" class="btn btn-light btn-sm active" href="/unsubscribe/tag/<%= tag.name %>"></i> <%= t('tag.index.unsubscribe') %></a>
<% else %>
<a style="width: 100px;" class="btn btn-outline-secondary btn-sm index-follow-buttons follow-btn-remote" href="/subscribe/tag/<%= tag.name %>" data-remote="true"><%= t('tag.index.subscribe') %></a>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
141 changes: 41 additions & 100 deletions app/views/users/profile.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<div class="col-lg-9">

<div id = "note-graph" style = "overflow: auto; text-align:center; border: 1px solid #E5E5E5; margin-bottom: 10px;"></div>
<div class="col-lg-7">

<h3 style="margin-top:0;"><%= @profile_user.name %> <%= @profile_user.new_contributor %>
<% if !@map_lat.nil? && !@map_lon.nil? %>
<%= render :partial => "map/userLeaflet" , locals: { haslocation: true, user: @profile_user } %>
<% elsif !current_user.nil? && current_user.id == @profile_user.id %>
<%= render :partial => "map/userLeaflet" , locals: { haslocation: false, user: @profile_user } %>
<% end %>

<h3 class="mt-3"><%= @profile_user.name %> <%= @profile_user.new_contributor %>
<small>
<a href="/p/<%= @profile_user.username %>"><i class="fa fa-link"></i></a>
<%= @profile_user.note_count %><a href='/notes/author/<%= @profile_user.name %>'> research notes</a> and <%= @profile_user.revisions.count %> wiki edits
<% if logged_in_as(['admin']) %> | <%= @profile_user.email %><% end %>
<span style = "font-size:24px;"><small> | <%= raw t('users.profile.joined_time_ago', :time_ago => distance_of_time_in_words(@profile_user.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' })) %></small></span>
<% if @profile_user.role == "moderator" %> | <i class="fa fa-certificate"></i> <%= t('users.profile.moderator') %><% end %>
Expand All @@ -17,120 +21,44 @@
<p><small><%= raw auto_link(RDiscount.new(@profile_user.bio || '').to_html, :sanitize => false) %></small></p>

<hr />
<div class="row" id="highlight" style=" text-align: center;">
<h3 class="col-12 col-sm-12 col-md-4"><a href = "/tag/question:*/author/<%= params[:id] %>"><%= Node.questions.where(status: 1, uid: @profile_user.id).length %> questions asked </a><br><br> <%= Comment.where(uid: @profile_user.id).count %> comments posted</h3>
<h3 class="col-12 col-sm-12 col-md-4"><a href = "/tag/activity:*/author/<%= params[:id] %>"><%= @count_activities_posted %> activities posted </a><br><br> <a href = "/tag/replication:*/author/<%= params[:id] %>"><%= @count_activities_attempted %> activities attempted</a></h3>
<% if !@map_lat.nil? && !@map_lon.nil? %>
<%= render :partial => "map/userLeaflet" , locals: { haslocation: true, user: @profile_user } %>
<% elsif !current_user.nil? && current_user.id == @profile_user.id %>
<%= render :partial => "map/userLeaflet" , locals: { haslocation: false, user: @profile_user } %>
<% end %>
</div>
<hr />

<br>

<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#research" data-toggle="tab"><i class="fa fa-file"></i><span class="hidden-sm hidden-xs"> <%= t('users.profile.research') %></span><% if current_user && current_user.uid == @profile_user.uid %> <%= "(#{@notes.count + @coauthored.count + @drafts.count })" %><% else %><%= "(#{ @notes.count + @coauthored.count })" %><% end %></a></li>
<li class="nav-item"><a class="nav-link" href="#questions" data-toggle="tab"><i class="fa fa-question-circle"></i><span class="hidden-sm hidden-xs"> <%= t('users.profile.questions') %></span> (<%= Node.questions.where(status: 1, uid: @profile_user.id).length %>)</a></li>
<li class="nav-item"><a class="nav-link" href="#comments" id="comments-tab" data-toggle="tab"><i class="fa fa-comment"></i><span class="hidden-sm hidden-xs"> Comments</span> (<%= @comment_count %>)</a></li>
<li class="nav-item"><a class="nav-link" href="#likes" data-toggle="tab"><i class="fa fa-star"></i><span class="hidden-sm hidden-xs"> <%= t('users.profile.liked') %></span> (<%= @likes.count %>)</a></li>
<li class="nav-item"><a class="nav-link" href="#barnstars" data-toggle="tab"><i class="fa fa-certificate"></i><span class="hidden-sm hidden-xs"> Barnstars</span> (<%= @profile_user.try(:barnstars).try(:length) %>)</a></li>
</ul>

<br />

<div class="tab-content">

<div class="tab-pane active" id="research">
<div class="btn-group text-center" style="margin-bottom:10px;">
<ul class="nav nav-tabs">
<li class="nav-item" style="list-style-type:none;">
<a href="#notes" class="btn btn-outline-secondary" data-toggle="tab">Authored <%= "(#{ @notes.count })" %></a>
<li class="nav-item" style="list-style-type:none;">
<a href="#coauthored" class="btn btn-outline-secondary" data-toggle="tab">Coauthored <%= "(#{ @coauthored.count })" %></a>
<li class="nav-item" style="list-style-type:none;">
<% if current_user && current_user.uid == @profile_user.uid %>
<a href="#draft" class="btn btn-outline-secondary" data-toggle="tab">Drafts <%= "(#{ @drafts.count })" %></a><% end %>
</ul>
</div>

<br />

<div class="tab-content">
<div class="tab-pane active" id="notes">
<%= render :partial => "notes/notes" %>
</div>

<div class="tab-pane" id="coauthored">
<%= render :partial => "notes/coauthored_notes" %>
</div>

<% if current_user && current_user.uid == @profile_user.uid %>
<div class="tab-pane" id="draft">
<%= render :partial => "notes/draft_notes" %>
</div>
<% end %>
</div>
</div>

<div class="tab-pane" id="questions">
<div class="btn-group text-center">
<a href="#asked" class="btn btn-outline-secondary" data-toggle="tab">Asked</a>
<a href="#answered" class="btn btn-outline-secondary" data-toggle="tab">Commented</a>
</div>

<div class="tab-content">
<div class="tab-pane active" id="asked">
<%= render :partial => "questions/questions" %>
</div>

<div class="tab-pane" id="answered">
<%= render :partial => "users/answered" %>
</div>
</div>
</div>
<%= render :partial => "tag/profileCard" %>

<div class="tab-pane" id="maps">
<p><i><%= raw t('users.profile.view_these_maps', :url1 => "//mapknitter.org/profile/"+@profile_user.name) %></i></p>
<table class="table">
<tr>
<th style="width:200px;"><%= t('users.profile.title') %></th>
<th style="width:200px;"><%= t('users.profile.creation_date') %></th>
<th><%= t('users.profile.image') %></th>
</tr>
</table>
</div>
<div class="text-center"> <%= will_paginate @tags, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer if @paginated %></div>

<div class="tab-pane" id="comments">
<%= render partial: 'comments/comments', locals: { comments: current_user &.can_moderate? ? @all_comments : @normal_comments } %>
</div>

<div class="tab-pane" id="likes">
<%= render :partial => "users/likes" %>
</div>
<hr />

<div class="tab-pane" id="barnstars">
<% @profile_user.barnstars.each do |tag| %>
<p style="color:#aaa;"><i style="color:#db4;" class="fa fa-large fa fa-star-o"></i> <i><%= raw t('users.profile.barnstar_awarded_to_by', :url1 => "/profile/"+tag.node.author.name, :author => tag.node.author.name, :url2 => "/wiki/barnstars#"+tag.name.split(':').last.split('-').each{|w| w.capitalize!}.join('+'), :barnstar => tag.name.split(':').last.split('-').each{|w| w.capitalize!}.join(' '), :url3 => "/profile/"+tag.author.username, :awarder => tag.author.username, :url4 => tag.node.path, :work => tag.node.title) %></i></p>
<hr />
<% end %>
</div>
</div>

<hr />
</div>

<div class="col-lg-1">
</div>

<div class="col-lg-3">
<div class="col-lg-4">
<div class="text-center">
<img class="d-none d-lg-inline rounded-circle" id="profile-photo" style="width:60%;margin-bottom:10px;" src="<%= @profile_user.profile_image %>" />
<img class="d-none d-lg-inline rounded-circle" id="profile-photo" style="width:50%;margin-bottom:10px;" src="<%= @profile_user.profile_image %>" />
</div>
<div style="text-align:center;" class="d-lg-none">
<img class="rounded-circle" id="profile-photo" style="width:50%;margin-bottom:20px;" src="<%= @profile_user.photo_path %>" />
</div>

<%= render :partial => "tag/tagging", locals: { url: "/profile/tags/create/#{ @profile_user.id }", parent: :profile, user: @profile_user } %>

<div class="info float:left">
<ul>
<li class="mt-3"><h5>@<%= @profile_user.name %> <%= @profile_user.new_contributor %> asked</h5></li>
<li><h5><%= @profile_user.note_count %><a href='/notes/author/<%= @profile_user.name %>'> research notes</a></h5></li>
<li><h5><%= @profile_user.revisions.count %> wiki edits</h5></li>
<li><h5><a href = "/tag/question:*/author/<%= params[:id] %>"><%= Node.questions.where(status: 1, uid: @profile_user.id).length %> questions </a></h5></li>
<li><h5><%= Comment.where(uid: @profile_user.id).count %> comments</h5></li>
<li><h5><a href = "/tag/activity:*/author/<%= params[:id] %>"><%= @count_activities_posted %> activities posted </a></h5></kli>
<li><h5><a href = "/tag/replication:*/author/<%= params[:id] %>"><%= @count_activities_attempted %> activities attempted</a> </h5></li>
</ul>
</div>

<div class="profile_icons" style="text-align: center;">
<% if @twitter.nil? == false %>
<a href="<%= @twitter %>" >
Expand Down Expand Up @@ -367,6 +295,19 @@
transform: scale(1.2);
}

.info h5{
color: grey;
}
.info ul{
padding-inline-start: 0px;
}

.info a { color: inherit; }

li {
list-style-type: none;
}

.token{
font-weight: bold;
}
Expand Down
14 changes: 1 addition & 13 deletions test/functional/users_controller_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ def setup
assert_response 302
end

test 'should get profile and show pagination' do
test 'should get profile' do
i = 0
25.times do
Node.new(uid: users(:bob).id, type: 'note', title: "Node #{i += 1}").save
Expand All @@ -75,7 +75,6 @@ def setup
get :profile, params: { id: users(:bob).username }
assert_response :success

assert_equal 1, css_select('ul.pagination').size
end

test 'generate user reset key' do
Expand Down Expand Up @@ -147,17 +146,6 @@ def setup
end
end

test 'should list notes and questions in user profile' do
user = users(:jeff)
get :profile, params: { id: user.username }
assert_not_nil assigns(:notes)
assert_not_nil assigns(:questions)
selector = css_select '#asked .note-question'
assert_equal selector.size, 2
selector = css_select '#answered .note-answer'
assert_equal selector.size, 1
end

test 'should get comments and render comments/index template' do
user = users(:jeff)
get :comments, params: { id: user.id }
Expand Down

0 comments on commit f9f0bdc

Please sign in to comment.