commit
f8d05dd449
|
@ -15,5 +15,7 @@
|
|||
@import "components/index";
|
||||
@import "pages/index";
|
||||
|
||||
body {
|
||||
background-color: $background;
|
||||
}
|
||||
@import "devise/index";
|
||||
|
||||
|
|
|
@ -14,3 +14,5 @@ $secondary: #5ED17E;
|
|||
$background: #33333D;
|
||||
$card-background: #464650;
|
||||
$navbar-background: #1F1F29;
|
||||
$text-darker: #CDCDCD;
|
||||
$icon: #EDECEC;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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,2 +1,3 @@
|
|||
// Import page-specific CSS files here.
|
||||
@import "home";
|
||||
@import "contacts"
|
||||
|
|
|
@ -4,6 +4,9 @@ class PagesController < ApplicationController
|
|||
def call
|
||||
end
|
||||
|
||||
def index
|
||||
end
|
||||
|
||||
def home
|
||||
end
|
||||
end
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -5,7 +5,7 @@ Rails.application.routes.draw do
|
|||
get '/logout', to: 'devise/sessions#destroy'
|
||||
end
|
||||
root to: 'pages#home'
|
||||
get '/contacts', to: 'users#index'
|
||||
get '/contacts', to: 'pages#index'
|
||||
post '/sessions', to: 'video_sessions#create'
|
||||
|
||||
mount ActionCable.server, at: '/cable'
|
||||
|
|
Loading…
Reference in New Issue