paoda/polyglot
1
0
Fork 0
mirror of https://github.com/beatriceo/polyglot.git synced 2025-10-29 19:42:11 +00:00
Code Issues Projects Releases Wiki Activity

finished basic contacts page

Browse Source
This commit is contained in:
Beatrice Olivera
2018-08-28 17:18:58 +01:00
parent acc13310f6
commit e98199d013
11 changed files with 188 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/application.scss
View File

@@ -14,3 +14,7 @@
@import "layouts/index";
@import "components/index";
@import "pages/index";
body {
background-color: $background;
}

2
app/assets/stylesheets/config/_colors.scss
View File

@@ -14,3 +14,5 @@ $secondary: #5ED17E;
$background: #33333D;
$card-background: #464650;
$navbar-background: #1F1F29;
$text-darker: #CDCDCD;
$icon: #EDECEC;

17
app/assets/stylesheets/layouts/_contacts.scss
View File

@@ -1,17 +0,0 @@
.card {
display: flex;
justify-content: space-between;
background-color: $card-background;
.profile {
}
.call {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}
}

121
app/assets/stylesheets/pages/_contacts.scss Normal file
View File

@@ -0,0 +1,121 @@
a:hover {
text-decoration: none;
}
.card {
display: flex;
justify-content: space-between;
background: $card-background;
align-items: center;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
&:hover {
box-shadow: inset 0px 0px 0px 2px $primary;
}
.info {
display: flex;
align-items: center;
.text {
p {
padding: 0;
margin: 0;
}
.darker {
color: $text-darker;
}
}
}
.profile {
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
img {
width: 50px;
}
}
.call {
margin-left: 20px;
margin-right: 20px;
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
i {
color: $icon;
font-size: 25px;
}
}
}
.video-feed {
padding-top: 67px;
padding-left: 50px;
}
.video-content {
height: 485px;
background-color: black;
}
.half {
width: 50%;
}
.text-color {
color: white;
}
.contacts-container {
display:flex;
justify-content: center;
align-items: center;
}
.modal-header {
border-bottom: 0px;
i {
font-size: 50px;
}
}
.modal-color {
background-color: $card-background;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:35%;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
.modal-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

1
app/assets/stylesheets/pages/_index.scss
View File

@@ -1,2 +1,3 @@
// Import page-specific CSS files here.
@import "home";
@import "contacts"

3
app/controllers/pages_controller.rb
View File

@@ -3,4 +3,7 @@ class PagesController < ApplicationController
def call
end
def index
end
end

12
app/views/layouts/_contact.html.erb
View File

@@ -1,12 +0,0 @@
<div class="card">
<div class="profile img-circle">
<img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="">
</div>
<div class="info">
<h3>FirstName LastName</h3>
<p>Last call: <%= Date.now %></p>
</div>
<div class="call">
<i class="fas fa-phone"></i>
</div>
</div>

15
app/views/layouts/index.html.erb
View File

@@ -1,15 +0,0 @@
<div class="container">
<div class="contacts">
<h2>Contacts</h2>
<% 5.times do %>
<%= render "layouts/contact" %>
<% end %>
</div>
<div class="video-feed">
<video src=""></video>
</div>
</div>

38
app/views/pages/_contact.html.erb Normal file
View File

@@ -0,0 +1,38 @@
<div class="card">
<div class="info">
<img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=65>
<div class="text text-color">
<p>FirstName LastName</p>
<p class="darker">Last call: <%= Time.now %></p>
</div>
</div>
<div class="call">
<%= link_to "#", 'data-toggle':"modal", 'data-target':"#myModal" do %>
<i class="fas fa-phone"></i>
<% end %>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content modal-color">
<div class="modal-header">
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do %>
<i class="fas fa-times-circle"></i>
<% end %>
<div class="container">
<div class="modal-container">
<img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=150>
<div class="modal-text">
<h4 class="modal-title" id="myModalLabel">Calling</h4>
<h4><strong>FirstName LastName</strong></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

18
app/views/pages/index.html.erb Normal file
View File

@@ -0,0 +1,18 @@
<div class="container">
<div class="contacts-container text-color">
<div class="contacts half">
<h2>Contacts</h2>
<% 5.times do %>
<%= render "pages/contact" %>
<% end %>
</div>
<div class="video-feed half">
<div class="video-content">
</div>
</div>
</div>
</div>

2
config/routes.rb
View File

@@ -2,7 +2,7 @@ Rails.application.routes.draw do
get 'video_sessions/create'
devise_for :users
root to: 'pages#call'
get '/contacts', to: 'users#index'
get '/contacts', to: 'pages#index'
post '/sessions', to: 'video_sessions#create'
mount ActionCable.server, at: '/cable'