From c0ef87095628a3e69ee0c55e32907786105aab2b Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Sat, 1 Sep 2018 18:03:32 +0100
Subject: [PATCH] made contacts page responsive

---
 app/assets/stylesheets/pages/_contacts.scss |  7 +++-
 app/views/pages/index.html.erb              | 36 ++++++++++++---------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss
index bac5bab..863717a 100644
--- a/app/assets/stylesheets/pages/_contacts.scss
+++ b/app/assets/stylesheets/pages/_contacts.scss
@@ -11,6 +11,7 @@ a:hover {
 }
 
 .card {
+  min-width: 360px;
   display: flex;
   justify-content: space-between;
   background: $card-background;
@@ -146,10 +147,14 @@ a:hover {
 }
 
 .contacts {
-  height: 570px;
+  // height: 570px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .contacts-list{
+  height: 80vh;
   overflow: scroll;
 }
 
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
index 4b54a44..2e4a4ae 100644
--- a/app/views/pages/index.html.erb
+++ b/app/views/pages/index.html.erb
@@ -1,22 +1,28 @@
 <!-- CONTACTS PAGE -->
 <div class="container">
   <div class="contacts-container text-color">
-    <div class="contacts half">
-      <div class="contacts-header">
-        <h2>Contacts</h2>
-        <%= link_to new_connection_path do %>
-          <i class="fas fa-plus-square"></i>
-        <% end %>
+    <div class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="contacts">
+          <div class="contacts-header">
+            <h2>Contacts</h2>
+            <%= link_to new_connection_path do %>
+              <i class="fas fa-plus-square"></i>
+            <% end %>
+          </div>
+          <div class="contacts-list">
+            <% current_user.contacts.each do |contact| %>
+              <%= render "pages/contact", contact: contact %>
+            <% end %>
+          </div>
+        </div>
       </div>
-      <div class="contacts-list">
-        <% current_user.contacts.each do |contact| %>
-          <%= render "pages/contact", contact: contact %>
-        <% end %>
-      </div>
-    </div>
-    <div class="video-feed half hidden-xs hidden-sm">
-      <div class="video-content">
-        <video id="contacts-video" class="flex-video" autoplay=""></video>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="contacts-video" class="flex-video" autoplay=""></video>
+          </div>
+        </div>
       </div>
     </div>
   </div>