Attempting to replicate this basic design in edit mode.
https://i.sstatic.net/2gW9e.png
The following code showcases the image above:
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag @user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= @user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= @user.groups.length %></b><% if @user.groups.length == 0 %>
<p> debate</p><% else %><p> debates</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= @user.followers.length %></b> <%if @user.followers.length == 0%>
<p> follower</p> <% else %><p> followers</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= @user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == @user %>
<%= link_to(edit_user_path(@user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
Tried copying the main page design into edit mode but encountered issues resulting in:https://i.sstatic.net/QSeVY.png
Having trouble with Bootstrap while using the simple_form gem on Rails. Here's my edit mode code:
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for @user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag @user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choose a photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= @user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= @user.groups.length %></b><% if @user.groups.length == 0 %>
<p> debate</p><% else %><p> debates</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= @user.followers.length %></b> <%if @user.followers.length == 0%>
<p> follower</p> <% else %><p> followers</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Save", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any assistance would be greatly appreciated.