finished basic contacts page
This commit is contained in:
parent
acc13310f6
commit
e98199d013
|
@ -14,3 +14,7 @@
|
||||||
@import "layouts/index";
|
@import "layouts/index";
|
||||||
@import "components/index";
|
@import "components/index";
|
||||||
@import "pages/index";
|
@import "pages/index";
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $background;
|
||||||
|
}
|
||||||
|
|
|
@ -14,3 +14,5 @@ $secondary: #5ED17E;
|
||||||
$background: #33333D;
|
$background: #33333D;
|
||||||
$card-background: #464650;
|
$card-background: #464650;
|
||||||
$navbar-background: #1F1F29;
|
$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 page-specific CSS files here.
|
||||||
@import "home";
|
@import "home";
|
||||||
|
@import "contacts"
|
||||||
|
|
|
@ -3,4 +3,7 @@ class PagesController < ApplicationController
|
||||||
|
|
||||||
def call
|
def call
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def index
|
||||||
|
end
|
||||||
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@ Rails.application.routes.draw do
|
||||||
get 'video_sessions/create'
|
get 'video_sessions/create'
|
||||||
devise_for :users
|
devise_for :users
|
||||||
root to: 'pages#call'
|
root to: 'pages#call'
|
||||||
get '/contacts', to: 'users#index'
|
get '/contacts', to: 'pages#index'
|
||||||
post '/sessions', to: 'video_sessions#create'
|
post '/sessions', to: 'video_sessions#create'
|
||||||
|
|
||||||
mount ActionCable.server, at: '/cable'
|
mount ActionCable.server, at: '/cable'
|
||||||
|
|
Loading…
Reference in New Issue