added responsiveness to modal and edit page
This commit is contained in:
parent
598d59319e
commit
8bd06651cf
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -8,3 +8,5 @@
|
||||||
|
|
||||||
<%= p.button :submit, class: "btn btn-primary" %>
|
<%= p.button :submit, class: "btn btn-primary" %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue