Merge pull request #45 from beatriceo/responsiveness

added responsiveness to modal and edit page

app/assets/stylesheets/pages/_contacts.scss

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

app/assets/stylesheets/users/_edit.scss

@@ -3,7 +3,8 @@
   display: flex;
   justify-content: space-between;
   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 {
     flex-grow: 1;
@@ -22,10 +23,18 @@
 
     img {
       max-width: 50vw;
+      padding-top: 30px;
     }
   }
 }
 
+.small-profile-pic {
+  img {
+    width: 223px;
+    margin-bottom: 20px;
+  }
+}
+
 .profile-form {
   display: grid;
   grid-template-columns: 1fr 1fr;

app/views/pages/_contact.html.erb

@@ -32,11 +32,11 @@
             <i class="fas fa-times-circle"></i>
           <% end %>
           <div class="container">
-            <div class="modal-container">
+            <div class="modal-container modal-flex">
               <% 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 %>
-                <%= 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 %>
               <div class="modal-text">
                 <h4 class="modal-title" id="myModalLabel">Calling</h4>

app/views/pages/new.html.erb

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

app/views/users/edit.html.erb

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