I have the code below and I want to create an tag between the div with the class 'box'.
I cant just use the link_to method because I want this link to encompass all the html code from the to its respective ending . So anyone who clicks within that box gets transported to the equivalent of: <%= link_to( 'go', { action: :edit, id: course.id }) %>. I tried finding this else where but failed.
<% #courses.in_groups_of(3, false) do |group| %> <!--Takes groups of three courses -->
<div class="row">
<% group.each do |course| %>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="box">
<div class="icon">
<div class="image"><span class="glyphicon glyphicon-list-alt btn-lg white"></span></div>
<div class="info">
<h3 class="title"><%= course.name %> | GPA: <%= course.gpa.to_f %></h3>
<p>
<%= course.description %>
</p>
<div class="more">
<a href="#" title="Title Link"><i class="fa fa-plus"></i> Details
</a>
<%= link_to( 'go', { action: :edit, id: course.id }) %>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<% end %>
</div>
<% end %>
<%= link_to({ action: :edit, id: course.id }) do %>
<div class="box">
<div class="icon">
<div class="image"><span class="glyphicon glyphicon-list-alt btn-lg white"></span></div>
<div class="info">
<h3 class="title"><%= course.name %> | GPA: <%= course.gpa.to_f %></h3>
<p>
<%= course.description %>
</p>
<div class="more">
<i class="fa fa-plus"></i> Details
</div>
</div>
</div>
<% end %>
I am not sure I understand your question, but I think you are asking to enclose your html code into a link_to tag. So try this:
<%= link_to path_to_land_on do %>
<div class='box'>
// other code
</div>
<% end %>
Replace path_to_land_on with { action: :edit, id: 2 } or path
Related
Hello I have an rails 7 application where i want to inline edit an action item, and on the action_item.status turbo frame I get this error Response has no matching <turbo-frame id="status_action_item_8c36e8a6-70a5-4417-864b-198788f984b3"> element
I have several identical frames(different domID) which have no issue.
I have been following along with some great turbo content from gorails and hotrails and this is really puzzeling me, i am hoping i am close and it just needs a set of eyes.
Index
<div class="row justify-content-center">
<div class="col-12">
<div class="card shadow border-dark border-2 rounded-2">
<div class="card-header bg-dark border-secondary border-bottom border-2 d-flex justify-content-between align-items-center">
<div class="dropdown">
<button class="btn btn-lg btn-outline-light dropdown-toggle float-start" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" target="_top">
Incomplete Tasks
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><%= link_to "Completed Tasks", completed_action_items_path, class: "dropdown-item"%></li>
<li><%= link_to "In Progress Tasks", in_progress_action_items_path, class: "dropdown-item"%></li>
</ul>
</div>
<%= link_to new_action_item_path, class: 'btn btn-outline-light float-end m-2' do %>
+
<% end %>
</div>
<div class="card-body m-0 p-0">
<div class="table-responsive">
<table class="table table-hover table-borderless m-0 p-0 align-middle">
<thead>
<tr class="table-dark">
<th style="width: 3%"></th>
<th class="" style="width: 30%"><span class="m-2">Name</span></th>
<th class="d-none d-md-table-cell" style="width: 27%"><span class="m-2">Meeting</span></th>
<th class="text-center" style="width: 10%"><span class="m-2">Status</span></th>
<th class="text-center d-none d-md-table-cell" style="width: 5%"><span class="m-2">Priority</span></th>
<th class="text-center" style="width: 5%"><span class="m-2">Due</span></th>
<th class="text-center" style="width: 10%"><span class="m-2">Actions</span></th>
</tr>
</thead>
<tbody>
<% #action_items.each do |action_item| %>
<tr>
<td>
<button class="btn btn-sm btn-outline-success rounded-3 border-0 float-end me-1"
type="button"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
title="Complete task"
>
<i class="fas fa-check-circle text-success hide"></i>
</button>
</td>
<td class=""><small class="ms-2"><%= link_to action_item.name, action_item, class: "text-decoration-none text-dark" %></small></td>
<td class="d-none d-md-table-cell"><small class=""><%= action_item.meeting.name %></small></td>
<%= render 'status', action_item: action_item %>
<%= render 'priority', action_item: action_item %>
<%= render 'due', action_item: action_item %>
<%= render 'actions', action_item: action_item %>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Status Partial
<td class="text-center">
<small class="">
<% frame_id = dom_id(action_item, "status") %>
<%= form_with model: action_item, class: '', data: { turbo_frame: frame_id } do %>
<%= turbo_frame_tag frame_id, class: 'inline-edit' do %>
<%= status_method(action_item) %>
<% end %>
<% end %>
</small>
</td>
Form
<%= form_with(model: action_item) do |form| %>
<% if action_item.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(action_item.errors.count, "error") %> prohibited this action_item from being saved:</h2>
<ul>
<% action_item.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="mb-3">
<% frame_id = dom_id(action_item, "name_turbo_frame") %>
<%= turbo_frame_tag frame_id do %>
<div class="input-group">
<%= form.text_field :name, class: 'form-control mw-100', placeholder: 'Description' %>
<%= form.button class: "btn btn-dark inline-action" do %>
<i class="fa-regular fa-floppy-disk"></i>
<% end %>
</div>
<% end %>
</div>
<% if #Meeting.present? %>
<%= form.hidden_field :meeting_id, value: #meeting.id %>
<% end %>
<% frame_id = dom_id(action_item, "attendee_turbo_frame") %>
<%= turbo_frame_tag frame_id do %>
<% if #action_item.meeting.present? %>
<div class="input-group">
<%= form.select :attendee_id, action_item.meeting.attendees.all.map { |p| [ p.user.email, p.id ] }, { include_blank: true}, { class: 'form-select' } %>
<%= form.button class: "btn btn-dark inline-action" do %>
<i class="fa-regular fa-floppy-disk"></i>
<% end %>
<%= form.hidden_field :status, value: "assigned" %>'
</div>
<% end %>
<% end %>
<div class="mb-3">
<% frame_id = dom_id(action_item, "action_item_priority_turbo_frame") %>
<%= turbo_frame_tag frame_id do %>
<div class="input-group">
<%= form.select(:priority, ActionItem.priorities.keys.map { |priority| [priority.titleize, priority]}, { include_blank: "Priority" }, { class: 'form-select' }) %>
<%= form.button class: "btn btn-dark inline-action" do %>
<i class="fa-regular fa-floppy-disk"></i>
<% end %>
</div>
<% end %>
</div>
<div class="mb-3">
<% frame_id = dom_id(action_item, "status") %>
<%= turbo_frame_tag frame_id do %>
<div class="input-group">
<%= form.select(:status, ActionItem.statuses.keys.map { |status| [status.titleize, status]}, { include_blank: "Status" }, { class: 'form-select'}) %>
<%= form.button class: "btn btn-dark inline-action" do %>
<i class="fa-regular fa-floppy-disk"></i>
<% end %>
</div>
<% end %>
</div>
<div class="mb-3">
<% frame_id = dom_id(action_item, "action_item_due_date_turbo_frame") %>
<%= turbo_frame_tag frame_id do %>
<div class="input-group">
<%= form.date_field :due, class: 'form-control' %>
<%= form.button class: "btn btn-dark inline-action" do %>
<i class="fa-regular fa-floppy-disk"></i>
<% end %>
</div>
<% end %>
</div>
<div class="mb-3">
<% if action_item.persisted? %>
<div class="float-end">
<%= link_to 'Destroy', action_item, method: :delete, class: "text-danger", data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
<%= form.submit class: 'btn btn-primary' %>
<% if action_item.persisted? %>
<%= link_to "Cancel", action_item, class: "btn btn-link" %>
<% else %>
<%= link_to "Cancel", action_items_path, class: "btn btn-link" %>
<% end %>
</div>
<% end %>
ActionItemsHelper
def status_method(action_item)
if action_item.status.present?
link_to action_item.status.titleize, edit_action_item_path(action_item), class: "btn btn-sm btn-outline-dark border-0"
else
link_to edit_action_item_path(action_item), class: "btn btn-sm btn-outline-dark border-0" do
content_tag(:i, "", class: ["fas", "fa-traffic-light", "fa-sm"] )
end
end
end
Thanks in advance
What I'm doing here is changing the opacity of the header and adding a searchbar when it reaches a waypoint (A bigger searchbar). It works, the problem here is that the change is only applied after I inspect the window and change between screen sizes.
Even a simple console log only happens after inspecting the windows
CoffeeScript
$(document).ready -> #The indentation is correct
if $('#hero-image').length > 0
$searchBarMin = $('header #search-bar-group')
$searchaBar = $('#big-search-bar')
$header = $('header')
$nearYou = $('#near-you')
$searchBarMin.hide()
$header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3))", position: "absolute" })
waypoint = new Waypoint({
element: $('#near-you'),
handler: (direction)->
console.log '!///////////////////'
if (direction == "down")
$searchBarMin.show()
$header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1))" })
else
$searchBarMin.hide()
$header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3))" })
})
Header html
<header id="header-logged-in" class="expanded row">
<div id="logo-container" class="small-6 small-push-3 medium-3 medium-push-0 large-2 columns">
<%= link_to root_path do %>
<%= image_tag("TA_logo01.png") %>
<% end %>
</div>
<div class="small-12 medium-3 large-1 text-center columns">
<h6><i><%= link_to "What is TattooAdvisor", what_is_tattoo_advisor_path %></i></h6>
</div>
<div id="search-bar-container" class="large-5 show-for-large columns" action='/search' >
<%= form_tag search_path, method: :get do %>
<div id="search-bar-group" class="row collapse">
<div class="small-9 medium-6 medium-push-2 large-7 large-push-3 columns">
<%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%>
</div>
<div id="search-button" class="small-2 small-pull-1 medium-pull-2 large-pull-1 columns">
<%= submit_tag "Search", class: "button" %>
</div>
</div>
<% end %>
</div>
<div id="log-in-div" class="small-12 medium-6 large-4 menu-centered columns">
<ul class="menu dropdown large-pull-1" data-dropdown-menu>
<li>
<div class="small-6 medium-6 large-push-2 columns">
<%= avatar_profile_link current_user, "thumb", class: 'logged-in-picture' %>
</div>
<div class="small-6 small-pull-1 medium-6 large-pull-0 columns">
<h4><%= current_user.display_name %></h4>
</div>
<ul class="menu">
<li class="upper-pad">
<%= link_to "Profile", profile_standard_path %>
</li>
<% if current_user.has_role? :artist %>
<li class="upper-pad">
<%= link_to "Artist Profile", profile_artist_path %>
</li>
<% end %>
<% if current_user.has_role? :parlour %>
<li class="upper-pad">
<%= link_to "Parlour Profile", profile_parlour_path %>
</li>
<% end %>
<li id="premium-drop-down-li">
<b><%= link_to "Upgrade Account", subscription_path %></b>
</li>
<li class="upper-pad">
<%= link_to "Invite", new_invite_path %>
</li>
<li class="upper-pad">
<%= link_to "Log Out", destroy_user_session_path, method: :delete %>
</li>
</ul>
</li>
</ul>
<div class="small-5 small-pull-1 medium-1 medium-pull-3 large-pull-5 columns">
<%= link_to "Review", new_review_path, class:'button' %>
</div>
</div>
<div id="search-bar-container" class="small-12 columns hide-for-large" action='/search' >
<%= form_tag search_path, method: :get do %>
<div id="search-bar-group" class="row collapse">
<div id="search-bar" class="small-9 medium-6 medium-push-2 columns">
<%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%>
</div>
<div id="search-button" class="small-2 small-pull-1 medium-pull-2 columns">
<%= submit_tag "Search", class: "button" %>
</div>
</div>
<% end %>
</div>
HomePage
<div class="row full-width">
<div class="small-12 columns">
<div id="hero-image" class="row expanded">
<div id="front-search-box" class="small-12 medium-6 medium-centered large-4 columns collapse">
<div class="text-center">
<h3><i>Tattoos are art<br>
Art is subjective</i></h3>
<h5>Find the right artist for your tattoo</h5>
</div>
<div class="input-group">
<%= render 'search_box' %>
</div>
</div>
</div>
</div>
</div>
<%= render partial: 'near_you' %>
SearchBox Partial
<div class="row collapse">
<div class="small-11 menu" action='/search' >
<%= form_tag search_path, method: :get do %>
<div id="big-search-bar" class="row collapse">
<div class="small-10 column">
<%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%>
</div>
<div id="search-button" class="small-2 column">
<%= submit_tag "Search", class: "button" %>
</div>
</div>
<% end %>
</div>
Rails version: 4.2.6.
Turbolinks: 5.0.1
Foundation 6.3.
Waypoints (Latests version, installed with bower)
This is a css issue clashing with the way waypoint.js works.
First thing you need to change is remove the property height: 100% on body, but keep it on html.
html{
height: 100%; # not on body, just html
...
}
Then, your header position attribute needs to be fixed and not absolute.
header{
position: fixed; # not absolute
...
}
If you do all this it should work.
I have two tabs at the profile page: tab 1) my recipes, tab 2) my favorites.
Kaminari pagination works just fine when I go to the index page for recipes. However the pagination does not work properly at the profile page. When I click on next it does show me the next page, but the pagination bar disappears. So I cannot go back, unless I refresh the page.
Who can help me? Thank you in advance.
Profile controller:
class ProfilesController < ApplicationController
def show
#recipes = current_user.recipes.order("name").page(params[:recipes_page]).per(3)
#favorites = current_user.favorites.order("name").page(params[:favorites_page]).per(3)
end
end
Kaminari:
<% if #recipes.present? %>
<div class="apple_pagination" id="paginator-my-recipes">
<%= paginate #recipes, :remote => true, :param_name => :recipes_page %>
</div>
<% end %>
app/views/profiles/show.html.erb:
<div class="container is-small sand-color">
<div class="tabs">
<div class="your-recipes-btn">
<a class= "tab active" data-target= "#your-recipes">
<h4>Your recipes</h4>
</a>
</div>
<div class="your-favorites-btn">
<a class= "tab" data-target= "#your-favo">
<h4>Favorites</h4>
</a>
</div>
</div>
</div>
<div class="tab-content" id="your-recipes">
<div class="container is-small sand-color">
<% if #recipes.present? %>
<%= render #recipes %>
<% else %>
<h4 class="text-center">Create your own recipes</h4>
<% end %>
</div>
<% if #recipes.present? %>
<div class="apple_pagination" id="paginator-my-recipes">
<%= paginate #recipes, :remote => true, :param_name => :recipes_page %>
</div>
<% end %>
</div>
<div class="tab-content hidden" id="your-favo">
<div class="container is-small sand-color">
<% if #favorites.present? %>
<%= render #favorites %>
<% else %>
<h4 class="text-center">You don't have any recipes</h4>
<% end %>
</div>
<% if #favorites.present? %>
<div class="apple_pagination" id="paginator-my-favo">
<%= paginate #favorites, :remote => true, :param_name => :favorites_page %>
</div>
<% end %>
</div>
app/views/profiles/_favorites.html.erb
<div class="product">
<div class='product-upvote'>
<div class="product-arrow"></div>
<div class='product-count'>95</div>
</div>
<% if recipe.photo != nil %>
<%= cl_image_tag recipe.photo, height: 100, width: 150, crop: :fill, class: "product-image hidden-xs" %>
<% else %>
<% end %>
<div class='product-body'>
<%= link_to recipe_path(recipe) do %>
<h4><%= recipe.name %></h4>
<% end %>
<div class="summary dont-break-out">
<p><%= recipe.summary %></p>
</div>
<div class="recipes-info">
<div class="recipes-kitchen">
<p>Gang</p>
<h5> <%= recipe.course %> </h5>
</div>
<div class="recipes-kitchen">
<p>Keuken</p>
<h5> <%= recipe.kitchen %> </h5>
</div>
<div class="cooking-time">
<p>Kooktijd</p>
<h5><%= recipe.cooking_time %> min</h5>
</div>
<div class="created">
<p>Geplaatst op</p>
<h5><%= recipe.created_at.strftime('%d/%m/%Y') %> </h5>
</div>
</div>
</div>
</div>
app/views/profiles/show.js.erb:
$('#your-recipes').html('<%= escape_javascript render(#recipes) %>');
$('#paginator-my-recipes').html('<%= escape_javascript(paginate(#recipes, :remote => true).to_s) %>');
$('#your-favo').html('<%= escape_javascript render(#favorites) %>');
$('#paginator-my-favo').html('<%= escape_javascript(paginate(#favorites, :remote => true).to_s) %>');
so I've created a web app that has user profiles, where users can search for fellow users based on interests etc.. How might I add a feature where users can favorite a persons profile? I.e. User A finds User B and likes what they see, and can click a 'Favorite this profile' button and perhaps it's starred, and stored? What would the code look like for this? Just an idea, but I'm open to all ideas.
user_profile.html.erb
<%= render "shared/header" %>
<div id="landing_welcome_page">
<div class="container">
<div class="row">
<%#= Profile image upload %>
<div class="span4">
<%= user_avatar(current_user) %>
<%#= Space w line %>
<div class="name"></div><br>
<%#= Please bare in mind these are strickly temporary placeholders i.e whitespace %>
<%= render 'social' %>
</div>
<div class="span8">
<%# User name %>
<span class="name1">
<% if current_user.first_name.blank? %>
<%= current_user.first_name.present? ? current_user.first_name : link_to('Finish your profile', edit_account_path)%>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
<span class="side-buttons">
<div class="name"></div>
</span>
</span>
</div>
<div class="row">
<br />
<div class="span6">
<%# User occupation %>
<i class="fa fa-usd"></i>:
<%= best_in_place current_user, :occupation, nil: 'Add occupation' %>
</div>
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
<div class="span6">
<%# User gender %>
<br />
<% if current_user.gender == "M" || "male" %>
<i class="fa fa-male"></i> Male
<% else %>
<i class="fa fa-female"></i> Female
<% end %>
</div>
<div class="span2">
<!-- Code to calculate age by user birthday -->
<br />
Age: <%= user_birthday %>
</div>
<div class="span8"></div>
<div class="span8"><div class="name"></div></div>
<div class="span8">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">About me</li>
<li>Photos</li>
<li>Personality</li>
</ul>
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<% #questions_for_about.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
<div class="tab-pane" id="tab2">
<div class="page-header">
<%= form_for Photo.new do |f| %>
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add photos...</span>
<%= f.file_field :file, multiple: true, name: "photo[file]" %>
</span>
<% end %>
<div class="clearfix"></div>
</div>
<div class="photos_cont">
<div class="col-sm-6 col-md-3">
<span class="gallery"><%= render current_user.photos %></span>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<% #questions_for_personality.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<%= render '/shared/footer' %>
</div>
</div>
<script id="template-upload" type="text/x-tmpl">
<div class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%;"></div></div>
</div>
</script>
<script>
var fb_param = {};
fb_param.pixel_id = '6009056882201';
fb_param.value = '0.00';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript>
<img height="1" src="https://www.facebook.com/offsite_event.php?id=6009056882201&value=0" style="display:none;" width="1"/>
</noscript>
<script type="text/javascript">
// remove default datepicker event
jQuery(document).off('best_in_place:datepicker');
jQuery(document).on('best_in_place:datepicker', function(event, bip, element) {
// Display the jQuery UI datepicker popup
jQuery(element).find('input')
.datepicker({
format: element.data('date-format')
})
.on('hide', function(){
bip.update();
})
.on('changeDate', function(){
$(this).datepicker('hide');
})
.datepicker('show');
});
</script>
Create a Favorite model with a has_and_belongs_to_many relationship with User
Once you create the Favorite model and set up the relationship, you can do things like:
#user.favorites = [ user1, user2, user3 ]
#user.favorites << user4
to assign favorites to a user, or display them with something like:
<%= #user.favorites.map(&:name).to_sentence %>
You'll find everything you need to know on how to do this here: http://guides.rubyonrails.org/association_basics.html
so I've created a web app that has user profiles, where users can search for fellow users based on interests etc.. However sometimes the users don't fill out certain areas of their profile, i.e. about me may be left blank.. So how can I add the ability for users to only see the content of the profile that they filled out. In other words they can’t see the parts of other user profiles for which they have not completed.
user_profile.html.erb
<%= render "shared/header" %>
<div id="landing_welcome_page">
<div class="container">
<div class="row">
<%#= Profile image upload %>
<div class="span4">
<%= user_avatar(current_user) %>
<%#= Space w line %>
<div class="name"></div><br>
<%#= Please bare in mind these are strickly temporary placeholders i.e whitespace %>
<%= render 'social' %>
</div>
<div class="span8">
<%# User name %>
<span class="name1">
<% if current_user.first_name.blank? %>
<%= current_user.first_name.present? ? current_user.first_name : link_to('Finish your profile', edit_account_path)%>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
<span class="side-buttons">
<div class="name"></div>
</span>
</span>
</div>
<div class="row">
<br />
<div class="span6">
<%# User occupation %>
<i class="fa fa-usd"></i>:
<%= best_in_place current_user, :occupation, nil: 'Add occupation' %>
</div>
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
<div class="span6">
<%# User gender %>
<br />
<% if current_user.gender == "M" || "male" %>
<i class="fa fa-male"></i> Male
<% else %>
<i class="fa fa-female"></i> Female
<% end %>
</div>
<div class="span2">
<!-- Code to calculate age by user birthday -->
<br />
Age: <%= user_birthday %>
</div>
<div class="span8"></div>
<div class="span8"><div class="name"></div></div>
<div class="span8">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">About me</li>
<li>Photos</li>
<li>Personality</li>
</ul>
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<% #questions_for_about.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
<div class="tab-pane" id="tab2">
<div class="page-header">
<%= form_for Photo.new do |f| %>
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add photos...</span>
<%= f.file_field :file, multiple: true, name: "photo[file]" %>
</span>
<% end %>
<div class="clearfix"></div>
</div>
<div class="photos_cont">
<div class="col-sm-6 col-md-3">
<span class="gallery"><%= render current_user.photos %></span>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<% #questions_for_personality.each_with_index do |question, index| %>
<div class="question">
<h4 class="user_questions">
<%= index + 1 %>. <%= question.question %>
<%= link_to ("<i class='icon-edit'></i>".html_safe),
edit_user_question_path(current_user, question),
remote: true, class: "edit_link_#{question.id}" %>
</h4>
<div class="answer" id="answer_<%= question.id %>">
<%= answer_for(question) %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<%= render '/shared/footer' %>
</div>
</div>
<script id="template-upload" type="text/x-tmpl">
<div class="upload">
{%=o.name%}
<div class="progress"><div class="bar" style="width: 0%;"></div></div>
</div>
</script>
<script>
var fb_param = {};
fb_param.pixel_id = '6009056882201';
fb_param.value = '0.00';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript>
<img height="1" src="https://www.facebook.com/offsite_event.php?id=6009056882201&value=0" style="display:none;" width="1"/>
</noscript>
<script type="text/javascript">
// remove default datepicker event
jQuery(document).off('best_in_place:datepicker');
jQuery(document).on('best_in_place:datepicker', function(event, bip, element) {
// Display the jQuery UI datepicker popup
jQuery(element).find('input')
.datepicker({
format: element.data('date-format')
})
.on('hide', function(){
bip.update();
})
.on('changeDate', function(){
$(this).datepicker('hide');
})
.datepicker('show');
});
</script>
The conditionals that you have can be expanded to cover the whole div containing the info block.
For example:
<div class="addy">
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>
</div>
</div>
Could be
<div class="addy">
<% if current_user.address.present? %>
<div class="span2">
<%# User address %>
<i class="fa fa-home"></i>:
<%= current_user.address %>
</div>
<% else %>
<%= link_to('Add Address', edit_account_path) %>
<% end %>
</div>
Then it would only show the link if the address is not present.
Seems like you're on the right track. Basically, for every user attribute on the User model you want to show/hide, you'll want to add a conditional that evaluates whether or not the attribute on current_user is present?:
<span class="name1">
<% if current_user.first_name.blank? %>
<%= link_to('Finish your profile', edit_account_path) %>
<% else %>
<%= current_user.first_name %> <%= current_user.last_name %>
<% end %>
</span>
Alternatively, you can continue using ternary operators for single line evaluations, as you are already doing in some instances:
<%= current_user.address.present? ? current_user.address : link_to('Add Address', edit_account_path) %>