made contacts page responsive

This commit is contained in:
Beatrice Olivera 2018-09-01 18:03:32 +01:00
parent 80646d4d33
commit c0ef870956
2 changed files with 27 additions and 16 deletions

View File

@ -11,6 +11,7 @@ a:hover {
} }
.card { .card {
min-width: 360px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: $card-background; background: $card-background;
@ -146,10 +147,14 @@ a:hover {
} }
.contacts { .contacts {
height: 570px; // height: 570px;
display: flex;
flex-direction: column;
justify-content: center;
} }
.contacts-list{ .contacts-list{
height: 80vh;
overflow: scroll; overflow: scroll;
} }

View File

@ -1,7 +1,9 @@
<!-- CONTACTS PAGE --> <!-- CONTACTS PAGE -->
<div class="container"> <div class="container">
<div class="contacts-container text-color"> <div class="contacts-container text-color">
<div class="contacts half"> <div class="row">
<div class="col-xs-12 col-md-6">
<div class="contacts">
<div class="contacts-header"> <div class="contacts-header">
<h2>Contacts</h2> <h2>Contacts</h2>
<%= link_to new_connection_path do %> <%= link_to new_connection_path do %>
@ -14,13 +16,17 @@
<% end %> <% end %>
</div> </div>
</div> </div>
<div class="video-feed half hidden-xs hidden-sm"> </div>
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<div class="video-feed">
<div class="video-content"> <div class="video-content">
<video id="contacts-video" class="flex-video" autoplay=""></video> <video id="contacts-video" class="flex-video" autoplay=""></video>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS --> <!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
<div id="my-user-id" data-user-id="<%= current_user.id %>"></div> <div id="my-user-id" data-user-id="<%= current_user.id %>"></div>