From 8bd06651cf8a291caac9bb8b9bdcc13fc59ecf48 Mon Sep 17 00:00:00 2001
From: Ethan Fraenkel <ethan.fraenkel@hotmail.com>
Date: Mon, 3 Sep 2018 11:25:20 +0200
Subject: [PATCH] added responsiveness to modal and edit page

---
 app/assets/stylesheets/pages/_contacts.scss | 17 +++++++++++++++++
 app/assets/stylesheets/users/_edit.scss     | 11 ++++++++++-
 app/views/pages/_contact.html.erb           |  6 +++---
 app/views/pages/new.html.erb                |  2 ++
 app/views/users/edit.html.erb               | 17 ++++++++---------
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss
index 4b0358e..89fe025 100644
--- a/app/assets/stylesheets/pages/_contacts.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/users/_edit.scss b/app/assets/stylesheets/users/_edit.scss
index 48c2d94..ea05b38 100644
--- a/app/assets/stylesheets/users/_edit.scss
+++ b/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;
diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb
index 92f1689..b4a1b9b 100644
--- a/app/views/pages/_contact.html.erb
+++ b/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>
diff --git a/app/views/pages/new.html.erb b/app/views/pages/new.html.erb
index 55c5058..568f355 100644
--- a/app/views/pages/new.html.erb
+++ b/app/views/pages/new.html.erb
@@ -8,3 +8,5 @@
 
   <%= p.button :submit, class: "btn btn-primary" %>
 <% end %>
+
+
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index ab4ce1f..54e4b16 100644
--- a/app/views/users/edit.html.erb
+++ b/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">
+          <% 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" %>
         <p></p>
         <%= link_to "View my profile", user_path(@user), class: "btn btn-primary save-btn form-control" %>
       </div>
-
-
-      <div class="profile-pic">
+      <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>