added responsiveness to modal and edit page

This commit is contained in:
Ethan Fraenkel 2018-09-03 11:25:20 +02:00
parent 598d59319e
commit 8bd06651cf
5 changed files with 40 additions and 13 deletions

View File

@ -100,6 +100,8 @@ a:hover {
align-items: center; align-items: center;
} }
// Modal
.modal-header { .modal-header {
border-bottom: 0px; border-bottom: 0px;
i { i {
@ -109,6 +111,7 @@ a:hover {
.modal-color { .modal-color {
background-color: $card-background; background-color: $card-background;
min-width: 296px;
} }
.vertical-alignment-helper { .vertical-alignment-helper {
@ -142,6 +145,20 @@ a:hover {
align-items: center; align-items: center;
} }
.modal-flex {
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 1100px) {
.modal-picture {
width: 50px;
}
}
// Contact
.contact { .contact {
color: white; color: white;
} }

View File

@ -3,7 +3,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: calc(100vh - 4.5em); // 4.5em is height of navbar padding-top: 30px;
// height: calc(100vh - 4.5em); // 4.5em is height of navbar
form { form {
flex-grow: 1; flex-grow: 1;
@ -22,10 +23,18 @@
img { img {
max-width: 50vw; max-width: 50vw;
padding-top: 30px;
} }
} }
} }
.small-profile-pic {
img {
width: 223px;
margin-bottom: 20px;
}
}
.profile-form { .profile-form {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;

View File

@ -32,11 +32,11 @@
<i class="fas fa-times-circle"></i> <i class="fas fa-times-circle"></i>
<% end %> <% end %>
<div class="container"> <div class="container">
<div class="modal-container"> <div class="modal-container modal-flex">
<% if contact.photo.url.nil? %> <% if contact.photo.url.nil? %>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=150> <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
<% else %> <% else %>
<%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:150%> <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle modal-picture", width:150%>
<% end %> <% end %>
<div class="modal-text"> <div class="modal-text">
<h4 class="modal-title" id="myModalLabel">Calling</h4> <h4 class="modal-title" id="myModalLabel">Calling</h4>

View File

@ -8,3 +8,5 @@
<%= p.button :submit, class: "btn btn-primary" %> <%= p.button :submit, class: "btn btn-primary" %>
<% end %> <% end %>

View File

@ -7,25 +7,24 @@
<%= t.input :last_name %> <%= t.input :last_name %>
<%= t.input :password %> <%= t.input :password %>
<%= t.input :photo %> <%= t.input :photo %>
<div class="small-profile-pic hidden-md hidden-lg">
<% if @user.photo.url.nil? %>
<%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
<% else %>
<%= cl_image_tag current_user.photo%>
<% end %>
</div>
<%= t.submit :Save, class: "btn btn-primary save-btn form-control" %> <%= t.submit :Save, class: "btn btn-primary save-btn form-control" %>
<p></p> <p></p>
<%= link_to "View my profile", user_path(@user), class: "btn btn-primary save-btn form-control" %> <%= link_to "View my profile", user_path(@user), class: "btn btn-primary save-btn form-control" %>
</div> </div>
<div class="profile-pic hidden-xs hidden-sm">
<div class="profile-pic">
<% if @user.photo.url.nil? %> <% if @user.photo.url.nil? %>
<%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%> <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
<% else %> <% else %>
<%= cl_image_tag current_user.photo%> <%= cl_image_tag current_user.photo%>
<% end %> <% end %>
<%#= t.input_field :photo, onchange: 'this.form.submit();' %>
<%#= t.input_field :photo, as: :hidden %>
</div> </div>
</div> </div>
<% end %> <% end %>
</div> </div>