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 { .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;
} }

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

@ -1,22 +1,28 @@
<!-- 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="contacts-header"> <div class="col-xs-12 col-md-6">
<h2>Contacts</h2> <div class="contacts">
<%= link_to new_connection_path do %> <div class="contacts-header">
<i class="fas fa-plus-square"></i> <h2>Contacts</h2>
<% end %> <%= 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>
<div class="contacts-list"> <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<% current_user.contacts.each do |contact| %> <div class="video-feed">
<%= render "pages/contact", contact: contact %> <div class="video-content">
<% end %> <video id="contacts-video" class="flex-video" autoplay=""></video>
</div> </div>
</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> </div>
</div> </div>
</div> </div>