paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/stylesheets/pages/_contacts.scss
View File

@ -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;
}

36
app/views/pages/index.html.erb
View File

@ -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>