diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 2b5cfc4..8229f30 100755 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -14,3 +14,7 @@ @import "layouts/index"; @import "components/index"; @import "pages/index"; + +body { + background-color: $background; +} diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index fa1108e..1ffb1c1 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -14,3 +14,5 @@ $secondary: #5ED17E; $background: #33333D; $card-background: #464650; $navbar-background: #1F1F29; +$text-darker: #CDCDCD; +$icon: #EDECEC; diff --git a/app/assets/stylesheets/layouts/_contacts.scss b/app/assets/stylesheets/layouts/_contacts.scss deleted file mode 100644 index 2ede27e..0000000 --- a/app/assets/stylesheets/layouts/_contacts.scss +++ /dev/null @@ -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); - } - -} - diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss new file mode 100644 index 0000000..f257221 --- /dev/null +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -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; +} diff --git a/app/assets/stylesheets/pages/_index.scss b/app/assets/stylesheets/pages/_index.scss index 7d880e3..9adfd02 100644 --- a/app/assets/stylesheets/pages/_index.scss +++ b/app/assets/stylesheets/pages/_index.scss @@ -1,2 +1,3 @@ // Import page-specific CSS files here. @import "home"; +@import "contacts" diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 4e227c9..6c59475 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -3,4 +3,7 @@ class PagesController < ApplicationController def call end + + def index + end end diff --git a/app/views/layouts/_contact.html.erb b/app/views/layouts/_contact.html.erb deleted file mode 100644 index 7d5f068..0000000 --- a/app/views/layouts/_contact.html.erb +++ /dev/null @@ -1,12 +0,0 @@ -
-
- -
-
-

FirstName LastName

-

Last call: <%= Date.now %>

-
-
- -
-
diff --git a/app/views/layouts/index.html.erb b/app/views/layouts/index.html.erb deleted file mode 100644 index e8f6a5d..0000000 --- a/app/views/layouts/index.html.erb +++ /dev/null @@ -1,15 +0,0 @@ -
-
-

Contacts

- <% 5.times do %> - <%= render "layouts/contact" %> - <% end %> -
-
- -
-
- - - - diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb new file mode 100644 index 0000000..2450153 --- /dev/null +++ b/app/views/pages/_contact.html.erb @@ -0,0 +1,38 @@ +
+
+ +
+

FirstName LastName

+

Last call: <%= Time.now %>

+
+
+
+ <%= link_to "#", 'data-toggle':"modal", 'data-target':"#myModal" do %> + + <% end %> +
+
+ + + diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb new file mode 100644 index 0000000..b35728b --- /dev/null +++ b/app/views/pages/index.html.erb @@ -0,0 +1,18 @@ +
+
+
+

Contacts

+ <% 5.times do %> + <%= render "pages/contact" %> + <% end %> +
+
+
+
+
+
+
+ + + + diff --git a/config/routes.rb b/config/routes.rb index f48bf3e..57b0c74 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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'